Incoming call bar design updates

stylesheets/_modules.scss

@@ -5237,153 +5237,6 @@ button.module-image__border-overlay:focus {
   }
 }
 
-.module-incoming-call {
-  align-items: center;
-  background-color: $color-gray-75;
-  display: flex;
-  justify-content: space-between;
-  padding-top: var(--title-bar-drag-area-height);
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-}
-
-.module-incoming-call__contact {
-  align-items: center;
-  display: flex;
-  min-width: 0;
-
-  &--avatar {
-    margin-bottom: 8px;
-    margin-left: 16px;
-    margin-top: 8px;
-    position: relative;
-  }
-
-  &--name {
-    align-items: stretch;
-    display: flex;
-    flex-direction: column;
-    margin-left: 12px;
-    min-width: 0;
-  }
-
-  &--name-header {
-    @include font-body-1-bold;
-    color: #ffffff;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &--message-text {
-    @include font-body-2;
-    color: #ffffff;
-  }
-}
-
-.module-incoming-call__actions {
-  display: flex;
-  margin-right: 16px;
-}
-
-.module-incoming-call__button {
-  &--accept-video-as-audio {
-    background-color: $color-gray-45;
-
-    @include keyboard-mode {
-      &:focus {
-        box-shadow: 0px 0px 0px 4px $color-ultramarine;
-      }
-    }
-
-    @include mouse-mode {
-      &:hover {
-        box-shadow: 0px 0px 0px 2px $color-ultramarine;
-      }
-    }
-
-    div {
-      @include color-svg(
-        '../images/icons/v2/video-off-solid-24.svg',
-        $color-white
-      );
-      height: 24px;
-      width: 24px;
-    }
-  }
-
-  &--accept-video {
-    background-color: $color-accent-green;
-
-    @include keyboard-mode {
-      &:focus {
-        box-shadow: 0px 0px 0px 4px $color-ultramarine;
-      }
-    }
-
-    @include mouse-mode {
-      &:hover {
-        box-shadow: 0px 0px 0px 2px $color-ultramarine;
-      }
-    }
-
-    div {
-      @include color-svg('../images/icons/v2/video-solid-24.svg', $color-white);
-      height: 24px;
-      width: 24px;
-    }
-  }
-
-  &--accept-audio {
-    background-color: $color-accent-green;
-
-    @include keyboard-mode {
-      &:focus {
-        box-shadow: 0px 0px 0px 4px $color-ultramarine;
-      }
-    }
-
-    @include mouse-mode {
-      &:hover {
-        box-shadow: 0px 0px 0px 2px $color-ultramarine;
-      }
-    }
-
-    div {
-      @include color-svg(
-        '../images/icons/v2/phone-right-solid-24.svg',
-        $color-white
-      );
-      height: 24px;
-      width: 24px;
-    }
-  }
-
-  &--decline {
-    background-color: $color-accent-red;
-
-    @include keyboard-mode {
-      &:focus {
-        box-shadow: 0px 0px 0px 4px $color-ultramarine;
-      }
-    }
-
-    @include mouse-mode {
-      &:hover {
-        box-shadow: 0px 0px 0px 2px $color-ultramarine;
-      }
-    }
-
-    div {
-      @include color-svg('../images/icons/v2/phone-down-24.svg', $color-white);
-      height: 24px;
-      width: 24px;
-    }
-  }
-}
-
-.module-incoming-call__button,
 .module-calling-button__icon {
   align-items: center;
   border-radius: 40px;

stylesheets/components/IncomingCallBar.scss

@@ -0,0 +1,196 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.IncomingCallBar {
+  &__container {
+    animation: IncomingCallBar--animation 0.2s forwards ease-out;
+    position: fixed;
+    width: 100%;
+    z-index: 2;
+    padding: {
+      left: 1rem;
+      right: 1rem;
+    }
+  }
+
+  &__bar {
+    align-items: center;
+    background-color: $color-gray-75;
+    border-radius: 8px;
+    display: flex;
+    height: 70px;
+    justify-content: space-between;
+    margin: 0 auto;
+    max-width: 600px;
+    width: 100%;
+  }
+
+  &__contact {
+    align-items: center;
+    display: flex;
+    min-width: 0;
+
+    &--avatar {
+      margin-bottom: 8px;
+      margin-left: 16px;
+      margin-top: 8px;
+      position: relative;
+    }
+
+    &--name {
+      align-items: stretch;
+      display: flex;
+      flex-direction: column;
+      margin-left: 12px;
+      min-width: 0;
+    }
+
+    &--name-header {
+      @include font-body-1-bold;
+      color: #ffffff;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &--message-text {
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      @include font-body-2;
+      color: #ffffff;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    margin-right: 16px;
+  }
+
+  &__button {
+    align-items: center;
+    border-radius: 40px;
+    border: none;
+    display: flex;
+    height: 40px;
+    justify-content: center;
+    margin-left: 12px;
+    margin-right: 12px;
+    outline: none;
+    width: 40px;
+
+    &--accept-video-as-audio {
+      background-color: $color-gray-45;
+
+      @include keyboard-mode {
+        &:focus {
+          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+        }
+      }
+
+      @include mouse-mode {
+        &:hover {
+          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+        }
+      }
+
+      div {
+        @include color-svg(
+          '../images/icons/v2/video-off-solid-24.svg',
+          $color-white
+        );
+        height: 24px;
+        width: 24px;
+      }
+    }
+
+    &--accept-video {
+      background-color: $color-accent-green;
+
+      @include keyboard-mode {
+        &:focus {
+          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+        }
+      }
+
+      @include mouse-mode {
+        &:hover {
+          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+        }
+      }
+
+      div {
+        @include color-svg(
+          '../images/icons/v2/video-solid-24.svg',
+          $color-white
+        );
+        height: 24px;
+        width: 24px;
+      }
+    }
+
+    &--accept-audio {
+      background-color: $color-accent-green;
+
+      @include keyboard-mode {
+        &:focus {
+          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+        }
+      }
+
+      @include mouse-mode {
+        &:hover {
+          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+        }
+      }
+
+      div {
+        @include color-svg(
+          '../images/icons/v2/phone-right-solid-24.svg',
+          $color-white
+        );
+        height: 24px;
+        width: 24px;
+      }
+    }
+
+    &--decline {
+      background-color: $color-accent-red;
+
+      @include keyboard-mode {
+        &:focus {
+          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+        }
+      }
+
+      @include mouse-mode {
+        &:hover {
+          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+        }
+      }
+
+      div {
+        @include color-svg(
+          '../images/icons/v2/phone-down-24.svg',
+          $color-white
+        );
+        height: 24px;
+        width: 24px;
+      }
+    }
+  }
+}
+
+@keyframes IncomingCallBar--animation {
+  from {
+    top: -100px;
+    opacity: 0;
+  }
+
+  to {
+    top: 22px;
+    opacity: 1;
+  }
+}

stylesheets/manifest.scss

@@ -52,6 +52,7 @@
 @import './components/GroupDescription.scss';
 @import './components/GroupDialog.scss';
 @import './components/GroupInput.scss';
+@import './components/IncomingCallBar.scss';
 @import './components/Input.scss';
 @import './components/MediaQualitySelector.scss';
 @import './components/MessageAudio.scss';

ts/components/IncomingCallBar.stories.tsx

@@ -35,22 +35,6 @@ const defaultProps = {
   i18n,
 };
 
-const permutations = [
-  {
-    title: 'Incoming Call Bar (video)',
-    props: {},
-  },
-  {
-    title: 'Incoming Call Bar (audio)',
-    props: {
-      call: {
-        ...defaultProps.call,
-        isVideoCall: false,
-      },
-    },
-  },
-];
-
 storiesOf('Components/IncomingCallBar', module)
   .add('Knobs Playground', () => {
     const color = select('color', AvatarColors, 'ultramarine');
@@ -75,11 +59,10 @@ storiesOf('Components/IncomingCallBar', module)
       />
     );
   })
-  .add('Iterations', () => {
+  .add('Incoming Call Bar (video)', () => <IncomingCallBar {...defaultProps} />)
-    return permutations.map(({ props, title }) => (
+  .add('Incoming Call Bar (audio)', () => (
-      <>
+    <IncomingCallBar
-        <h3>{title}</h3>
+      {...defaultProps}
-        <IncomingCallBar {...defaultProps} {...props} />
+      call={{ ...defaultProps.call, isVideoCall: false }}
-      </>
+    />
-    ));
+  ));
-  });

ts/components/IncomingCallBar.tsx

@@ -49,7 +49,7 @@ const CallButton = ({
     <Tooltip content={tooltipContent} theme={Theme.Dark}>
       <button
         aria-label={tooltipContent}
-        className={`module-incoming-call__button module-incoming-call__button--${classSuffix}`}
+        className={`IncomingCallBar__button IncomingCallBar__button--${classSuffix}`}
         onClick={onClick}
         tabIndex={tabIndex}
         type="button"
@@ -82,91 +82,90 @@ export const IncomingCallBar = ({
   } = conversation;
 
   return (
-    <div className="module-incoming-call">
+    <div className="IncomingCallBar__container">
-      <div className="module-incoming-call__contact">
+      <div className="IncomingCallBar__bar">
-        <div className="module-incoming-call__contact--avatar">
+        <div className="IncomingCallBar__contact">
-          <Avatar
+          <div className="IncomingCallBar__contact--avatar">
-            acceptedMessageRequest={acceptedMessageRequest}
+            <Avatar
-            avatarPath={avatarPath}
+              acceptedMessageRequest={acceptedMessageRequest}
-            color={color || 'ultramarine'}
+              avatarPath={avatarPath}
-            noteToSelf={false}
+              color={color || 'ultramarine'}
-            conversationType="direct"
+              noteToSelf={false}
-            i18n={i18n}
+              conversationType="direct"
-            isMe={isMe}
+              i18n={i18n}
-            name={name}
+              isMe={isMe}
-            phoneNumber={phoneNumber}
-            profileName={profileName}
-            title={title}
-            sharedGroupNames={sharedGroupNames}
-            size={52}
-          />
-        </div>
-        <div className="module-incoming-call__contact--name">
-          <div className="module-incoming-call__contact--name-header">
-            <ContactName
               name={name}
               phoneNumber={phoneNumber}
               profileName={profileName}
               title={title}
-              i18n={i18n}
+              sharedGroupNames={sharedGroupNames}
+              size={52}
             />
           </div>
-          <div
+          <div className="IncomingCallBar__contact--name">
-            dir="auto"
+            <div className="IncomingCallBar__contact--name-header">
-            className="module-incoming-call__contact--message-text"
+              <ContactName
-          >
+                name={name}
-            {i18n(isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall')}
+                phoneNumber={phoneNumber}
+                profileName={profileName}
+                title={title}
+                i18n={i18n}
+              />
+            </div>
+            <div dir="auto" className="IncomingCallBar__contact--message-text">
+              {i18n(isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall')}
+            </div>
           </div>
         </div>
-      </div>
+        <div className="IncomingCallBar__actions">
-      <div className="module-incoming-call__actions">
+          {isVideoCall ? (
-        {isVideoCall ? (
+            <>
-          <>
+              <CallButton
-            <CallButton
+                classSuffix="decline"
-              classSuffix="decline"
+                onClick={() => {
-              onClick={() => {
+                  declineCall({ conversationId });
-                declineCall({ conversationId });
+                }}
-              }}
+                tabIndex={0}
-              tabIndex={0}
+                tooltipContent={i18n('declineCall')}
-              tooltipContent={i18n('declineCall')}
+              />
-            />
+              <CallButton
-            <CallButton
+                classSuffix="accept-video-as-audio"
-              classSuffix="accept-video-as-audio"
+                onClick={() => {
-              onClick={() => {
+                  acceptCall({ conversationId, asVideoCall: false });
-                acceptCall({ conversationId, asVideoCall: false });
+                }}
-              }}
+                tabIndex={0}
-              tabIndex={0}
+                tooltipContent={i18n('acceptCallWithoutVideo')}
-              tooltipContent={i18n('acceptCallWithoutVideo')}
+              />
-            />
+              <CallButton
-            <CallButton
+                classSuffix="accept-video"
-              classSuffix="accept-video"
+                onClick={() => {
-              onClick={() => {
+                  acceptCall({ conversationId, asVideoCall: true });
-                acceptCall({ conversationId, asVideoCall: true });
+                }}
-              }}
+                tabIndex={0}
-              tabIndex={0}
+                tooltipContent={i18n('acceptCall')}
-              tooltipContent={i18n('acceptCall')}
+              />
-            />
+            </>
-          </>
+          ) : (
-        ) : (
+            <>
-          <>
+              <CallButton
-            <CallButton
+                classSuffix="decline"
-              classSuffix="decline"
+                onClick={() => {
-              onClick={() => {
+                  declineCall({ conversationId });
-                declineCall({ conversationId });
+                }}
-              }}
+                tabIndex={0}
-              tabIndex={0}
+                tooltipContent={i18n('declineCall')}
-              tooltipContent={i18n('declineCall')}
+              />
-            />
+              <CallButton
-            <CallButton
+                classSuffix="accept-audio"
-              classSuffix="accept-audio"
+                onClick={() => {
-              onClick={() => {
+                  acceptCall({ conversationId, asVideoCall: false });
-                acceptCall({ conversationId, asVideoCall: false });
+                }}
-              }}
+                tabIndex={0}
-              tabIndex={0}
+                tooltipContent={i18n('acceptCall')}
-              tooltipContent={i18n('acceptCall')}
+              />
-            />
+            </>
-          </>
+          )}
-        )}
+        </div>
       </div>
     </div>
   );