From 381e53297be5e8e2f19dbfb4daf704aa15dbf20b Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 18 Jul 2023 17:31:15 -0400
Subject: [PATCH] Fixes click events on the incoming call bar

---
 stylesheets/_modules.scss                   |  2 +-
 stylesheets/_variables.scss                 |  9 +++++----
 stylesheets/components/IncomingCallBar.scss | 12 +++++++++++-
 ts/components/IncomingCallBar.tsx           |  6 +++++-
 ts/components/Tooltip.tsx                   | 15 +++++++++++++--
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 1b2804338b51..509f5f10d44d 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3611,7 +3611,7 @@ button.module-image__border-overlay:focus {
     position: fixed;
     top: var(--titlebar-height);
     inset-inline-start: 0;
-    z-index: $z-index-on-top-of-everything;
+    z-index: $z-index-calling-container;
   }
 
   &__container {
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 85779d2da223..5c7d4d5f776f 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -274,8 +274,9 @@ $z-index-window-controls: 10000;
 $z-index-story-meta: 3;
 $z-index-scroll-down-button: 10;
 $z-index-stories: 98;
-$z-index-calling: 100;
-$z-index-modal-host: 101;
-$z-index-above-popup: 101;
-$z-index-calling-pip: 103;
+$z-index-calling-container: 100;
+$z-index-calling: 101;
+$z-index-modal-host: 102;
+$z-index-above-popup: 103;
+$z-index-calling-pip: 104;
 $z-index-above-context-menu: 126;
diff --git a/stylesheets/components/IncomingCallBar.scss b/stylesheets/components/IncomingCallBar.scss
index f27fffa697fd..c6f2ebc260c5 100644
--- a/stylesheets/components/IncomingCallBar.scss
+++ b/stylesheets/components/IncomingCallBar.scss
@@ -3,15 +3,18 @@
 
 .IncomingCallBar {
   &__container {
+    -webkit-app-region: no-drag;
     animation: IncomingCallBar--animation 0.2s forwards ease-out;
     position: fixed;
     top: 22px;
+    user-select: none;
     width: 100%;
     z-index: $z-index-popup;
     padding-inline: 1rem;
   }
 
   &__bar {
+    -webkit-app-region: no-drag;
     align-items: center;
     background-color: $color-gray-75;
     border-radius: 8px;
@@ -21,6 +24,7 @@
     margin-block: 0;
     margin-inline: auto;
     max-width: 600px;
+    user-select: none;
     width: 100%;
   }
 
@@ -75,10 +79,16 @@
     display: flex;
     height: 40px;
     justify-content: center;
-    margin-inline: 12px;
     outline: none;
     width: 40px;
 
+    &__container {
+      border-radius: 40px;
+      height: 40px;
+      margin-inline: 12px;
+      width: 40px;
+    }
+
     &--accept-video-as-audio {
       background-color: $color-gray-45;
 
diff --git a/ts/components/IncomingCallBar.tsx b/ts/components/IncomingCallBar.tsx
index a97fe7e14599..6e202f36ccba 100644
--- a/ts/components/IncomingCallBar.tsx
+++ b/ts/components/IncomingCallBar.tsx
@@ -68,7 +68,11 @@ function CallButton({
   tooltipContent,
 }: CallButtonProps): JSX.Element {
   return (
-    <Tooltip content={tooltipContent} theme={Theme.Dark}>
+    <Tooltip
+      content={tooltipContent}
+      theme={Theme.Dark}
+      wrapperClassName="IncomingCallBar__button__container"
+    >
       <button
         aria-label={tooltipContent}
         className={`IncomingCallBar__button IncomingCallBar__button--${classSuffix}`}
diff --git a/ts/components/Tooltip.tsx b/ts/components/Tooltip.tsx
index 55d9634b8f36..2a40e87f99a0 100644
--- a/ts/components/Tooltip.tsx
+++ b/ts/components/Tooltip.tsx
@@ -13,6 +13,7 @@ import { offsetDistanceModifier } from '../util/popperUtil';
 import { getInteractionMode } from '../services/InteractionMode';
 
 type EventWrapperPropsType = {
+  className?: string;
   children: React.ReactNode;
   onHoverChanged: (_: boolean) => void;
 };
@@ -24,7 +25,10 @@ type EventWrapperPropsType = {
 export const TooltipEventWrapper = React.forwardRef<
   HTMLSpanElement,
   EventWrapperPropsType
->(function TooltipEvent({ onHoverChanged, children }, ref): JSX.Element {
+>(function TooltipEvent(
+  { className, onHoverChanged, children },
+  ref
+): JSX.Element {
   const wrapperRef = React.useRef<HTMLSpanElement | null>(null);
 
   const on = React.useCallback(() => {
@@ -59,6 +63,7 @@ export const TooltipEventWrapper = React.forwardRef<
 
   return (
     <span
+      className={className}
       onFocus={onFocus}
       onBlur={off}
       ref={refMerger<HTMLSpanElement>(ref, wrapperRef)}
@@ -83,6 +88,7 @@ export type PropsType = {
   popperModifiers?: Array<StrictModifiers>;
   sticky?: boolean;
   theme?: Theme;
+  wrapperClassName?: string;
 };
 
 export function Tooltip({
@@ -93,6 +99,7 @@ export function Tooltip({
   sticky,
   theme,
   popperModifiers = [],
+  wrapperClassName,
 }: PropsType): JSX.Element {
   const [isHovering, setIsHovering] = React.useState(false);
 
@@ -106,7 +113,11 @@ export function Tooltip({
     <Manager>
       <Reference>
         {({ ref }) => (
-          <TooltipEventWrapper ref={ref} onHoverChanged={setIsHovering}>
+          <TooltipEventWrapper
+            className={wrapperClassName}
+            ref={ref}
+            onHoverChanged={setIsHovering}
+          >
             {children}
           </TooltipEventWrapper>
         )}