Force theming on tooltips for calling

ts/components/CallingButton.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import { Tooltip, TooltipPlacement } from './Tooltip';
+import { Tooltip, TooltipPlacement, TooltipTheme } from './Tooltip';
 import { LocalizerType } from '../types/Util';
 
 export enum CallingButtonType {
@@ -60,7 +60,11 @@ export const CallingButton = ({
   );
 
   return (
-    <Tooltip content={tooltipContent} direction={tooltipDirection}>
+    <Tooltip
+      content={tooltipContent}
+      direction={tooltipDirection}
+      theme={TooltipTheme.Dark}
+    >
       <button
         aria-label={tooltipContent}
         type="button"

ts/components/CallingHeader.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { LocalizerType } from '../types/Util';
-import { Tooltip } from './Tooltip';
+import { Tooltip, TooltipTheme } from './Tooltip';
 
 export type PropsType = {
   canPip?: boolean;
@@ -37,6 +37,7 @@ export const CallingHeader = ({
             content={i18n('calling__participants', [
               String(remoteParticipants),
             ])}
+            theme={TooltipTheme.Dark}
           >
             <button
               aria-label={i18n('calling__participants', [
@@ -50,7 +51,10 @@ export const CallingHeader = ({
         </div>
       ) : null}
       <div className="module-calling-tools__button">
-        <Tooltip content={i18n('callingDeviceSelection__settings')}>
+        <Tooltip
+          content={i18n('callingDeviceSelection__settings')}
+          theme={TooltipTheme.Dark}
+        >
           <button
             aria-label={i18n('callingDeviceSelection__settings')}
             className="module-calling-button__settings"
@@ -61,7 +65,7 @@ export const CallingHeader = ({
       </div>
       {canPip && (
         <div className="module-calling-tools__button">
-          <Tooltip content={i18n('calling__pip--on')}>
+          <Tooltip content={i18n('calling__pip--on')} theme={TooltipTheme.Dark}>
             <button
               aria-label={i18n('calling__pip--on')}
               className="module-calling-button__pip"

ts/components/CallingPip.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { Tooltip } from './Tooltip';
+import { Tooltip, TooltipTheme } from './Tooltip';
 import { CallingPipRemoteVideo } from './CallingPipRemoteVideo';
 import { LocalizerType } from '../types/Util';
 import { VideoFrameSource } from '../types/Calling';
@@ -184,7 +184,7 @@ export const CallingPip = ({
           }}
           type="button"
         />
-        <Tooltip content={i18n('calling__pip--off')}>
+        <Tooltip content={i18n('calling__pip--off')} theme={TooltipTheme.Dark}>
           <button
             aria-label={i18n('calling__pip--off')}
             className="module-calling-pip__button--pip"

ts/components/IncomingCallBar.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { Avatar } from './Avatar';
-import { Tooltip } from './Tooltip';
+import { Tooltip, TooltipTheme } from './Tooltip';
 import { ContactName } from './conversation/ContactName';
 import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
@@ -41,7 +41,7 @@ const CallButton = ({
   tooltipContent,
 }: CallButtonProps): JSX.Element => {
   return (
-    <Tooltip content={tooltipContent}>
+    <Tooltip content={tooltipContent} theme={TooltipTheme.Dark}>
       <button
         className={`module-incoming-call__button module-incoming-call__button--${classSuffix}`}
         onClick={onClick}

ts/components/Tooltip.stories.tsx

@@ -5,12 +5,13 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select } from '@storybook/addon-knobs';
 
-import { Tooltip, TooltipPlacement, PropsType } from './Tooltip';
+import { Tooltip, TooltipPlacement, TooltipTheme, PropsType } from './Tooltip';
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   content: overrideProps.content || 'Hello World',
   direction: select('direction', TooltipPlacement, overrideProps.direction),
   sticky: overrideProps.sticky,
+  theme: overrideProps.theme,
 });
 
 const story = storiesOf('Components/Tooltip', module);
@@ -78,3 +79,14 @@ story.add('Sticky', () => (
     {Trigger}
   </Tooltip>
 ));
+
+story.add('Dark Theme', () => (
+  <Tooltip
+    {...createProps({
+      sticky: true,
+      theme: TooltipTheme.Dark,
+    })}
+  >
+    {Trigger}
+  </Tooltip>
+));

ts/components/Tooltip.tsx

@@ -11,10 +11,17 @@ export enum TooltipPlacement {
   Left = 'left',
 }
 
+export enum TooltipTheme {
+  System = 'system',
+  Light = 'light',
+  Dark = 'dark',
+}
+
 export type PropsType = {
   content: string | JSX.Element;
   direction?: TooltipPlacement;
   sticky?: boolean;
+  theme?: TooltipTheme;
 };
 
 export const Tooltip: React.FC<PropsType> = ({
@@ -22,10 +29,20 @@ export const Tooltip: React.FC<PropsType> = ({
   content,
   direction,
   sticky,
+  theme = TooltipTheme.System,
 }) => {
   const isSticky = Boolean(sticky);
   const [showTooltip, setShowTooltip] = React.useState(isSticky);
 
+  let tooltipTheme: string;
+  if (theme === TooltipTheme.Light) {
+    tooltipTheme = 'light-theme';
+  } else if (theme === TooltipTheme.Dark) {
+    tooltipTheme = 'dark-theme';
+  } else {
+    tooltipTheme = '';
+  }
+
   return (
     <Manager>
       <Reference>
@@ -60,18 +77,20 @@ export const Tooltip: React.FC<PropsType> = ({
       <Popper placement={direction}>
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
-            <div
+            <div className={tooltipTheme}>
-              className="module-tooltip"
-              ref={ref}
-              style={style}
-              data-placement={placement}
-            >
-              {content}
               <div
-                className="module-tooltip-arrow"
+                className="module-tooltip"
-                ref={arrowProps.ref}
+                ref={ref}
-                style={arrowProps.style}
+                style={style}
-              />
+                data-placement={placement}
+              >
+                {content}
+                <div
+                  className="module-tooltip-arrow"
+                  ref={arrowProps.ref}
+                  style={arrowProps.style}
+                />
+              </div>
             </div>
           )
         }