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;
-
+      border-top-color: var(--tooltip-background-color);
-      @include light-theme {
-        border-top-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-top-color: $color-gray-65;
-      }
     }
   }
 
@@ -10493,13 +10462,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       left: -6px;
-
+      border-right-color: var(--tooltip-background-color);
-      @include light-theme {
-        border-right-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-right-color: $color-gray-65;
-      }
     }
   }
 
@@ -10512,13 +10475,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       top: -6px;
-
+      border-bottom-color: var(--tooltip-background-color);
-      @include light-theme {
-        border-bottom-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-bottom-color: $color-gray-65;
-      }
     }
   }
 
@@ -10531,13 +10488,7 @@ $contact-modal-padding: 18px;
 
     .module-tooltip-arrow::after {
       right: -12px;
-
+      border-left-color: var(--tooltip-background-color);
-      @include light-theme {
-        border-left-color: $color-gray-02;
-      }
-      @include dark-theme {
-        border-left-color: $color-gray-65;
-      }
     }
   }
 }

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,16 +17,14 @@ 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')}>
-      <Tooltip content={i18n('contactInAddressBook')}>
+      <span
-        <span
+        aria-label={i18n('contactInAddressBook')}
-          aria-label={i18n('contactInAddressBook')}
+        className={classNames('module-in-contacts-icon__icon', className)}
-          className={classNames('module-in-contacts-icon__icon', className)}
+        role="img"
-          role="img"
+        tabIndex={0}
-          tabIndex={0}
+      />
-        />
+    </Tooltip>
-      </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,20 +114,18 @@ export const Tooltip: React.FC<PropsType> = ({
       <Popper placement={direction}>
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
-            <div className={tooltipTheme}>
+            <div
+              className={classNames('module-tooltip', tooltipThemeClassName)}
+              ref={ref}
+              style={style}
+              data-placement={placement}
+            >
+              {content}
               <div
-                className="module-tooltip"
+                className="module-tooltip-arrow"
-                ref={ref}
+                ref={arrowProps.ref}
-                style={style}
+                style={arrowProps.style}
-                data-placement={placement}
+              />
-              >
-                {content}
-                <div
-                  className="module-tooltip-arrow"
-                  ref={arrowProps.ref}
-                  style={arrowProps.style}
-                />
-              </div>
             </div>
           )
         }

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."