Emoji spacing & message highlight formatting

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(

preload.js

@@ -494,7 +494,6 @@ window.shortenPubkey = pubkey => `(...${pubkey.substring(pubkey.length - 6)})`;
 
 window.pubkeyPattern = /@[a-fA-F0-9]{64,66}\b/g;
 
-
 // TODO: activate SealedSender once it is ready on all platforms
 window.lokiFeatureFlags = {
   multiDeviceUnpairing: true,

stylesheets/_session.scss

@@ -115,7 +115,6 @@ $main-view-header-height: 85px;
 $session-left-pane-width: 300px;
 $session-left-pane-sections-container-width: 80px;
 
-
 div.spacer-sm {
   height: $session-margin-sm;
 }
@@ -135,9 +134,8 @@ div.spacer-lg {
   color: rgba($color, 0.6);
 }
 
-
 // Blur for modals
-.loki-dialog ~ .index.inbox{
+.loki-dialog ~ .index.inbox {
   filter: blur(1px);
   transition: filter 0.1s;
 }
@@ -232,7 +230,7 @@ $session_message-container-border-radius: 5px;
   pointer-events: none;
 }
 .overlay {
-  display: block !important;
+  display: flex !important;
   z-index: 1;
 }
 
@@ -580,12 +578,15 @@ label {
 .message-selection-overlay {
   display: none;
   position: absolute;
-  right: $session-margin-sm;
+  left: 0px;
-  left: $session-margin-md;
+  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'] {
@@ -594,7 +595,6 @@ label {
 
 .message-selection-overlay .button-group {
   float: right;
-  margin-top: 13.5px;
 }
 
 .hidden {
@@ -1293,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 {
@@ -1770,8 +1778,7 @@ input {
   }
 }
 
-
 .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, .invite-friends-container {
+    .session-icon-button,
+    .invite-friends-container {
       margin: 0 $session-margin-md;
     }
   }

stylesheets/_session_left_pane.scss

@@ -550,11 +550,11 @@ $session-compose-margin: 20px;
     }
 
     &.active {
-      background-color: $session-shade-9;
+      background-color: $session-shade-7;
     }
 
     &:hover {
-      background-color: $session-shade-7;
+      background-color: $session-shade-5;
     }
 
     &__buttons {

ts/components/conversation/InviteFriendsDialog.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import { SessionModal } from '../session/SessionModal';
 import { SessionButton } from '../session/SessionButton';
-import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
+import {
+  ContactType,
+  SessionMemberListItem,
+} from '../session/SessionMemberListItem';
 
 interface Props {
   friendList: Array<any>;
@@ -53,7 +56,6 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
   }
 
   public render() {
-
     const titleText = `${window.i18n('addingFriends')} ${this.props.chatName}`;
     const cancelText = window.i18n('cancel');
     const okText = window.i18n('ok');
@@ -68,9 +70,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
       >
         <div className="spacer-lg" />
 
-        <div className="friend-selection-list">
+        <div className="friend-selection-list">{this.renderMemberList()}</div>
-          {this.renderMemberList()}
-        </div>
         {hasFriends ? null : (
           <>
             <div className="spacer-lg" />
@@ -154,13 +154,6 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
 
   private closeDialog() {
     window.removeEventListener('keyup', this.onKeyUp);
-
-    console.log(this.props.onClose);
-    console.log(this.props.onClose);
-    console.log(this.props.onClose);
-    console.log(this.props.onClose);
-    
     this.props.onClose();
   }
-
 }

ts/components/session/LeftPaneSettingSection.tsx

@@ -76,8 +76,6 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
       >
         <div>
           <strong>{item.title}</strong>
-          <br />
-          <span className="text-subtle">{item.description}</span>
         </div>
 
         <div>
@@ -181,31 +179,26 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
       {
         id: SessionSettingCategory.Appearance,
         title: window.i18n('appearanceSettingsTitle'),
-        description: window.i18n('appearanceSettingsDescription'),
         hidden: false,
       },
       {
         id: SessionSettingCategory.Privacy,
         title: window.i18n('privacySettingsTitle'),
-        description: window.i18n('privacySettingsDescription'),
         hidden: false,
       },
       {
         id: SessionSettingCategory.Permissions,
         title: window.i18n('permissionSettingsTitle'),
-        description: window.i18n('permissionSettingsDescription'),
         hidden: true,
       },
       {
         id: SessionSettingCategory.Notifications,
         title: window.i18n('notificationSettingsTitle'),
-        description: window.i18n('notificationSettingsDescription'),
         hidden: false,
       },
       {
         id: SessionSettingCategory.Devices,
         title: window.i18n('devicesSettingsTitle'),
-        description: window.i18n('devicesSettingsDescription'),
       },
     ];
   }

ts/components/session/SessionChannelSettings.tsx

@@ -54,16 +54,15 @@ export class SessionChannelSettings extends React.Component<Props, any> {
 
     setTimeout(() => {
       this.getMediaGalleryProps()
-      .then(({ documents, media, onItemClick }) => {
+        .then(({ documents, media, onItemClick }) => {
-        this.setState({
+          this.setState({
-          documents,
+            documents,
-          media,
+            media,
-          onItemClick,
+            onItemClick,
-        });
+          });
-      })
+        })
-      .ignore();
+        .ignore();
     }, mediaScanInterval);
-    
   }
 
   public async getMediaGalleryProps() {
@@ -265,7 +264,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
           conversationType="group"
           size={80}
         />
-        
+
         <div className="invite-friends-container">
           {shouldShowInviteFriends && (
             <SessionIconButton
@@ -275,8 +274,6 @@ export class SessionChannelSettings extends React.Component<Props, any> {
             />
           )}
         </div>
-
-        
       </div>
     );
   }