Incremental improvements to header

Author: EvanHahn-Signal

stylesheets/_conversation.scss

@@ -36,9 +36,9 @@
     z-index: 1;
     position: absolute;
     left: 0;
-    top: 48px;
+    top: $header-height;
     width: 100%;
-    height: calc(100% - 48px);
+    height: calc(100% - $header-height);
 
     @include light-theme() {
       background-color: $color-white;

stylesheets/_modules.scss

@@ -2846,23 +2846,26 @@ span.module-in-contacts-icon__tooltip {
 }
 
 .module-conversation-header__back-icon {
+  $transition: 250ms ease-out;
+
   display: inline-block;
   margin-left: -10px;
-  margin-right: -2px;
+  margin-right: -10px;
   width: 24px;
   height: 24px;
   min-width: 24px;
   vertical-align: text-bottom;
   border: none;
   opacity: 0;
-  transition: opacity 250ms ease-out;
+  transition: margin-right $transition, opacity $transition;
 
   &:disabled {
     cursor: default;
   }
 
   &--show {
     opacity: 1;
+    margin-right: 6px;
   }
 
   @include light-theme {
@@ -2885,8 +2888,7 @@ span.module-in-contacts-icon__tooltip {
   min-width: 0;
   display: block;
 
-  text-align: center;
-  height: 48px;
+  height: $header-height;
 }
 
 .module-conversation-header__title-flex {
@@ -2895,7 +2897,7 @@ span.module-in-contacts-icon__tooltip {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  height: 48px;
+  height: $header-height;
   max-width: 100%;
 }
 
@@ -2906,7 +2908,8 @@ span.module-in-contacts-icon__tooltip {
 }
 
 .module-conversation-header__avatar {
-  min-width: 28px;
+  min-width: 32px;
+  margin-right: 4px;
 }
 
 .module-conversation-header__title {
@@ -6856,19 +6859,12 @@ button.module-image__border-overlay:focus {
 }
 
 .module-left-pane__archive-header {
-  height: 48px;
+  height: $header-height;
   width: 100%;
 
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-
-  @include light-theme {
-    border-bottom: 1px solid $color-gray-15;
-  }
-  @include dark-theme {
-    border-bottom: 1px solid $color-gray-75;
-  }
 }
 
 .module-left-pane__header-row {

stylesheets/_variables.scss

@@ -191,6 +191,6 @@ $color-deep-red: #ff261f;
 // -- A few layout variables used cross-file
 
 $left-pane-width: 320px;
-$header-height: 48px;
+$header-height: 52px;
 
 $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

ts/components/conversation/ConversationHeader.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-contextmenu';
 
 import { Emojify } from './Emojify';
-import { Avatar } from '../Avatar';
+import { Avatar, AvatarSize } from '../Avatar';
 import { InContactsIcon } from '../InContactsIcon';
 
 import { LocalizerType } from '../../types/Util';
@@ -194,7 +194,7 @@ export class ConversationHeader extends React.Component<PropsType> {
           name={name}
           phoneNumber={phoneNumber}
           profileName={profileName}
-          size={28}
+          size={AvatarSize.THIRTY_TWO}
         />
       </span>
     );
@@ -482,8 +482,8 @@ export class ConversationHeader extends React.Component<PropsType> {
           </div>
         </div>
         {this.renderExpirationLength()}
-        {this.renderSearchButton()}
         {this.renderOutgoingCallButtons()}
+        {this.renderSearchButton()}
         {this.renderMoreButton(triggerId)}
         {this.renderMenu(triggerId)}
       </div>