Merge pull request #1240 from vincentbavitz/ui-polish

UI Polish & TTL Update

_locales/en/messages.json

@@ -878,7 +878,7 @@
     "message": "Waiting for device to register..."
   },
   "pairNewDevicePrompt": {
-    "message": "Scan the QR Code on your secondary device"
+    "message": "Scan the QR Code on your other device"
   },
   "pairedDevices": {
     "message": "Linked Devices"
@@ -2240,7 +2240,7 @@
     "message": "Remove"
   },
   "invalidHexId": {
-    "message": "Invalid Session ID or LNS Name",
+    "message": "Invalid Session ID",
     "description": "Error string shown when user types an invalid pubkey hex string"
   },
   "invalidLnsFormat": {
@@ -2360,7 +2360,7 @@
     "message": "Say hello to your Session ID"
   },
   "allUsersAreRandomly...": {
-    "message": "Your Session ID is the unique address people can use to contact you on Session. Your Session ID is totally private, anonymous, and has no connection to your real identity."
+    "message": "Your Session ID is the unique address people can use to contact you on Session. With no connection to your real identity, your Session ID is totally anonymous and private by design."
   },
   "getStarted": {
     "message": "Get started"
@@ -2409,7 +2409,7 @@
     "message": "Enter your <strong>Session ID</strong> below to link this device to your <strong>Session ID</strong>."
   },
   "enterSessionIDHere": {
-    "message": "Enter your Session ID here"
+    "message": "Enter your Session ID"
   },
   "continueYourSession": {
     "message": "Continue Your Session"
@@ -2460,7 +2460,7 @@
     "message": "Enter Session ID"
   },
   "pasteSessionIDRecipient": {
-    "message": "Enter a Session ID or LNS name"
+    "message": "Enter a Session ID"
   },
   "usersCanShareTheir...": {
     "message": "Users can share their Session ID from their account settings, or by sharing their QR code."
@@ -2604,10 +2604,10 @@
     "message": "Secret words"
   },
   "pairingDevice": {
-    "message": "Pairing Device"
+    "message": "Linking Device"
   },
   "gotPairingRequest": {
-    "message": "Pairing request received"
+    "message": "Linking request received"
   },
   "devicePairedSuccessfully": {
     "message": "Device linked successfully"

stylesheets/_conversation.scss

@@ -5,7 +5,6 @@
 
   .panel,
   .panel-wrapper {
-    height: calc(100% - #{$header-height});
     overflow-y: scroll;
   }
 
@@ -22,9 +21,16 @@
   .panel-wrapper {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     overflow: initial;
   }
 
+  .conversation-content-left {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
   .main.panel {
     .discussion-container {
       flex-grow: 1;

stylesheets/_session.scss

@@ -1350,6 +1350,16 @@ label {
   overflow: hidden;
   user-select: all;
   overflow-y: auto;
+  padding: 0px 5px 20px 5px;
+
+  &.session-id-editable-textarea:placeholder-shown {
+    padding: 20px 5px 0px 5px;
+  }
+
+  &.group-id-editable-textarea {
+    margin-top: 15px;
+    white-space: nowrap;
+  }
 }
 
 input {
@@ -1594,6 +1604,10 @@ input {
   }
 }
 .create-group-name-input {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
   .session-id-editable {
     height: 60px !important;
 

stylesheets/_session_left_pane.scss

@@ -238,9 +238,11 @@ $session-compose-margin: 20px;
     box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     align-items: center;
     overflow-y: auto;
     overflow-x: hidden;
+
     .session-icon .exit {
       padding: 13px;
     }
@@ -307,6 +309,8 @@ $session-compose-margin: 20px;
     }
 
     .session-id-editable {
+      width: 90%;
+
       textarea::-webkit-inner-spin-button {
         margin: 0px 20px;
         width: -webkit-fill-available;

ts/components/session/SessionClosableOverlay.tsx

@@ -196,6 +196,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
               editable={!noContactsForClosedGroup}
               placeholder={placeholder}
               value={groupName}
+              isGroup={true}
               maxLength={window.CONSTANTS.MAX_GROUPNAME_LENGTH}
               onChange={this.onGroupNameChanged}
               onPressEnter={() => onButtonClick(groupName, selectedMembers)}

ts/components/session/SessionGroupSettings.tsx

@@ -322,7 +322,7 @@ export class SessionGroupSettings extends React.Component<Props, any> {
         <SessionIconButton
           iconType={SessionIconType.Chevron}
           iconSize={SessionIconSize.Medium}
-          iconRotation={90}
+          iconRotation={270}
           onClick={onGoBack}
         />
         <Avatar

ts/components/session/SessionIdEditable.tsx

@@ -9,6 +9,7 @@ interface Props {
   onChange?: any;
   onPressEnter?: any;
   maxLength?: number;
+  isGroup?: boolean;
 }
 
 export class SessionIdEditable extends React.PureComponent<Props> {
@@ -28,7 +29,14 @@ export class SessionIdEditable extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { placeholder, editable, text, value, maxLength } = this.props;
+    const {
+      placeholder,
+      editable,
+      text,
+      value,
+      maxLength,
+      isGroup,
+    } = this.props;
 
     return (
       <div
@@ -38,7 +46,11 @@ export class SessionIdEditable extends React.PureComponent<Props> {
         )}
       >
         <textarea
-          className="session-id-editable-textarea"
+          className={classNames(
+            isGroup
+              ? 'group-id-editable-textarea'
+              : 'session-id-editable-textarea'
+          )}
           ref={this.inputRef}
           placeholder={placeholder}
           disabled={!editable}

ts/components/session/settings/SessionSettings.tsx

@@ -10,6 +10,7 @@ import {
 import { UserUtil } from '../../../util';
 import { MultiDeviceProtocol } from '../../../session/protocols';
 import { PubKey } from '../../../session/types';
+import { NumberUtils } from '../../../session/utils';
 
 export enum SessionSettingCategory {
   Appearance = 'appearance',
@@ -441,7 +442,13 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         id: 'message-ttl',
         title: window.i18n('messageTTL'),
         description: window.i18n('messageTTLSettingDescription'),
-        hidden: false,
+        // TODO: Revert
+        // TTL set to 2 days for mobile push notification compabability
+        // temporary fix .t 13/07/2020
+        //
+        // TODO: Hook up this TTL to message sending when re-enabling.
+        // This setting is not used in any libsession sending code
+        hidden: true,
         type: SessionSettingType.Slider,
         category: SessionSettingCategory.Privacy,
         setFn: undefined,
@@ -452,7 +459,10 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
           step: 6,
           min: 12,
           max: 96,
-          defaultValue: 24,
+          defaultValue: NumberUtils.msAsUnit(
+            window.CONSTANTS.TTL_DEFAULT_REGULAR_MESSAGE,
+            'hour'
+          ),
           info: (value: number) => `${value} Hours`,
         },
         confirmationDialogParams: undefined,