Add conversation header button hover states

stylesheets/components/ConversationHeader.scss

@@ -168,32 +168,22 @@
     }
   }
 
-  &__calling-button--video,
+  &__button {
-  &__calling-button--audio,
+    $icon-size: 32px;
-  &__calling-button--join,
+
-  &__search-button,
+    @include button-reset;
-  &__more-button {
+    align-items: stretch;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    display: flex;
+    height: $icon-size;
     margin-right: var(--button-spacing);
-    transition: margin-right 200ms ease-out;
+    min-width: $icon-size;
-
-    @include keyboard-mode {
-      &:focus {
-        background: $ultramarine-ui-light;
-      }
-    }
-    @include dark-keyboard-mode {
-      &:focus {
-        background: $ultramarine-ui-dark;
-      }
-    }
-  }
-
-  &__calling-button {
-    $icon-size: 24px;
-
-    border: none;
     opacity: 0;
-    transition: opacity 250ms ease-out;
+    padding: 2px;
+    transition: margin-right 200ms ease-out, opacity 200ms ease-out,
+      background 100ms ease-out;
+    width: $icon-size;
 
     &:disabled {
       cursor: default;
@@ -203,43 +193,89 @@
       opacity: 1;
     }
 
+    @include light-theme {
+      &:hover,
+      &:focus {
+        background: $color-gray-02;
+      }
+      &:active {
+        background: $color-gray-05;
+      }
+    }
+    @include dark-theme {
+      &:hover,
+      &:focus {
+        background: $color-gray-80;
+      }
+      &:active {
+        background: $color-gray-75;
+      }
+    }
+
+    @include keyboard-mode {
+      &:focus {
+        border-color: $ultramarine-ui-light;
+      }
+    }
+    @include dark-keyboard-mode {
+      &:focus {
+        border-color: $ultramarine-ui-dark;
+      }
+    }
+
+    @mixin normal-button($light-icon, $dark-icon) {
+      &::before {
+        content: '';
+        display: block;
+        flex-grow: 1;
+        @include light-theme {
+          @include color-svg($light-icon, $color-gray-75);
+          &:hover,
+          &:active,
+          &:focus {
+            @include color-svg($light-icon, $color-gray-90);
+          }
+        }
+        @include dark-theme {
+          @include color-svg($dark-icon, $color-gray-15);
+          &:hover,
+          &:active,
+          &:focus {
+            @include color-svg($dark-icon, $color-gray-02);
+          }
+        }
+      }
+    }
+
     &--video {
-      @include light-theme {
+      @include normal-button(
-        @include color-svg(
+        '../images/icons/v2/video-outline-24.svg',
-          '../images/icons/v2/video-outline-24.svg',
+        '../images/icons/v2/video-solid-24.svg'
-          $color-gray-75
+      );
-        );
-      }
-      @include dark-theme {
-        @include color-svg(
-          '../images/icons/v2/video-solid-24.svg',
-          $color-gray-15
-        );
-      }
-      height: $icon-size;
-      width: $icon-size;
-      min-width: $icon-size;
     }
 
     &--audio {
-      @include light-theme {
+      @include normal-button(
-        @include color-svg(
+        '../images/icons/v2/phone-right-outline-24.svg',
-          '../images/icons/v2/phone-right-outline-24.svg',
+        '../images/icons/v2/phone-right-solid-24.svg'
-          $color-gray-75
+      );
-        );
-      }
-      @include dark-theme {
-        @include color-svg(
-          '../images/icons/v2/phone-right-solid-24.svg',
-          $color-gray-15
-        );
-      }
-      height: $icon-size;
-      width: $icon-size;
-      min-width: $icon-size;
     }
 
-    &--join {
+    &--search {
+      @include normal-button(
+        '../images/icons/v2/search-24.svg',
+        '../images/icons/v2/search-24.svg'
+      );
+    }
+
+    &--more {
+      @include normal-button(
+        '../images/icons/v2/chevron-down-24.svg',
+        '../images/icons/v2/chevron-down-24.svg'
+      );
+    }
+
+    &--join-call {
       @include font-body-1;
       align-items: center;
       background-color: $color-accent-green;
@@ -252,14 +288,11 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       user-select: none;
-
+      width: auto;
-      @include keyboard-mode {
-        &:focus {
-          box-shadow: 0px 0px 0px 4px $ultramarine-ui-light;
-        }
-      }
 
       &:before {
+        $icon-size: 24px;
+
         @include color-svg(
           '../images/icons/v2/video-solid-24.svg',
           $color-white
@@ -273,58 +306,4 @@
       }
     }
   }
-
-  &__search-button {
-    height: 24px;
-    width: 24px;
-    min-width: 24px;
-    border: none;
-    opacity: 0;
-    transition: opacity 250ms ease-out;
-
-    &:disabled {
-      cursor: default;
-    }
-
-    &--show {
-      opacity: 1;
-    }
-
-    @include light-theme {
-      @include color-svg('../images/icons/v2/search-24.svg', $color-gray-75);
-    }
-    @include dark-theme {
-      @include color-svg('../images/icons/v2/search-24.svg', $color-gray-15);
-    }
-  }
-
-  &__more-button {
-    height: 24px;
-    width: 24px;
-    min-width: 24px;
-    border: none;
-    opacity: 0;
-    transition: opacity 250ms ease-out;
-
-    &:disabled {
-      cursor: default;
-    }
-
-    &--show {
-      opacity: 1;
-    }
-
-    @include light-theme {
-      @include color-svg(
-        '../images/icons/v2/chevron-down-24.svg',
-        $color-gray-75
-      );
-    }
-    @include dark-theme {
-      @include color-svg(
-        '../images/icons/v2/chevron-down-24.svg',
-        $color-gray-15
-      );
-    }
-  }
 }

ts/components/conversation/ConversationHeader.tsx

@@ -249,10 +249,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
           type="button"
           onClick={this.showMenuBound}
           className={classNames(
-            'module-ConversationHeader__more-button',
+            'module-ConversationHeader__button',
-            showBackButton
+            'module-ConversationHeader__button--more',
-              ? null
+            showBackButton ? null : 'module-ConversationHeader__button--show'
-              : 'module-ConversationHeader__more-button--show'
           )}
           disabled={showBackButton}
           aria-label={i18n('moreInfo')}
@@ -269,10 +268,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
         type="button"
         onClick={onSearchInConversation}
         className={classNames(
-          'module-ConversationHeader__search-button',
+          'module-ConversationHeader__button',
-          showBackButton
+          'module-ConversationHeader__button--search',
-            ? null
+          showBackButton ? null : 'module-ConversationHeader__button--show'
-            : 'module-ConversationHeader__search-button--show'
         )}
         disabled={showBackButton}
         aria-label={i18n('search')}
@@ -295,11 +293,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
         type="button"
         onClick={onOutgoingVideoCallInConversation}
         className={classNames(
-          'module-ConversationHeader__calling-button',
+          'module-ConversationHeader__button',
-          'module-ConversationHeader__calling-button--video',
+          'module-ConversationHeader__button--video',
-          showBackButton
+          showBackButton ? null : 'module-ConversationHeader__button--show'
-            ? null
-            : 'module-ConversationHeader__calling-button--show'
         )}
         disabled={showBackButton}
         aria-label={i18n('makeOutgoingVideoCall')}
@@ -319,11 +315,11 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
               type="button"
               onClick={onOutgoingAudioCallInConversation}
               className={classNames(
-                'module-ConversationHeader__calling-button',
+                'module-ConversationHeader__button',
-                'module-ConversationHeader__calling-button--audio',
+                'module-ConversationHeader__button--audio',
                 showBackButton
                   ? null
-                  : 'module-ConversationHeader__calling-button--show'
+                  : 'module-ConversationHeader__button--show'
               )}
               disabled={showBackButton}
               aria-label={i18n('makeOutgoingCall')}
@@ -337,11 +333,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
             type="button"
             onClick={onOutgoingVideoCallInConversation}
             className={classNames(
-              'module-ConversationHeader__calling-button',
+              'module-ConversationHeader__button',
-              'module-ConversationHeader__calling-button--join',
+              'module-ConversationHeader__button--join-call',
-              showBackButton
+              showBackButton ? null : 'module-ConversationHeader__button--show'
-                ? null
-                : 'module-ConversationHeader__calling-button--show'
             )}
             disabled={showBackButton}
           >
@@ -576,8 +570,10 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       <Measure
         bounds
         onResize={({ bounds }) => {
-          const width = (bounds && bounds.width) || 0;
+          if (!bounds || !bounds.width) {
-          this.setState({ isNarrow: width < 500 });
+            return;
+          }
+          this.setState({ isNarrow: bounds.width < 500 });
         }}
       >
         {({ measureRef }) => (