Fix minor UI issues with composer

signalapp · Jun 15, 2022 · 4b8cb9f · 4b8cb9f
1 parent 3b2000a
commit 4b8cb9f
Show file tree

Hide file tree

Showing 16 changed files with 172 additions and 114 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -6178,6 +6178,7 @@ button.module-image__border-overlay:focus {
 
 .module-sticker-button__button {
   border: 0;
+  border-radius: 4px;
   background: none;
   width: 32px;
   height: 32px;
@@ -6187,7 +6188,7 @@ button.module-image__border-overlay:focus {
 
   @include keyboard-mode {
     &:focus {
-      outline: 1px solid $color-ultramarine;
+      outline: 2px solid $color-ultramarine;
     }
   }
 
@@ -6682,6 +6683,7 @@ button.module-image__border-overlay:focus {
 
 .module-emoji-button__button {
   border: 0;
+  border-radius: 4px;
   background: none;
   width: 32px;
   height: 32px;
@@ -6691,7 +6693,7 @@ button.module-image__border-overlay:focus {
 
   @include keyboard-mode {
     &:focus {
-      outline: 1px solid $color-ultramarine;
+      outline: 2px solid $color-ultramarine;
     }
   }
 
@@ -6829,15 +6831,15 @@ button.module-image__border-overlay:focus {
   }
 
   &__input {
+    $border-size: 1px;
+
     border-radius: 18px;
     overflow: hidden;
     word-break: break-word;
 
     // Override Quill styles
     .ql-container {
       @include font-body-1;
-      line-height: 21px;
-      font-size: 15px;
     }
 
     .ql-blank::before {
@@ -6863,9 +6865,11 @@ button.module-image__border-overlay:focus {
     }
 
     &__scroller {
-      padding: 5px 11px 6px 11px;
-      min-height: 32px;
-      max-height: 80px;
+      $padding-top: 5px;
+      padding: $padding-top 10px $padding-top 10px;
+
+      min-height: calc(32px - 2 * $border-size);
+      max-height: calc(72px - 2 * $border-size);
       overflow: auto;
 
       &::-webkit-scrollbar-thumb {
@@ -6878,22 +6882,21 @@ button.module-image__border-overlay:focus {
       }
 
       &--large {
-        max-height: 227px;
-        min-height: 227px;
+        max-height: calc(212px - 2 * $border-size);
+        min-height: calc(212px - 2 * $border-size);
 
         .DraftEditor-root {
-          height: 227px - 2 * 7px; // subtract padding
+          height: calc(212px - 2 * $padding-top - 2 * $border-size);
         }
       }
     }
 
-    &:focus-within {
-      @include light-theme() {
-        outline: 1px solid $color-ultramarine;
-      }
+    border: $border-size solid transparent;
 
-      @include dark-theme() {
-        outline: 1px solid $color-ultramarine;
+    &:focus-within {
+      outline: 0;
+      @include keyboard-mode {
+        border: $border-size solid $color-ultramarine;
       }
     }
   }
@@ -6925,7 +6928,7 @@ button.module-image__border-overlay:focus {
       padding: 0 12px;
       display: flex;
       flex-direction: row;
-      align-items: center;
+      align-items: end;
       justify-content: flex-start;
       background: none;
       border: none;

diff --git a/stylesheets/components/AudioCapture.scss b/stylesheets/components/AudioCapture.scss
@@ -12,6 +12,7 @@
   &__microphone {
     height: 32px;
     width: 32px;
+    border-radius: 4px;
     text-align: center;
     background: none;
     display: flex;
@@ -23,7 +24,7 @@
 
     @include keyboard-mode {
       &:focus {
-        outline: 1px solid $color-ultramarine;
+        outline: 2px solid $color-ultramarine;
       }
     }
 

diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss
@@ -4,7 +4,7 @@
 .CompositionArea {
   position: relative;
   min-height: 42px;
-  padding-top: 6px;
+  padding: 10px 0 10px 0;
 
   &__placeholder {
     flex-grow: 1;
@@ -16,7 +16,7 @@
   &__row {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: end;
 
     &--center {
       justify-content: center;
@@ -25,7 +25,7 @@
       padding: 0 12px;
     }
     &--control-row {
-      margin-top: 8px;
+      margin-top: 12px;
     }
     &--column {
       flex-direction: column;
@@ -82,8 +82,8 @@
     position: absolute;
     left: calc(50% - $width / 2);
 
-    // 6px coming from padding-top, 1px from outline
-    top: calc(0px - $height / 2 - 6px - 1px);
+    // 6px coming from padding-top of .module-composition-input__input__scroller
+    top: calc(0px - $height / 2 - 6px);
     border-radius: 12px 12px 0 0;
     pointer-events: none;
 
@@ -194,6 +194,7 @@
   &__attach-file {
     width: 32px;
     height: 32px;
+    border-radius: 4px;
     padding: 0;
     border: none;
     background: transparent;
@@ -203,7 +204,7 @@
 
     @include keyboard-mode {
       &:focus {
-        outline: 1px solid $color-ultramarine;
+        outline: 2px solid $color-ultramarine;
       }
     }
 

diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
@@ -272,10 +272,7 @@
     }
 
     &--audio {
-      @include normal-button(
-        '../images/icons/v2/phone-right-outline-24.svg',
-        24px
-      );
+      @include normal-button('../images/icons/v2/phone-outline-24.svg', 24px);
     }
 
     &--search {

diff --git a/stylesheets/components/ConversationView.scss b/stylesheets/components/ConversationView.scss
@@ -35,22 +35,12 @@
   }
 
   &__composition-area {
-    margin-bottom: 6px;
-
     // We need to use the wrapper because the conversation view calculates the height of all
     //   things in the composition area. A margin on an inner div won't be included in that
     //   height calculation.
-    .quote-wrapper {
-      margin-left: 18px;
-      margin-right: 18px;
-      margin-top: 3px;
-    }
-
+    .quote-wrapper,
     .preview-wrapper {
-      margin-top: 3px;
-      margin-left: 12px;
-      margin-right: 12px;
-      margin-bottom: 2px;
+      margin: 0 16px 10px 16px;
     }
   }
 }
diff --git a/stylesheets/components/MediaQualitySelector.scss b/stylesheets/components/MediaQualitySelector.scss
@@ -16,18 +16,20 @@
   &__button {
     @include button-reset();
     align-items: center;
-    border-radius: 16px;
+    border-radius: 4px;
     display: flex;
     height: 32px;
     justify-content: center;
-    opacity: 0.5;
     width: 32px;
 
-    &:focus,
-    &:hover {
-      opacity: 1;
+    @include keyboard-mode {
+      &:focus {
+        outline: 2px solid $color-ultramarine;
+      }
     }
 
+    outline: none;
+
     &::after {
       content: '';
       display: block;

diff --git a/stylesheets/components/Quote.scss b/stylesheets/components/Quote.scss
@@ -3,11 +3,13 @@
 
 .module-quote {
   &__container {
-    margin: {
-      left: -6px;
-      right: -6px;
-      top: 3px;
-      bottom: 5px;
+    .module-message & {
+      margin: {
+        left: -6px;
+        right: -6px;
+        top: 3px;
+        bottom: 5px;
+      }
     }
   }
 
@@ -91,17 +93,30 @@
       border-left-color: $color-white;
     }
   }
+
+  .module-quote--compose-#{$color} {
+    background-color: scale-color($value, $lightness: 60%);
+    border-left-color: $value;
+
+    @include dark-theme {
+      background-color: scale-color($value, $lightness: -40%);
+      border-left-color: $color-white;
+    }
+  }
 }
 
+.module-quote--compose-custom,
 .module-quote--incoming-custom,
 .module-quote--outgoing-custom {
   background-attachment: fixed;
 }
 
 @each $color, $value in $conversation-colors-gradient {
+  .module-quote--compose-#{$color},
   .module-quote--incoming-#{$color} {
     border-left-color: map-get($value, 'start');
   }
+  .module-quote--compose-#{$color},
   .module-quote--incoming-#{$color},
   .module-quote--outgoing-#{$color} {
     background-attachment: fixed;

diff --git a/stylesheets/components/SearchInput.scss b/stylesheets/components/SearchInput.scss
@@ -77,7 +77,9 @@
     }
 
     &:focus {
-      border: solid 1px $color-ultramarine;
+      @include keyboard-mode {
+        border: solid 1px $color-ultramarine;
+      }
       outline: none;
     }
 

diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
@@ -618,6 +618,7 @@ export const CompositionArea = ({
         {quotedMessageProps && (
           <div className="quote-wrapper">
             <Quote
+              isCompose
               {...quotedMessageProps}
               i18n={i18n}
               onClick={onClickQuotedMessage}

diff --git a/ts/components/ContextMenu.tsx b/ts/components/ContextMenu.tsx
@@ -188,7 +188,6 @@ export function ContextMenu<T>({
     }
   };
 
-  // We use regular MouseEvent below, and this one uses React.MouseEvent
   const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
     setMenuShowing(true);
     ev.stopPropagation();

diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
@@ -40,6 +40,8 @@ type StateType = {
 };
 
 export class MainHeader extends React.Component<PropsType, StateType> {
+  public containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+
   constructor(props: PropsType) {
     super(props);
 
@@ -55,18 +57,14 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     if (
       showingAvatarPopup &&
       popperRoot &&
-      !popperRoot.contains(target as Node)
+      !popperRoot.contains(target as Node) &&
+      !this.containerRef.current?.contains(target as Node)
     ) {
       this.hideAvatarPopup();
     }
   };
 
-  public showAvatarPopup = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ): void => {
-    event.preventDefault();
-    event.stopPropagation();
-
+  public showAvatarPopup = (): void => {
     const popperRoot = document.createElement('div');
     document.body.appendChild(popperRoot);
 
@@ -142,7 +140,10 @@ export class MainHeader extends React.Component<PropsType, StateType> {
         <Manager>
           <Reference>
             {({ ref }) => (
-              <div className="module-main-header__avatar--container">
+              <div
+                className="module-main-header__avatar--container"
+                ref={this.containerRef}
+              >
                 <Avatar
                   acceptedMessageRequest
                   avatarPath={avatarPath}