Update username onboarding tooltip styles

stylesheets/components/ProfileEditor.scss

@@ -205,13 +205,50 @@
 
   &__username-link {
     &__tooltip {
-      padding: 12px;
+      padding: 0;
+      background-color: unset;
+
+      --container-padding: 12px;
 
       &__container {
         display: flex;
         flex-direction: row;
+        padding: var(--container-padding);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+        border: 1px solid $color-gray-20;
+        border-radius: inherit;
+        background-color: $color-gray-02;
+        transform-origin: 0 0; // needed for react-spring scale animation
+        @include dark-theme {
+          background-color: $color-gray-75;
+          border-color: $color-gray-60;
+        }
       }
 
+      --direction-multiplier: 1;
+      &:dir(rtl) {
+        --direction-multiplier: -1;
+      }
+
+      &__arrow {
+        position: absolute;
+
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateY(calc(-50% - var(--container-padding)))
+          translateX(
+            calc(
+              var(--direction-multiplier) * (20px - var(--container-padding))
+            )
+          )
+          rotate(45deg);
+
+        width: 14px;
+        height: 14px;
+        clip-path: polygon(0 100%, 0 0, 100% 0);
+
+        border: inherit;
+        background: inherit;
+      }
       &__icon {
         width: 20px;
         height: 20px;
@@ -241,6 +278,7 @@
         }
 
         p {
+          @include font-subtitle;
           max-width: 240px;
           margin: 0;
         }
@@ -256,6 +294,9 @@
         margin: 0;
 
         @include color-svg('../images/icons/v3/x/x.svg', $color-gray-45);
+        @include dark-theme {
+          @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
+        }
       }
     }
   }

ts/components/ProfileEditor.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useSpring, animated } from '@react-spring/web';
 
 import type { AvatarColorType } from '../types/Colors';
 import { AvatarColors } from '../types/Colors';
@@ -45,6 +46,7 @@ import {
 import { isWhitespace, trim } from '../util/whitespaceStringUtil';
 import { UserText } from './UserText';
 import { Tooltip, TooltipPlacement } from './Tooltip';
+import { offsetDistanceModifier } from '../util/popperUtil';
 
 export enum EditState {
   None = 'None',
@@ -625,34 +627,13 @@ export function ProfileEditor({
       );
 
       if (!hasCompletedUsernameLinkOnboarding) {
-        const tooltip = (
-          <div className="ProfileEditor__username-link__tooltip__container">
-            <div className="ProfileEditor__username-link__tooltip__icon" />
-
-            <div className="ProfileEditor__username-link__tooltip__content">
-              <h3>
-                {i18n('icu:ProfileEditor__username-link__tooltip__title')}
-              </h3>
-              <p>{i18n('icu:ProfileEditor__username-link__tooltip__body')}</p>
-            </div>
-
-            <button
-              type="button"
-              className="ProfileEditor__username-link__tooltip__close"
-              onClick={markCompletedUsernameLinkOnboarding}
-              aria-label={i18n('icu:close')}
-            />
-          </div>
-        );
         maybeUsernameLinkRow = (
-          <Tooltip
+          <UsernameLinkTooltip
-            className="ProfileEditor__username-link__tooltip"
+            handleClose={markCompletedUsernameLinkOnboarding}
-            direction={TooltipPlacement.Bottom}
+            i18n={i18n}
-            sticky
-            content={tooltip}
           >
             {maybeUsernameLinkRow}
-          </Tooltip>
+          </UsernameLinkTooltip>
         );
       }
     }
@@ -834,3 +815,55 @@ export function ProfileEditor({
     </>
   );
 }
+
+function UsernameLinkTooltip({
+  handleClose,
+  children,
+  i18n,
+}: {
+  handleClose: VoidFunction;
+  children: React.ReactNode;
+  i18n: LocalizerType;
+}) {
+  const animatedStyles = useSpring({
+    from: { opacity: 0, scale: 0.25 },
+    to: { opacity: 1, scale: 1 },
+    config: { mass: 1, tension: 280, friction: 25 },
+    delay: 200,
+  });
+  const tooltip = (
+    <animated.div
+      className="ProfileEditor__username-link__tooltip__container"
+      style={animatedStyles}
+    >
+      <div className="ProfileEditor__username-link__tooltip__icon" />
+
+      <div className="ProfileEditor__username-link__tooltip__content">
+        <h3>{i18n('icu:ProfileEditor__username-link__tooltip__title')}</h3>
+        <p>{i18n('icu:ProfileEditor__username-link__tooltip__body')}</p>
+      </div>
+
+      <button
+        type="button"
+        className="ProfileEditor__username-link__tooltip__close"
+        onClick={handleClose}
+        aria-label={i18n('icu:close')}
+      />
+      <div className="ProfileEditor__username-link__tooltip__arrow" />
+    </animated.div>
+  );
+
+  return (
+    <Tooltip
+      className="ProfileEditor__username-link__tooltip"
+      direction={TooltipPlacement.Bottom}
+      sticky
+      content={tooltip}
+      // By default tooltip has its distance modified, here we clear that
+      popperModifiers={[offsetDistanceModifier(0)]}
+      hideArrow
+    >
+      {children}
+    </Tooltip>
+  );
+}

ts/components/Tooltip.tsx

@@ -90,6 +90,7 @@ export type PropsType = {
   theme?: Theme;
   wrapperClassName?: string;
   delay?: number;
+  hideArrow?: boolean;
 };
 
 let GLOBAL_EXIT_TIMER: NodeJS.Timeout | undefined;
@@ -105,6 +106,7 @@ export function Tooltip({
   popperModifiers = [],
   wrapperClassName,
   delay,
+  hideArrow,
 }: PropsType): JSX.Element {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>();
   const [active, setActive] = React.useState(false);
@@ -184,11 +186,13 @@ export function Tooltip({
               data-placement={placement}
             >
               {content}
-              <div
+              {!hideArrow ? (
-                className="module-tooltip-arrow"
+                <div
-                ref={arrowProps.ref}
+                  className="module-tooltip-arrow"
-                style={arrowProps.style}
+                  ref={arrowProps.ref}
-              />
+                  style={arrowProps.style}
+                />
+              ) : null}
             </div>
           )
         }