Formatting and button positioning

js/background.js

@@ -820,7 +820,6 @@
       confirmDialog.render();
     };
 
-    
     window.showQRDialog = window.owsDesktopApp.appView.showQRDialog;
     window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog;
     window.showPasswordDialog = window.owsDesktopApp.appView.showPasswordDialog;

stylesheets/_session.scss

@@ -219,6 +219,10 @@ $session_message-container-border-radius: 5px;
   margin-right: 5px;
 }
 
+.message-wrapper {
+  font-family: 'SF Pro Text';
+}
+
 .session-button {
   @mixin transparent-background($textAndBorderColor) {
     background-color: Transparent;
@@ -870,7 +874,7 @@ label {
       height: 68.45px;
     }
   }
-  
+
   .avatar-center-inner {
     position: relative;
 
@@ -891,8 +895,8 @@ label {
       padding-top: 3px;
       background-color: $session-color-white;
       transition: $session-transition-duration;
-  
-      &:hover{
+
+      &:hover {
         filter: brightness(90%);
       }
 
@@ -900,7 +904,7 @@ label {
         opacity: 1;
       }
     }
-  } 
+  }
 
   .image-upload-section {
     display: flex;
@@ -912,15 +916,15 @@ label {
     height: 80px;
     border-radius: 100%;
     background-color: rgba($session-color-black, 0.72);
-    box-shadow: 0px 0px 3px 0.5px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 3px 0.5px rgba(0, 0, 0, 0.75);
     opacity: 0;
     transition: $session-transition-duration;
 
-    &:after{
-      content: "Edit";
+    &:after {
+      content: 'Edit';
     }
 
-    &:hover{
+    &:hover {
       opacity: 1;
     }
   }
@@ -939,22 +943,30 @@ label {
   }
 
   .session-id-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
     .panel-text-divider {
       margin-top: 35px;
       margin-bottom: 35px;
     }
 
-    &-display{
+    &-display {
       text-align: center;
       word-break: break-all;
       font-size: $session-font-md;
       padding: 0px $session-margin-lg;
-      font-family: "SF Pro Text";
+      font-family: 'SF Pro Text';
       font-weight: 100;
-      color: rgba($session-color-white, 0.80);
+      color: rgba($session-color-white, 0.8);
       font-size: $session-font-md;
       padding: 0px $session-margin-sm;
     }
+    
+    .session-button {
+      width: 148px;
+    }
   }
 
   .profile-name {
@@ -970,7 +982,7 @@ label {
       font-size: $session-font-md;
       background-color: $session-shade-5 !important;
     }
-    
+
     &-uneditable {
       display: flex;
       align-items: center;
@@ -981,7 +993,6 @@ label {
         font-size: $session-font-md;
         padding: 0px $session-margin-sm;
       }
-
     }
   }
 }

ts/components/EditProfileDialog.tsx

@@ -3,7 +3,11 @@ import { QRCode } from 'react-qr-svg';
 
 import { Avatar } from './Avatar';
 
-import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from './session/SessionButton';
 
 import {
   SessionIconButton,
@@ -67,13 +71,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
     const viewQR = this.state.mode === 'qr';
     const sessionID = window.textsecure.storage.user.getNumber();
 
-    const backButton = (viewEdit || viewQR)
-      ? [{
-          iconType: SessionIconType.Chevron,
-          iconRotation: 90,
-          onClick: () => this.setState({mode: 'default'}),
-        }]
-      : undefined;
+    const backButton =
+      viewEdit || viewQR
+        ? [
+            {
+              iconType: SessionIconType.Chevron,
+              iconRotation: 90,
+              onClick: () => {
+                this.setState({ mode: 'default' });
+              },
+            },
+          ]
+        : undefined;
 
     return (
       <SessionModal
@@ -83,7 +92,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
         headerReverse={viewEdit || viewQR}
         headerIconButtons={backButton}
       >
-        <div className="spacer-md"></div>
+        <div className="spacer-md" />
 
         {viewQR && this.renderQRView(sessionID)}
         {viewDefault && this.renderDefaultView()}
@@ -93,18 +102,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
           <div className="panel-text-divider">
             <span>{window.i18n('yourSessionID')}</span>
           </div>
-          <p className="session-id-section-display">
-            { sessionID }
-          </p>
+          <p className="session-id-section-display">{sessionID}</p>
+
+          <div className="spacer-lg" />
 
-          <div className="spacer-lg"></div>
-          
-          { (viewDefault || viewQR) ? (
+          {viewDefault || viewQR ? (
             <SessionButton
               text={window.i18n('copy')}
               buttonType={SessionButtonType.BrandOutline}
               buttonColor={SessionButtonColor.Green}
-              onClick={() => this.copySessionID(sessionID)}
+              onClick={() => {
+                this.copySessionID(sessionID);
+              }}
             />
           ) : (
             <SessionButton
@@ -115,8 +124,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
             />
           )}
 
-          <div className="spacer-lg"></div>
-
+          <div className="spacer-lg" />
         </div>
       </SessionModal>
     );
@@ -130,6 +138,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
             {this.renderAvatar()}
             <div
               className="image-upload-section"
+              role="button"
               onClick={() => {
                 const el = this.inputEl.current;
                 if (el) {
@@ -148,12 +157,15 @@ export class EditProfileDialog extends React.Component<Props, State> {
             </div>
             <div
               className="qr-view-button"
-              onClick={() => this.setState({mode: 'qr'})}
+              role="button"
+              onClick={() => {
+                this.setState({ mode: 'qr' });
+              }}
             >
               <SessionIconButton
                 iconType={SessionIconType.QR}
                 iconSize={SessionIconSize.Small}
-                iconColor={"#000000"}
+                iconColor={'#000000'}
               />
             </div>
           </div>
@@ -162,31 +174,31 @@ export class EditProfileDialog extends React.Component<Props, State> {
     );
   }
 
-  private renderDefaultView(){
+  private renderDefaultView() {
     return (
       <>
-        { this.renderProfileHeader() }
+        {this.renderProfileHeader()}
 
         <div className="profile-name-uneditable">
-          <p>{ this.state.setProfileName }</p>
+          <p>{this.state.setProfileName}</p>
           <SessionIconButton
             iconType={SessionIconType.Pencil}
             iconSize={SessionIconSize.Medium}
-            onClick={() => this.setState({mode: 'edit'})}
+            onClick={() => {
+              this.setState({ mode: 'edit' });
+            }}
           />
         </div>
       </>
     );
   }
 
-
-
   private renderEditView() {
     const placeholderText = window.i18n('displayName');
 
     return (
       <>
-        { this.renderProfileHeader() }
+        {this.renderProfileHeader()}
         <div className="profile-name">
           <input
             type="text"
@@ -203,13 +215,18 @@ export class EditProfileDialog extends React.Component<Props, State> {
     );
   }
 
-  private renderQRView(sessionID: string){
+  private renderQRView(sessionID: string) {
     const bgColor = '#FFFFFF';
     const fgColor = '#1B1B1B';
-    
+
     return (
       <div className="qr-image">
-        <QRCode value={sessionID} bgColor={bgColor} fgColor={fgColor} level="L" />
+        <QRCode
+          value={sessionID}
+          bgColor={bgColor}
+          fgColor={fgColor}
+          level="L"
+        />
       </div>
     );
   }

ts/components/session/ActionsPanel.tsx

@@ -42,7 +42,8 @@ const Section = ({
     ? () => {
         type === SectionType.Profile
           ? window.showEditProfileDialog()
-          : onSelect(type);
+          : /* tslint:disable-next-line:no-void-expression */
+            onSelect(type);
       }
     : undefined;
 

ts/components/session/SessionModal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
-import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
+import { SessionButtonColor, SessionButtonType } from './SessionButton';
 
 interface Props {
   title: string;
@@ -11,7 +11,7 @@ interface Props {
   showExitIcon?: boolean;
   showHeader?: boolean;
   headerReverse?: boolean;
-  //Maximum of two icons in header
+  //Maximum of two icons or buttons in header
   headerIconButtons?: Array<{
     iconType: SessionIconType;
     iconRotation: number;
@@ -49,14 +49,25 @@ export class SessionModal extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const { title, headerIconButtons, showExitIcon, showHeader, headerReverse } = this.props;
+    const {
+      title,
+      headerIconButtons,
+      showExitIcon,
+      showHeader,
+      headerReverse,
+    } = this.props;
     const { isVisible } = this.state;
 
     return isVisible ? (
       <div className={'session-modal'}>
         {showHeader ? (
           <>
-            <div className={classNames("session-modal__header", headerReverse && "reverse")}>
+            <div
+              className={classNames(
+                'session-modal__header',
+                headerReverse && 'reverse'
+              )}
+            >
               <div className="session-modal__header__close">
                 {showExitIcon ? (
                   <SessionIconButton

ts/components/session/settings/SessionSettings.tsx

@@ -216,7 +216,10 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
 
     return (
       <div className="session-settings">
-        <SettingsHeader disableLinkDeviceButton={shouldRenderPasswordLock} category={category} />
+        <SettingsHeader
+          disableLinkDeviceButton={shouldRenderPasswordLock}
+          category={category}
+        />
         {shouldRenderPasswordLock ? (
           this.renderPasswordLock()
         ) : (

ts/components/session/settings/SessionSettingsHeader.tsx

@@ -4,19 +4,19 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
 import { SessionSettingCategory, SettingsViewProps } from './SessionSettings';
 import { SessionButton } from '../SessionButton';
 
-interface Props extends SettingsViewProps{
+interface Props extends SettingsViewProps {
   disableLinkDeviceButton: boolean | null;
 }
 
 export class SettingsHeader extends React.Component<Props, any> {
   public static defaultProps = {
     disableLinkDeviceButton: true,
-  }
+  };
 
   public constructor(props: any) {
     super(props);
     this.state = {
-    disableLinkDeviceButton: this.props.disableLinkDeviceButton,
+      disableLinkDeviceButton: this.props.disableLinkDeviceButton,
     };
     this.showAddLinkedDeviceModal = this.showAddLinkedDeviceModal.bind(this);
   }