[GH-294] link user's theme to tooltip (#303)

Co-authored-by: Federico Martín Alconada Verzini <fedealconada@gmail.com> Co-authored-by: Ben Schumacher <ben.schumacher@mattermost.com>
mattermost · Jun 25, 2020 · 97e077d · 97e077d
1 parent eee8114
commit 97e077d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/webapp/src/components/link_tooltip/link_tooltip.jsx b/webapp/src/components/link_tooltip/link_tooltip.jsx
@@ -5,9 +5,9 @@ import Octicon, {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@prim
 import ReactMarkdown from 'react-markdown';
 
 import Client from 'client';
-import {getLabelFontColor} from '../../utils/styles';
+import {getLabelFontColor, hexToRGB} from '../../utils/styles';
 
-export const LinkTooltip = ({href, connected}) => {
+export const LinkTooltip = ({href, connected, theme}) => {
     const [data, setData] = useState(null);
     useEffect(() => {
         const init = async () => {
@@ -84,14 +84,17 @@ export const LinkTooltip = ({href, connected}) => {
     if (data) {
         let date = new Date(data.created_at);
         date = date.toDateString();
-
         return (
             <div className='github-tooltip'>
-                <div className='github-tooltip box github-tooltip--large github-tooltip--bottom-left p-4'>
+                <div
+                    className='github-tooltip box github-tooltip--large github-tooltip--bottom-left p-4'
+                    style={{backgroundColor: theme.centerChannelBg, border: `1px solid ${hexToRGB(theme.centerChannelColor, '0.16')}`}}
+                >
                     <div className='header mb-1'>
                         <a
                             title={data.repo}
                             href={href}
+                            style={{color: theme.centerChannelColor}}
                         >{data.repo}</a>
                         {' on '}
                         <span>{date}</span>
@@ -104,7 +107,10 @@ export const LinkTooltip = ({href, connected}) => {
 
                         {/* info */}
                         <div className='tooltip-info mt-1'>
-                            <a href={href}>
+                            <a
+                                href={href}
+                                style={{color: theme.centerChannelColor}}
+                            >
                                 <h5 className='mr-1'>{data.title}</h5>
                                 <span>{'#' + data.number}</span>
                             </a>
@@ -169,4 +175,5 @@ export const LinkTooltip = ({href, connected}) => {
 LinkTooltip.propTypes = {
     href: PropTypes.string.isRequired,
     connected: PropTypes.bool.isRequired,
+    theme: PropTypes.object.isRequired,
 };
diff --git a/webapp/src/components/link_tooltip/tooltip.css b/webapp/src/components/link_tooltip/tooltip.css
@@ -18,6 +18,7 @@
     box-shadow: 0 1px 15px rgba(27,31,35,.15);
     position: relative;
     width: 360px;
+    border-radius: 4px;
 }
 
 .github-tooltip--bottom-left, .github-tooltip--top-left {
@@ -118,5 +119,5 @@
     white-space: nowrap;
     background-color: var(--light-blue);
     border-radius: 3px;
-    maxWidth: 140px;
+    max-width: 140px;
 }
diff --git a/webapp/src/utils/styles.js b/webapp/src/utils/styles.js
@@ -109,3 +109,13 @@ export const getLabelFontColor = (hexcolor) => {
     const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
     return (yiq >= 128) ? 'black' : 'white';
 };
+
+export const hexToRGB = (hex, alpha) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    if (alpha) {
+        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
+    }
+    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
+};