Merge pull request #776 from Bilb/fix-redesign-comments

Fix some redesign comments

stylesheets/_session.scss

@@ -30,7 +30,10 @@
   font-family: 'SF Pro Text';
   src: url('../fonts/SFProText-Regular.ttf') format('truetype');
 }
-
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('../fonts/SFProDisplay-Regular.otf') format('opentype');
+}
 @keyframes fadein {
   from {
     opacity: 0;
@@ -109,6 +112,8 @@ $session-font-h4: 16px;
 
 $session-search-input-height: 34px;
 $main-view-header-height: 85px;
+$session-left-pane-width: 300px;
+$session-left-pane-sections-container-width: 80px;
 
 div.spacer-sm {
   height: $session-margin-sm;
@@ -176,7 +181,7 @@ $session-modal-size-lg: 650px;
 $session-conversation-header-height: 60px;
 
 @mixin fontWasaBold {
-  font-weight: 700;
+  font-weight: bold;
   font-family: $session-font-family;
 }
 
@@ -480,6 +485,7 @@ $session-element-border-green: 4px solid $session-color-green;
   font-family: Wasa;
   width: 100%;
   display: flex;
+  font-size: $session-font-md;
 
   &-text {
     @include session-color-subtle($session-color-white);
@@ -1369,6 +1375,7 @@ label {
 .session-id-editable textarea {
   resize: none;
   overflow: hidden;
+  user-select: all;
 }
 
 input {

stylesheets/_session_left_pane.scss

@@ -112,14 +112,15 @@ $session-compose-margin: 20px;
   &__user__profile {
     &-number,
     &-name {
+      @include fontWasaBold();
+      font-size: 15px;
+
       @at-root .light-theme #{&} {
         color: $session-color-white;
       }
       @at-root .dark-theme #{&} {
         color: $session-shade-17;
       }
-
-      font-size: 15px;
     }
   }
 }
@@ -135,7 +136,7 @@ $session-compose-margin: 20px;
 
 .module-left-pane {
   border-right: none !important;
-  width: 300px;
+  width: $session-left-pane-width;
   position: relative;
   height: -webkit-fill-available;
 
@@ -152,7 +153,7 @@ $session-compose-margin: 20px;
 
   &__sections-container {
     height: -webkit-fill-available;
-    width: 80px;
+    width: $session-left-pane-sections-container-width;
     display: inline-flex;
     flex-direction: column;
 
@@ -189,6 +190,7 @@ $session-compose-margin: 20px;
 
     .session-button {
       margin-left: auto;
+      @include fontWasaBold();
     }
 
     &-buttons {
@@ -245,37 +247,34 @@ $session-compose-margin: 20px;
 
     h3 {
       padding-top: 22px;
+      position: relative;
+
+      .green-border {
+        position: absolute;
+        color: $session-color-green;
+        background-color: $session-color-green;
+        height: 5px;
+        left: -10px;
+        right: -10px;
+        margin-top: 7px;
+        border: none;
+        z-index: 1;
+      }
     }
 
     h4 {
       text-transform: uppercase;
     }
 
-    &-border-container {
-      width: -webkit-fill-available;
+    .white-border {
+      width: $session-left-pane-width;
       position: relative;
+      height: 1px;
+      opacity: 0.3;
+      margin-top: -10px;
       margin-bottom: 50px;
-      .green {
-        position: absolute;
-        color: $session-color-green;
-        background-color: $session-color-green;
-        height: 6px;
-        width: 130px;
-        left: 50%;
-        margin-left: -65px;
-        top: 50%;
-        margin-top: 6px;
-        border: none;
-      }
-
-      .white {
-        position: absolute;
-        color: none;
-        height: 1px;
-        width: -webkit-fill-available;
-        opacity: 0.3;
-      }
     }
+
     .exit {
       margin-top: 10px;
       margin-left: 13px;
@@ -292,23 +291,27 @@ $session-compose-margin: 20px;
     }
 
     .session-description-long {
-      font-size: 14px;
+      font-size: 13px;
       margin: 0px 20px;
+      font-family: 'SF Pro Display';
     }
 
-    .session-id-editable textarea::-webkit-inner-spin-button {
-      margin: 0px 20px;
-      width: -webkit-fill-available;
-      flex-shrink: 0;
-      user-select: all;
-      overflow: hidden;
-      resize: none;
+    .session-id-editable {
+      textarea::-webkit-inner-spin-button {
+        margin: 0px 20px;
+        width: -webkit-fill-available;
+        flex-shrink: 0;
+      }
+    }
+
+    .session-id-editable-disabled {
+      border: none;
     }
 
     .session-button {
       width: fit-content;
-      margin-top: auto;
-      margin-bottom: 16px;
+      margin-top: 1rem;
+      margin-bottom: 3rem;
       flex-shrink: 0;
     }
   }
@@ -362,7 +365,8 @@ $session-compose-margin: 20px;
     height: inherit;
     border: none;
     flex-grow: 1;
-    font-size: $session-font-md;
+    font-size: $session-font-sm;
+    font-family: 'SF Pro Text';
 
     &:focus {
       outline: none !important;
@@ -622,5 +626,7 @@ $session-compose-margin: 20px;
     background-color: $session-background;
     color: $session-color-light-grey;
     border: 1px solid $session-color-dark-grey;
+    font-family: "SF Pro Text";
+    font-size: $session-font-sm;
   }
 }

stylesheets/_session_signin.scss

@@ -245,7 +245,7 @@
       overflow-wrap: break-word;
       padding: 20px 5px 20px 5px;
       display: inline-block;
-      font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+      font-family: 'SpaceMono';
       user-select: all;
     }
   }

stylesheets/_session_theme.scss

@@ -103,7 +103,7 @@
 }
 
 @mixin session-h-title {
-  font-weight: bold;
+  @include fontWasaBold();
 }
 
 h1 {

ts/components/Avatar.tsx

@@ -207,15 +207,17 @@ export class Avatar extends React.PureComponent<Props, State> {
       : this.renderIdenticon();
   }
 
-  private getBorderStyle(color?: string, width?: number) {
-    const borderWidth = typeof width === 'number' ? width : 3;
+  private getBorderStyle(_color?: string, _width?: number) {
+    //const borderWidth = typeof width === 'number' ? width : 3;
 
-    return color
+    // no border at all for now
+    return undefined;
+    /* return color
       ? {
           borderColor: color,
           borderStyle: 'solid',
           borderWidth: borderWidth,
         }
-      : undefined;
+      : undefined; */
   }
 }

ts/components/ContactListItem.tsx

@@ -38,7 +38,7 @@ export class ContactListItem extends React.Component<Props> {
         name={name}
         phoneNumber={phoneNumber}
         profileName={profileName}
-        size={48}
+        size={36}
       />
     );
   }

ts/components/ConversationListItem.tsx

@@ -85,7 +85,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
     if (!(isPendingFriendRequest && !hasSentFriendRequest)) {
       borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
     }
-    const iconSize = isPendingFriendRequest && !hasSentFriendRequest ? 28 : 48;
+    const iconSize = isPendingFriendRequest && !hasSentFriendRequest ? 28 : 36;
 
     return (
       <div className="module-conversation-list-item__avatar-container">

ts/components/MessageSearchResult.tsx

@@ -113,7 +113,7 @@ export class MessageSearchResult extends React.PureComponent<Props> {
         noteToSelf={isNoteToSelf}
         phoneNumber={from.phoneNumber}
         profileName={from.profileName}
-        size={48}
+        size={36}
       />
     );
   }

ts/components/conversation/ConversationHeader.tsx

@@ -286,7 +286,7 @@ export class ConversationHeader extends React.Component<Props> {
       >
         <SessionIconButton
           iconType={SessionIconType.Ellipses}
-          iconSize={SessionIconSize.Large}
+          iconSize={SessionIconSize.Medium}
           onClick={this.showMenuBound}
         />
       </ContextMenuTrigger>

ts/components/conversation/EmbeddedContact.tsx

@@ -47,7 +47,7 @@ export class EmbeddedContact extends React.Component<Props> {
         role="button"
         onClick={onClick}
       >
-        {renderAvatar({ contact, i18n, size: 48, direction })}
+        {renderAvatar({ contact, i18n, size: 36, direction })}
         <div className="module-embedded-contact__text-container">
           {renderName({ contact, isIncoming, module })}
           {renderContactShorthand({ contact, isIncoming, module })}

ts/components/conversation/MessageDetail.tsx

@@ -48,7 +48,7 @@ export class MessageDetail extends React.Component<Props> {
         name={name}
         phoneNumber={phoneNumber}
         profileName={profileName}
-        size={48}
+        size={36}
       />
     );
   }

ts/components/session/SessionClosableOverlay.tsx

@@ -93,11 +93,11 @@ export class SessionClosableOverlay extends React.Component<Props> {
           />
         </div>
         <h2>{title}</h2>
-        <h3>{subtitle}</h3>
-        <div className="module-left-pane-overlay-border-container">
-          <hr className="white" />
-          <hr className="green" />
-        </div>
+        <h3>
+          {subtitle}
+          <hr className="green-border" />
+        </h3>
+        <hr className="white-border" />
         <SessionIdEditable
           ref={this.inputRef}
           editable={true}

ts/components/session/SessionIdEditable.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 interface Props {
   placeholder?: string;
@@ -28,7 +29,12 @@ export class SessionIdEditable extends React.PureComponent<Props> {
     const { placeholder, editable, text } = this.props;
 
     return (
-      <div className="session-id-editable">
+      <div
+        className={classNames(
+          'session-id-editable',
+          !editable && 'session-id-editable-disabled'
+        )}
+      >
         <textarea
           className="session-id-editable-textarea"
           ref={this.inputRef}