Support dark mode for tooltip

src/enhance/index.js

@@ -55,6 +55,10 @@ class Tooltip extends React.Component {
     const positionStyle = `
       top: ${y + targetHeight + window.scrollY + tooltipOffsetY}px;
       left: ${x - (width / 2) + (targetWidth / 2) + tooltipOffsetX}px;
+      ${this.props.dark ? `
+        background: #ffffff;
+        color: #10293c;
+      ` : ''}
     `;
 
     tooltipElement.setAttribute('style', positionStyle);
@@ -62,7 +66,7 @@ class Tooltip extends React.Component {
       tooltipElement.setAttribute(
         'style', `
           ${positionStyle}
-          opacity: .9;
+          opacity: ${this.props.dark ? 1 : 0.9};
         `
       );
     }, this.props.tooltipSpeed);
@@ -93,6 +97,7 @@ export const withTooltip = WrappedComponent => ({
     ...props
   }) => (
     <Tooltip
+      dark={props.dark}
       message={tooltip}
       tooltipOffsetX={tooltipOffsetX}
       tooltipOffsetY={tooltipOffsetY}

src/pages/NotificationsRedesign/redesign/Scene.js

@@ -60,10 +60,10 @@ import {
   LoadingNotificationRow,
   NotificationBlock,
   ErrorContainer,
-  NotificationCell as BaseNotificationCell,
+  NotificationCell,
   NotificationTitle,
   NotificationByline,
-  IconLink as BaseIconLink,
+  IconLink,
   Divider,
   Connector,
   RepoBarContainer,
@@ -78,9 +78,6 @@ import {
 } from './ui';
 export const AnimatedNotificationRow = animated(NotificationRow);
 
-const IconLink = withTooltip(BaseIconLink);
-const NotificationCell = withTooltip(BaseNotificationCell);
-
 const hash = process.localEnv.GIT_HASH ? `#${process.localEnv.GIT_HASH}` : '';
 const version = require('../../../../package.json').version + hash;
 
@@ -693,6 +690,7 @@ export default function Scene ({
                   primary={ThemeColor(darkMode)}
                   onChange={setView}
                   mark={hasUnread}
+                  dark={darkMode}
                   tooltip="View your active unread notifications"
                   tooltipOffsetY={-72}
                 >
@@ -722,6 +720,7 @@ export default function Scene ({
                   selected={view === View.READ}
                   primary={ThemeColor(darkMode)}
                   onChange={setView}
+                  dark={darkMode}
                   tooltip="View notifications you have already read"
                   tooltipOffsetY={-72}
                 >
@@ -751,6 +750,7 @@ export default function Scene ({
                   selected={view === View.ARCHIVED}
                   primary={ThemeColor(darkMode)}
                   onChange={setView}
+                  dark={darkMode}
                   tooltip="View notifications that are considered completed"
                   tooltipOffsetY={-72}
                 >

src/pages/NotificationsRedesign/redesign/ui/ui.js

@@ -7,6 +7,7 @@ import {css, jsx, keyframes} from '@emotion/core';
 import {isMobile} from 'react-device-detect';
 import {navigate} from "@reach/router"
 import {routes} from '../../../../constants';
+import {withTooltip} from '../../../../enhance';
 import {withOnEnter, withOptimizedTouchEvents} from '../../../../enhance';
 
 export const ThemeContext = React.createContext(false);
@@ -18,6 +19,7 @@ export const withTheme = C => p => (
 
 const enhance = compose(
   withTheme,
+  withTooltip,
   withOptimizedTouchEvents
 );
 

src/styles/index.css

@@ -91,7 +91,7 @@ a {
   z-index: 999999;
   pointer-events: none;
   position: absolute;
-  background: #242a31;
+  background: #10293c;
   color: #fff;
   padding: 4px 8px;
   font-weight: 600;