Stylistic improvements and bug fixes

background.html

@@ -41,7 +41,6 @@
 
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div id='session-toast-container'></div>
-    <div id='session-confirm-container'></div>
     <div class='gutter'>
       <div class='network-status-container'></div>
       <div class='left-pane-placeholder'></div>
@@ -156,75 +155,6 @@ <h4>{{ title }}</h4>
       </div>
     </div>
   </script>
-  <script type='text/x-tmpl-mustache' id='password-change-dialog'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <input type='password' id='old-password' placeholder='Old password' autofocus>
-      <input type='password' id='new-password' placeholder='New password' autofocus>
-      <input type='password' id='new-password-confirmation' placeholder='Type in your new password again' autofocus>
-      <div class='error'></div>
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='nickname-dialog'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <input type='text' name='name' class='name' placeholder='Type a name' autofocus maxlength='25'>
-      {{ #message }}
-        <div class='message'>{{ message }}</div>
-      {{ /message }}
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-
-  <script type='text/x-tmpl-mustache' id='device-pairing-words-dialog'>
-    <div class="content">
-        <h4>{{ title }}</h4>
-        <p>{{ secretWords }}</p>
-        <button id='close'>{{ closeText }}</button>
-    </div>
-  </script>
-
-  <script type='text/x-tmpl-mustache' id='connecting-to-server-template'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='add-server-template'>
-    <div class="content">
-      {{ #title }}
-        <h4>{{ title }}</h4>
-      {{ /title }}
-      <input type='text' id='server-url' placeholder='Server Url' autofocus>
-      <div class='error'></div>
-      <div class='buttons'>
-        <button class='cancel' tabindex='2'>{{ cancel }}</button>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
-  <script type='text/x-tmpl-mustache' id='qr-code-template'>
-    <div class="content">
-      <div id="qr">
-      </div>
-      <button class='ok' tabindex='1'>{{ ok }}</button>
-    </div>
-  </script>
   <script type='text/x-tmpl-mustache' id='identicon-svg'>
       <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
          <circle cx='50' cy='50' r='40' fill='{{ color }}' />

js/background.js

@@ -802,7 +802,7 @@
 
     window.confirmationDialog = params => {
       const confirmDialog = new Whisper.SessionConfirmView({
-        el: $('#session-confirm-container'),
+        el: $('body'),
         title: params.title,
         message: params.message,
         messageSub: params.messageSub || undefined,
@@ -969,7 +969,7 @@
         window.toasts.set(
           toastID,
           new Whisper.SessionToastView({
-            el: $('#session-toast-container'),
+            el: $('body'),
           })
         );
 

js/modules/loki_app_dot_net_api.js

@@ -614,7 +614,9 @@ class LokiAppDotNetServerAPI {
           `serverRequest ${mode} error`,
           e.code,
           e.message,
-          `json: ${txtResponse}`, 'attempting connection to', url
+          `json: ${txtResponse}`,
+          'attempting connection to',
+          url
         );
       } else {
         log.info(

js/views/app_view.js

@@ -181,11 +181,11 @@
     },
     showEditProfileDialog(options) {
       const dialog = new Whisper.EditProfileDialogView(options);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showUserDetailsDialog(options) {
       const dialog = new Whisper.UserDetailsDialogView(options);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showNicknameDialog({ pubKey, title, message, nickname, onOk, onCancel }) {
       const _title = title || `Change nickname for ${pubKey}`;
@@ -196,16 +196,16 @@
         resolve: onOk,
         reject: onCancel,
       });
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
       dialog.focusInput();
     },
     showPasswordDialog(options) {
       const dialog = new Whisper.PasswordDialogView(options);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showSeedDialog() {
       const dialog = new Whisper.SeedDialogView();
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showQRDialog(string) {
       const dialog = new Whisper.QRDialogView({
@@ -215,12 +215,11 @@
     },
     showDevicePairingDialog(options) {
       const dialog = new Whisper.DevicePairingDialogView(options);
-
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showDevicePairingWordsDialog() {
       const dialog = new Whisper.DevicePairingWordsDialogView();
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showCreateGroup() {
       // TODO: make it impossible to open 2 dialogs as once
@@ -231,7 +230,7 @@
     },
     showUpdateGroupDialog(groupConvo) {
       const dialog = new Whisper.UpdateGroupDialogView(groupConvo);
-      this.el.append(dialog.el);
+      this.el.prepend(dialog.el);
     },
     showSessionRestoreConfirmation(options) {
       const dialog = new Whisper.ConfirmSessionResetView(options);

js/views/session_confirm_view.js

@@ -28,12 +28,12 @@
       this.$('.session-confirm-wrapper').remove();
 
       this.confirmView = new Whisper.ReactWrapperView({
-        className: 'session-confirm-wrapper',
+        className: 'loki-dialog modal session-confirm-wrapper',
         Component: window.Signal.Components.SessionConfirm,
         props: this.props,
       });
 
-      this.$el.append(this.confirmView.el);
+      this.$el.prepend(this.confirmView.el);
     },
 
     ok() {

js/views/session_toast_view.js

@@ -25,7 +25,7 @@
         props: this.props,
       });
 
-      this.$el.append(this.toastView.el);
+      this.$el.prepend(this.toastView.el);
     },
 
     update(options) {

preload.js

@@ -67,6 +67,8 @@ window.CONSTANTS = {
   MAX_GROUP_NAME_LENGTH: 64,
   DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),
   MAX_CONNECTION_DURATION: 5000,
+  // Limited due to the proof-of-work requirement
+  SMALL_GROUP_SIZE_LIMIT: 10,
 };
 
 window.versionInfo = {
@@ -492,9 +494,6 @@ window.shortenPubkey = pubkey => `(...${pubkey.substring(pubkey.length - 6)})`;
 
 window.pubkeyPattern = /@[a-fA-F0-9]{64,66}\b/g;
 
-// Limited due to the proof-of-work requirement
-window.SMALL_GROUP_SIZE_LIMIT = 10;
-
 // TODO: activate SealedSender once it is ready on all platforms
 window.lokiFeatureFlags = {
   multiDeviceUnpairing: true,

stylesheets/_mentions.scss

@@ -94,8 +94,10 @@
 
 .friend-selection-list {
   max-height: 240px;
-  overflow-y: scroll;
+  overflow-y: auto;
   margin: 4px;
+  border-top: 1px solid #2f2f2f;
+  border-bottom: 1px solid #2f2f2f;
 
   .check-mark {
     float: right;

stylesheets/_session.scss

@@ -111,7 +111,7 @@ $session-font-h3: 20px;
 $session-font-h4: 16px;
 
 $session-search-input-height: 34px;
-$main-view-header-height: 85px;
+$main-view-header-height: 63px;
 $session-left-pane-width: 300px;
 $session-left-pane-sections-container-width: 80px;
 
@@ -134,6 +134,12 @@ div.spacer-lg {
   color: rgba($color, 0.6);
 }
 
+// Blur for modals
+.loki-dialog ~ .index.inbox {
+  filter: blur(1px);
+  transition: filter 0.1s;
+}
+
 .text-subtle {
   opacity: 0.6;
 }
@@ -224,7 +230,7 @@ $session_message-container-border-radius: 5px;
   pointer-events: none;
 }
 .overlay {
-  display: block !important;
+  display: flex !important;
   z-index: 1;
 }
 
@@ -572,12 +578,15 @@ label {
 .message-selection-overlay {
   display: none;
   position: absolute;
-  right: $session-margin-sm;
-  left: $session-margin-md;
+  left: 0px;
+  right: 0px;
+  margin: 0px $session-margin-sm;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
 
   .close-button {
     float: left;
-    margin: 17px 0px 0px 0px;
   }
 }
 .message-selection-overlay div[role='button'] {
@@ -586,7 +595,6 @@ label {
 
 .message-selection-overlay .button-group {
   float: right;
-  margin-top: 13.5px;
 }
 
 .hidden {
@@ -597,7 +605,7 @@ label {
   cursor: pointer;
 }
 
-#session-toast-container {
+.session-toast-wrapper {
   position: fixed;
   right: $session-margin-lg;
   bottom: $session-margin-lg;
@@ -1285,7 +1293,15 @@ label {
   .module-message {
     font-family: 'SF Pro Text';
     border-radius: 5px;
+
+    &__text--incoming {
+      /* Add padding to large emojis in chat */
+      img.emoji.jumbo {
+        margin: $session-margin-sm 0px;
+      }
+    }
   }
+
 }
 
 .bottom-bar {
@@ -1761,3 +1777,8 @@ input {
     opacity: 0.8;
   }
 }
+
+.invite-friends-container {
+  height: $session-icon-size-lg;
+  width: $session-icon-size-lg;
+}

stylesheets/_session_group_panel.scss

@@ -19,7 +19,8 @@
       margin: auto;
     }
 
-    .session-icon-button {
+    .session-icon-button,
+    .invite-friends-container {
       margin: 0 $session-margin-md;
     }
   }

stylesheets/_session_left_pane.scss

@@ -135,7 +135,7 @@ $session-compose-margin: 20px;
 }
 
 .module-left-pane {
-  border-right: none !important;
+  border-right: 1px solid rgba($session-color-white, 0.1) !important;
   width: $session-left-pane-width;
   position: relative;
   height: -webkit-fill-available;
@@ -213,6 +213,8 @@ $session-compose-margin: 20px;
 
   &__list {
     height: -webkit-fill-available;
+    border-top: 1px solid rgba(255,255,255,0.05);
+
     &-popup {
       width: -webkit-fill-available;
       height: -webkit-fill-available;
@@ -485,6 +487,8 @@ $session-compose-margin: 20px;
     flex-grow: 1;
 
     .module-conversation-list-item {
+      background-color: $session-shade-4;
+
       &--has-friend-request {
         &:first-child {
           border-top: none !important;
@@ -496,6 +500,11 @@ $session-compose-margin: 20px;
         .module-conversation__user__profile-name {
           font-size: 13px !important;
         }
+
+      }
+
+      &__header__date, &__message {
+        display: none;
       }
 
       &__buttons {
@@ -550,11 +559,11 @@ $session-compose-margin: 20px;
     }
 
     &.active {
-      background-color: $session-shade-9;
+      background-color: $session-shade-5;
     }
 
     &:hover {
-      background-color: $session-shade-7;
+      background-color: $session-shade-6;
     }
 
     &__buttons {

ts/components/conversation/CreateGroupDialog.tsx

@@ -197,10 +197,10 @@ export class CreateGroupDialog extends React.Component<Props, State> {
 
     if (
       updatedFriends.filter(d => d.checkmarked).length >
-      window.SMALL_GROUP_SIZE_LIMIT - 1
+      window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT - 1
     ) {
       const msg = `${this.props.i18n('maxGroupMembersError')} ${
-        window.SMALL_GROUP_SIZE_LIMIT
+        window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
       }`;
       this.onShowError(msg);