Merge pull request #1034 from vincentbavitz/minor-ui-improvements

Minor ui improvements

js/views/create_group_dialog_view.js

@@ -165,9 +165,9 @@
         props: {
           titleText: this.titleText,
           groupName: this.groupName,
-          okText: this.okText,
+          okText: i18n('ok'),
+          cancelText: i18n('cancel'),
           isPublic: this.isPublic,
-          cancelText: this.cancelText,
           existingMembers: this.existingMembers,
           friendList: this.friendsAndMembers,
           isAdmin: this.isAdmin,

main.js

@@ -198,10 +198,10 @@ function captureClicks(window) {
   window.webContents.on('new-window', handleUrl);
 }
 
-const DEFAULT_WIDTH = 800;
+const DEFAULT_WIDTH = 880;
 const DEFAULT_HEIGHT = 720;
 const MIN_WIDTH = 880;
-const MIN_HEIGHT = 580;
+const MIN_HEIGHT = 720;
 const BOUNDS_BUFFER = 100;
 
 function isVisible(window, bounds) {

stylesheets/_mentions.scss

@@ -82,7 +82,7 @@
 
   .error-faded {
     opacity: 0;
-    margin-top: -20px;
+    margin-top: -5px;
     transition: all 100ms linear;
   }
 
@@ -96,8 +96,6 @@
   max-height: 240px;
   overflow-y: auto;
   margin: 4px;
-  border-top: 1px solid #2f2f2f;
-  border-bottom: 1px solid #2f2f2f;
 
   .check-mark {
     float: right;

stylesheets/_password.scss

@@ -1,50 +0,0 @@
-.password {
-  .content-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: $color-dark-05;
-    width: 100%;
-    height: 100%;
-  }
-
-  .content {
-    margin: 3em;
-  }
-
-  .inputs {
-    display: flex;
-    flex-direction: column;
-  }
-
-  input {
-    width: 30em;
-  }
-
-  .error {
-    font-weight: bold;
-    font-size: 16px;
-    margin-top: 1em;
-  }
-
-  .reset {
-    font-size: 15px;
-    margin-top: 1em;
-    cursor: pointer;
-    user-select: none;
-
-    a {
-      color: #78be20;
-      font-weight: bold;
-    }
-  }
-
-  .overlay {
-    color: $color-dark-05;
-    background: $color-dark-85;
-
-    .step {
-      padding: 0;
-    }
-  }
-}

stylesheets/_session.scss

@@ -140,11 +140,11 @@ div.spacer-lg {
   transition: filter 0.1s;
 }
 
-.text-subtle {
+.subtle {
   opacity: 0.6;
 }
 
-.text-soft {
+.soft {
   opacity: 0.4;
 }
 
@@ -848,6 +848,12 @@ label {
   .friend-selection-list {
     width: unset;
   }
+
+  .create-group-dialog__member-count {
+    text-align: center;
+    margin-top: -25px;
+    opacity: 0.6;
+  }
 }
 
 .session-confirm {
@@ -963,7 +969,7 @@ label {
     list-style: none;
     padding: 0px;
     margin: 0px;
-    max-height: 450px;
+    max-height: 40vh;
     overflow-y: auto;
   }
 
@@ -1636,92 +1642,6 @@ input {
   }
 }
 
-.clear-data,
-.password-prompt {
-  &-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: $session-color-black;
-
-    width: 100%;
-    height: 100%;
-
-    padding: 3 * $session-margin-lg;
-  }
-
-  &-error-section {
-    width: 100%;
-    color: $session-color-white;
-    margin: -$session-margin-sm 0px 2 * $session-margin-lg 0px;
-
-    .session-label {
-      &.primary {
-        background-color: rgba($session-color-primary, 0.3);
-      }
-      padding: $session-margin-xs $session-margin-sm;
-      font-size: $session-font-xs;
-      text-align: center;
-    }
-  }
-
-  &-container {
-    font-family: 'SF Pro Text';
-    color: $session-color-white;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    width: 600px;
-    min-width: 420px;
-    padding: 3 * $session-margin-lg 2 * $session-margin-lg;
-    box-sizing: border-box;
-    background-color: $session-shade-4;
-    border: 1px solid $session-shade-8;
-    border-radius: 2px;
-
-    .warning-info-area,
-    .password-info-area {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-
-      h1 {
-        color: $session-color-white;
-      }
-      svg {
-        margin-right: $session-margin-lg;
-      }
-    }
-
-    p,
-    input {
-      margin: $session-margin-lg 0px;
-    }
-
-    .button-group {
-      display: inline-flex;
-    }
-
-    #password-prompt-input {
-      width: 100%;
-      color: #fff;
-      background-color: #2e2e2e;
-      margin-top: 2 * $session-margin-lg;
-      padding: $session-margin-xs $session-margin-lg;
-      outline: none;
-      border: none;
-      border-radius: 2px;
-      text-align: center;
-      font-size: 24px;
-      letter-spacing: 5px;
-      font-family: 'SF Pro Text';
-    }
-  }
-}
-
 .onboarding-message-section {
   display: flex;
   flex-grow: 1;
@@ -1845,6 +1765,13 @@ input {
   justify-content: space-between;
   transition: $session-transition-duration;
 
+  &:first-child {
+    border-top: 1px solid rgba($session-shade-8, 0.6);
+  }
+  &:last-child {
+    border-bottom: 1px solid rgba($session-shade-8, 0.6);
+  }
+
   &.selected {
     background-color: $session-shade-4;
   }
@@ -1872,6 +1799,10 @@ input {
     margin-left: 5px;
     opacity: 0.8;
   }
+
+  &__avatar > div {
+    margin-bottom: 0px !important;
+  }
 }
 
 .invite-friends-container {

stylesheets/_session_password.scss

@@ -0,0 +1,89 @@
+.password {
+  height: 100vh;
+
+  .clear-data,
+  .password-prompt {
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      background-color: $session-color-black;
+
+      width: 100%;
+      height: 100%;
+
+      padding: 3 * $session-margin-lg;
+    }
+
+    &-error-section {
+      width: 100%;
+      color: $session-color-white;
+      margin: -$session-margin-sm 0px 2 * $session-margin-lg 0px;
+
+      .session-label {
+        &.primary {
+          background-color: rgba($session-color-primary, 0.3);
+        }
+        padding: $session-margin-xs $session-margin-sm;
+        font-size: $session-font-xs;
+        text-align: center;
+      }
+    }
+
+    &-container {
+      font-family: 'SF Pro Text';
+      color: $session-color-white;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      width: 600px;
+      min-width: 420px;
+      padding: 3 * $session-margin-lg 2 * $session-margin-lg;
+      box-sizing: border-box;
+      background-color: $session-shade-4;
+      border: 1px solid $session-shade-8;
+      border-radius: 2px;
+
+      .warning-info-area,
+      .password-info-area {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        h1 {
+          color: $session-color-white;
+        }
+        svg {
+          margin-right: $session-margin-lg;
+        }
+      }
+
+      p,
+      input {
+        margin: $session-margin-lg 0px;
+      }
+
+      .button-group {
+        display: inline-flex;
+      }
+
+      #password-prompt-input {
+        width: 100%;
+        color: #fff;
+        background-color: #2e2e2e;
+        margin-top: 2 * $session-margin-lg;
+        padding: $session-margin-xs $session-margin-lg;
+        outline: none;
+        border: none;
+        border-radius: 2px;
+        text-align: center;
+        font-size: 24px;
+        letter-spacing: 5px;
+        font-family: 'SF Pro Text';
+      }
+    }
+  }
+}

stylesheets/manifest.scss

@@ -12,7 +12,6 @@
 @import 'emoji';
 @import 'mentions';
 @import 'settings';
-@import 'password';
 
 // Build the main view
 @import 'index';
@@ -22,10 +21,16 @@
 @import 'ios';
 @import 'theme_dark';
 
-// Session
+// /////////////////// //
+// ///// Session ///// //
+// /////////////////// //
 @import 'modules';
 @import 'session';
+
+// Separate screens
 @import 'session_signin';
+@import 'session_password';
+
 @import 'session_theme';
 @import 'session_left_pane';
 @import 'session_group_panel';

ts/components/DevicePairingDialog.tsx

@@ -120,7 +120,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
 
           <div className="device-pairing-dialog__secret-words">
             <label>{window.i18n('secretWords')}</label>
-            <div className="text-subtle">{secretWords}</div>
+            <div className="subtle">{secretWords}</div>
           </div>
 
           <div className="session-modal__button-group">
@@ -148,9 +148,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
         <div className="session-modal__centered">
           {this.renderErrors()}
           <h4>{window.i18n('waitingForDeviceToRegister')}</h4>
-          <small className="text-subtle">
+          <small className="subtle">{window.i18n('pairNewDevicePrompt')}</small>
-            {window.i18n('pairNewDevicePrompt')}
-          </small>
           <div className="spacer-lg" />
 
           <div className="qr-image">
@@ -199,7 +197,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
           <p className="session-modal__description">
             {window.i18n('confirmUnpairingTitle')}
             <br />
-            <span className="text-subtle">{description}</span>
+            <span className="subtle">{description}</span>
           </p>
           <div className="spacer-xs" />
           <div className="session-modal__button-group">

ts/components/conversation/UpdateGroupMembersDialog.tsx

@@ -93,7 +93,7 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
       noFriendsClasses = classNames('no-friends', 'hidden');
     } else {
       // private group
-      titleText = `${this.props.titleText} (Members: ${checkMarkedCount})`;
+      titleText = this.props.titleText;
       noFriendsClasses =
         this.state.friendList.length === 0
           ? 'no-friends'
@@ -114,6 +114,16 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
         onOk={() => null}
       >
         <div className="spacer-md" />
+
+        {!this.props.isPublic && (
+          <>
+            <small className="create-group-dialog__member-count">
+              {`${checkMarkedCount} members`}
+            </small>
+            <hr className="subtle" />
+          </>
+        )}
+
         <p className={errorMessageClasses}>{errorMsg}</p>
         <div className="spacer-md" />
 
@@ -124,6 +134,8 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
           'noMembersInThisGroup'
         )})`}</p>
 
+        <div className="spacer-lg" />
+
         <div className="session-modal__button-group">
           <SessionButton text={okText} onClick={this.onClickOK} />
 

ts/components/session/SessionConfirm.tsx

@@ -48,7 +48,7 @@ export class SessionConfirm extends React.Component<Props> {
 
     const messageSubText = messageSub
       ? 'session-confirm-main-message'
-      : 'text-subtle';
+      : 'subtle';
 
     return (
       <SessionModal
@@ -63,7 +63,7 @@ export class SessionConfirm extends React.Component<Props> {
         <div className="session-modal__centered">
           <span className={messageSubText}>{message}</span>
           {messageSub && (
-            <span className="session-confirm-sub-message text-subtle">
+            <span className="session-confirm-sub-message subtle">
               {messageSub}
             </span>
           )}

ts/components/session/SessionGroupSettings.tsx

@@ -240,7 +240,7 @@ export class SessionGroupSettings extends React.Component<Props, any> {
         {showMemberCount && (
           <>
             <div className="spacer-lg" />
-            <div role="button" className="text-subtle">
+            <div role="button" className="subtle">
               {window.i18n('members', memberCount)}
             </div>
             <div className="spacer-lg" />

ts/components/session/SessionPasswordPrompt.tsx

@@ -15,6 +15,8 @@ interface State {
 }
 
 export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
+  private readonly inputRef: React.RefObject<HTMLInputElement>;
+
   constructor(props: any) {
     super(props);
 
@@ -29,10 +31,12 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
 
     this.initLogin = this.initLogin.bind(this);
     this.initClearDataView = this.initClearDataView.bind(this);
+
+    this.inputRef = React.createRef();
   }
 
   public componentDidMount() {
-    setTimeout(() => $('#password-prompt-input').focus(), 100);
+    (this.inputRef.current as HTMLInputElement).focus();
   }
 
   public render() {
@@ -65,6 +69,7 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
         onKeyUp={this.onKeyUp}
         maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
         onPaste={this.onPaste}
+        ref={this.inputRef}
       />
     );
     const infoIcon = this.state.clearDataView ? (
@@ -137,15 +142,15 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
       });
     }
 
-    // Prevent pating into input
+    // Prevent pasting into input
     return false;
   }
 
   public async onLogin(passPhrase: string) {
-    const trimmed = passPhrase ? passPhrase.trim() : passPhrase;
+    const passPhraseTrimmed = passPhrase.trim();
 
     try {
-      await window.onLogin(trimmed);
+      await window.onLogin(passPhraseTrimmed);
     } catch (error) {
       // Increment the error counter and show the button if necessary
       this.setState({
@@ -157,7 +162,9 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
   }
 
   private async initLogin() {
-    const passPhrase = String($('#password-prompt-input').val());
+    const passPhrase = String(
+      (this.inputRef.current as HTMLInputElement).value
+    );
     await this.onLogin(passPhrase);
   }
 

ts/components/session/SessionQRModal.tsx

@@ -29,7 +29,7 @@ export class SessionQRModal extends React.Component<Props> {
       >
         <div className="spacer-sm" />
 
-        <div className="qr-dialog__description text-subtle">
+        <div className="qr-dialog__description subtle">
           <SessionHtmlRenderer html={window.i18n('QRCodeDescription')} />
         </div>
         <div className="spacer-lg" />

ts/components/session/SessionSeedModal.tsx

@@ -121,7 +121,7 @@ export class SessionSeedModal extends React.Component<Props, State> {
           <p className="session-modal__description">
             {i18n('seedSavePromptMain')}
             <br />
-            <span className="text-subtle">{i18n('seedSavePromptAlt')}</span>
+            <span className="subtle">{i18n('seedSavePromptAlt')}</span>
           </p>
           <div className="spacer-xs" />