From a9367f48f12ceb5fc1c8f9013b2846fc1a97377d Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Fri, 4 Dec 2020 17:03:01 -0600
Subject: [PATCH] Dark theme for calling device selection

---
 stylesheets/_modules.scss                |  8 +-------
 ts/components/CallingButton.tsx          |  5 +++--
 ts/components/CallingDeviceSelection.tsx |  8 +++++++-
 ts/components/CallingHeader.tsx          |  9 +++++----
 ts/components/ConfirmationModal.tsx      | 10 ++++++++--
 ts/components/IncomingCallBar.tsx        |  5 +++--
 ts/components/Tooltip.stories.tsx        |  5 +++--
 ts/components/Tooltip.tsx                | 20 ++++----------------
 ts/test-both/util/theme_test.ts          | 16 ++++++++++++++++
 ts/util/theme.ts                         | 20 ++++++++++++++++++++
 10 files changed, 70 insertions(+), 36 deletions(-)
 create mode 100644 ts/test-both/util/theme_test.ts
 create mode 100644 ts/util/theme.ts

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 2390cad84..65ae3f7b7 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -9714,13 +9714,7 @@ button.module-image__border-overlay:focus {
 .module-calling-device-selection__close-button {
   @include button-reset;
 
-  @include light-theme {
-    @include color-svg('../images/x-shadow-16.svg', $color-gray-75);
-  }
-
-  @include dark-theme {
-    @include color-svg('../images/x-shadow-16.svg', $color-white);
-  }
+  @include color-svg('../images/x-shadow-16.svg', $color-white);
 
   height: 16px;
   position: absolute;
diff --git a/ts/components/CallingButton.tsx b/ts/components/CallingButton.tsx
index ccdf89eee..80972b4b9 100644
--- a/ts/components/CallingButton.tsx
+++ b/ts/components/CallingButton.tsx
@@ -3,7 +3,8 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import { Tooltip, TooltipPlacement, TooltipTheme } from './Tooltip';
+import { Tooltip, TooltipPlacement } from './Tooltip';
+import { Theme } from '../util/theme';
 import { LocalizerType } from '../types/Util';
 
 export enum CallingButtonType {
@@ -63,7 +64,7 @@ export const CallingButton = ({
     <Tooltip
       content={tooltipContent}
       direction={tooltipDirection}
-      theme={TooltipTheme.Dark}
+      theme={Theme.Dark}
     >
       <button
         aria-label={tooltipContent}
diff --git a/ts/components/CallingDeviceSelection.tsx b/ts/components/CallingDeviceSelection.tsx
index 93ff09f3a..8ce3416a0 100644
--- a/ts/components/CallingDeviceSelection.tsx
+++ b/ts/components/CallingDeviceSelection.tsx
@@ -11,6 +11,7 @@ import {
   ChangeIODevicePayloadType,
   MediaDeviceSettings,
 } from '../types/Calling';
+import { Theme } from '../util/theme';
 
 export type Props = MediaDeviceSettings & {
   changeIODevice: (payload: ChangeIODevicePayloadType) => void;
@@ -134,7 +135,12 @@ export const CallingDeviceSelection = ({
     : undefined;
 
   return (
-    <ConfirmationModal actions={[]} i18n={i18n} onClose={toggleSettings}>
+    <ConfirmationModal
+      actions={[]}
+      i18n={i18n}
+      theme={Theme.Dark}
+      onClose={toggleSettings}
+    >
       <div className="module-calling-device-selection">
         <button
           type="button"
diff --git a/ts/components/CallingHeader.tsx b/ts/components/CallingHeader.tsx
index c25f5275f..2e37f9e37 100644
--- a/ts/components/CallingHeader.tsx
+++ b/ts/components/CallingHeader.tsx
@@ -4,7 +4,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { LocalizerType } from '../types/Util';
-import { Tooltip, TooltipTheme } from './Tooltip';
+import { Tooltip } from './Tooltip';
+import { Theme } from '../util/theme';
 
 export type PropsType = {
   canPip?: boolean;
@@ -43,7 +44,7 @@ export const CallingHeader = ({
         <div className="module-calling-tools__button">
           <Tooltip
             content={i18n('calling__participants', [String(participantCount)])}
-            theme={TooltipTheme.Dark}
+            theme={Theme.Dark}
           >
             <button
               aria-label={i18n('calling__participants', [
@@ -69,7 +70,7 @@ export const CallingHeader = ({
       <div className="module-calling-tools__button">
         <Tooltip
           content={i18n('callingDeviceSelection__settings')}
-          theme={TooltipTheme.Dark}
+          theme={Theme.Dark}
         >
           <button
             aria-label={i18n('callingDeviceSelection__settings')}
@@ -81,7 +82,7 @@ export const CallingHeader = ({
       </div>
       {canPip && (
         <div className="module-calling-tools__button">
-          <Tooltip content={i18n('calling__pip--on')} theme={TooltipTheme.Dark}>
+          <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
             <button
               aria-label={i18n('calling__pip--on')}
               className="module-calling-button__pip"
diff --git a/ts/components/ConfirmationModal.tsx b/ts/components/ConfirmationModal.tsx
index 172eccb21..814d0bc42 100644
--- a/ts/components/ConfirmationModal.tsx
+++ b/ts/components/ConfirmationModal.tsx
@@ -2,22 +2,25 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
+import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import {
   ConfirmationDialog,
   Props as ConfirmationDialogProps,
 } from './ConfirmationDialog';
 import { LocalizerType } from '../types/Util';
+import { Theme, themeClassName } from '../util/theme';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
   readonly onClose: () => unknown;
+  readonly theme?: Theme;
 };
 
 export type Props = OwnProps & ConfirmationDialogProps;
 
 export const ConfirmationModal = React.memo(
-  ({ i18n, onClose, children, ...rest }: Props) => {
+  ({ i18n, onClose, theme, children, ...rest }: Props) => {
     const [root, setRoot] = React.useState<HTMLElement | null>(null);
 
     React.useEffect(() => {
@@ -69,7 +72,10 @@ export const ConfirmationModal = React.memo(
       ? createPortal(
           <div
             role="presentation"
-            className="module-confirmation-dialog__overlay"
+            className={classNames(
+              'module-confirmation-dialog__overlay',
+              theme ? themeClassName(theme) : undefined
+            )}
             onClick={handleCancel}
             onKeyUp={handleKeyCancel}
           >
diff --git a/ts/components/IncomingCallBar.tsx b/ts/components/IncomingCallBar.tsx
index cb9172568..87c423fdf 100644
--- a/ts/components/IncomingCallBar.tsx
+++ b/ts/components/IncomingCallBar.tsx
@@ -3,7 +3,8 @@
 
 import React from 'react';
 import { Avatar } from './Avatar';
-import { Tooltip, TooltipTheme } from './Tooltip';
+import { Tooltip } from './Tooltip';
+import { Theme } from '../util/theme';
 import { ContactName } from './conversation/ContactName';
 import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
@@ -41,7 +42,7 @@ const CallButton = ({
   tooltipContent,
 }: CallButtonProps): JSX.Element => {
   return (
-    <Tooltip content={tooltipContent} theme={TooltipTheme.Dark}>
+    <Tooltip content={tooltipContent} theme={Theme.Dark}>
       <button
         className={`module-incoming-call__button module-incoming-call__button--${classSuffix}`}
         onClick={onClick}
diff --git a/ts/components/Tooltip.stories.tsx b/ts/components/Tooltip.stories.tsx
index d6d901337..4947bed9c 100644
--- a/ts/components/Tooltip.stories.tsx
+++ b/ts/components/Tooltip.stories.tsx
@@ -5,7 +5,8 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select } from '@storybook/addon-knobs';
 
-import { Tooltip, TooltipPlacement, TooltipTheme, PropsType } from './Tooltip';
+import { Tooltip, TooltipPlacement, PropsType } from './Tooltip';
+import { Theme } from '../util/theme';
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   content: overrideProps.content || 'Hello World',
@@ -84,7 +85,7 @@ story.add('Dark Theme', () => (
   <Tooltip
     {...createProps({
       sticky: true,
-      theme: TooltipTheme.Dark,
+      theme: Theme.Dark,
     })}
   >
     {Trigger}
diff --git a/ts/components/Tooltip.tsx b/ts/components/Tooltip.tsx
index 8367a6cd7..5668aeeb3 100644
--- a/ts/components/Tooltip.tsx
+++ b/ts/components/Tooltip.tsx
@@ -3,6 +3,7 @@
 
 import React from 'react';
 import { Manager, Reference, Popper } from 'react-popper';
+import { Theme, themeClassName } from '../util/theme';
 
 export enum TooltipPlacement {
   Top = 'top',
@@ -11,17 +12,11 @@ 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;
+  theme?: Theme;
 };
 
 export const Tooltip: React.FC<PropsType> = ({
@@ -29,19 +24,12 @@ export const Tooltip: React.FC<PropsType> = ({
   content,
   direction,
   sticky,
-  theme = TooltipTheme.System,
+  theme,
 }) => {
   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 = '';
-  }
+  const tooltipTheme = theme ? themeClassName(theme) : undefined;
 
   return (
     <Manager>
diff --git a/ts/test-both/util/theme_test.ts b/ts/test-both/util/theme_test.ts
new file mode 100644
index 000000000..c82018cfb
--- /dev/null
+++ b/ts/test-both/util/theme_test.ts
@@ -0,0 +1,16 @@
+// Copyright 2019-2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { assert } from 'chai';
+
+import { Theme, themeClassName } from '../../util/theme';
+
+describe('themeClassName', () => {
+  it('returns "light-theme" when passed a light theme', () => {
+    assert.strictEqual(themeClassName(Theme.Light), 'light-theme');
+  });
+
+  it('returns "dark-theme" when passed a dark theme', () => {
+    assert.strictEqual(themeClassName(Theme.Dark), 'dark-theme');
+  });
+});
diff --git a/ts/util/theme.ts b/ts/util/theme.ts
new file mode 100644
index 000000000..878886076
--- /dev/null
+++ b/ts/util/theme.ts
@@ -0,0 +1,20 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { missingCaseError } from './missingCaseError';
+
+export enum Theme {
+  Light,
+  Dark,
+}
+
+export function themeClassName(theme: Theme): string {
+  switch (theme) {
+    case Theme.Light:
+      return 'light-theme';
+    case Theme.Dark:
+      return 'dark-theme';
+    default:
+      throw missingCaseError(theme);
+  }
+}