Fix layout of "this person is in your contacts" tooltip

stylesheets/_modules.scss

@@ -2792,38 +2792,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
 }
 
-span.module-in-contacts-icon__tooltip {
-  /* Written in this way to add more specificity and avoid !important */
-  .module-tooltip {
-    color: $color-white;
-    background-color: $ultramarine-ui-light;
-
-    &[data-placement='top'] {
-      .module-tooltip-arrow::after {
-        border-top-color: $ultramarine-ui-light;
-      }
-    }
-
-    &[data-placement='right'] {
-      .module-tooltip-arrow::after {
-        border-right-color: $ultramarine-ui-light;
-      }
-    }
-
-    &[data-placement='bottom'] {
-      .module-tooltip-arrow::after {
-        border-bottom-color: $ultramarine-ui-light;
-      }
-    }
-
-    &[data-placement='left'] {
-      .module-tooltip-arrow::after {
-        border-left-color: $ultramarine-ui-light;
-      }
-    }
-  }
-}
-
 // Module: Conversation Header
 
 .module-conversation-header {
@@ -10434,22 +10402,29 @@ $contact-modal-padding: 18px;
 }
 
 .module-tooltip {
+  --tooltip-text-color: #{$color-gray-75};
+  --tooltip-background-color: #{$color-gray-02};
+
+  @mixin tooltip-dark-theme-variables {
+    --tooltip-text-color: #{$color-gray-05};
+    --tooltip-background-color: #{$color-gray-65};
+  }
+  &--dark-theme {
+    @include tooltip-dark-theme-variables;
+  }
+  @include dark-theme {
+    @include tooltip-dark-theme-variables;
+  }
+
+  background-color: var(--tooltip-background-color);
   border-radius: 8px;
+  color: var(--tooltip-text-color);
   display: inline-block;
   padding: 8px 21px;
   position: fixed;
   text-align: center;
   z-index: 999;
 
-  @include light-theme {
-    background-color: $color-gray-02;
-    color: $color-gray-75;
-  }
-  @include dark-theme {
-    background-color: $color-gray-65;
-    color: $color-gray-05;
-  }
-
   .module-tooltip-arrow {
     position: absolute;
   }
@@ -10474,13 +10449,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       bottom: -12px;
-
-      @include light-theme {
-        border-top-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-top-color: $color-gray-65;
-      }
+      border-top-color: var(--tooltip-background-color);
     }
   }
 
@@ -10493,13 +10462,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       left: -6px;
-
-      @include light-theme {
-        border-right-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-right-color: $color-gray-65;
-      }
+      border-right-color: var(--tooltip-background-color);
     }
   }
 
@@ -10512,13 +10475,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       top: -6px;
-
-      @include light-theme {
-        border-bottom-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-bottom-color: $color-gray-65;
-      }
+      border-bottom-color: var(--tooltip-background-color);
     }
   }
 
@@ -10531,13 +10488,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       right: -12px;
-
-      @include light-theme {
-        border-left-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-left-color: $color-gray-65;
-      }
+      border-left-color: var(--tooltip-background-color);
     }
   }
 }

ts/components/InContactsIcon.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -17,7 +17,6 @@ export const InContactsIcon = (props: PropsType): JSX.Element => {
 
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   return (
-    <span className="module-in-contacts-icon__tooltip">
     <Tooltip content={i18n('contactInAddressBook')}>
       <span
         aria-label={i18n('contactInAddressBook')}
@@ -26,7 +25,6 @@ export const InContactsIcon = (props: PropsType): JSX.Element => {
         tabIndex={0}
       />
     </Tooltip>
-    </span>
   );
   /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
 };

ts/components/Tooltip.tsx

@@ -1,7 +1,8 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import classNames from 'classnames';
 import { noop } from 'lodash';
 import { Manager, Reference, Popper } from 'react-popper';
 import { Theme, themeClassName } from '../util/theme';
@@ -97,7 +98,9 @@ export const Tooltip: React.FC<PropsType> = ({
 
   const showTooltip = isHovering || Boolean(sticky);
 
-  const tooltipTheme = theme ? themeClassName(theme) : undefined;
+  const tooltipThemeClassName = theme
+    ? `module-tooltip--${themeClassName(theme)}`
+    : undefined;
 
   return (
     <Manager>
@@ -111,9 +114,8 @@ export const Tooltip: React.FC<PropsType> = ({
       <Popper placement={direction}>
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
-            <div className={tooltipTheme}>
             <div
-                className="module-tooltip"
+              className={classNames('module-tooltip', tooltipThemeClassName)}
               ref={ref}
               style={style}
               data-placement={placement}
@@ -125,7 +127,6 @@ export const Tooltip: React.FC<PropsType> = ({
                 style={arrowProps.style}
               />
             </div>
-            </div>
           )
         }
       </Popper>

ts/util/lint/exceptions.json

@@ -14694,7 +14694,7 @@
     "rule": "React-useRef",
     "path": "ts/components/Tooltip.js",
     "line": "    const wrapperRef = react_1.default.useRef(null);",
-    "lineNumber": 17,
+    "lineNumber": 18,
     "reasonCategory": "usageTrusted",
     "updated": "2020-12-04T00:11:08.128Z",
     "reasonDetail": "Used to add (and remove) event listeners."