From 506b55bfe232f52a5160cee499c726f934562d84 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Mon, 13 Jul 2020 15:31:46 +1000
Subject: [PATCH] session-id-editable

---
 _locales/en/messages.json                        |  2 +-
 stylesheets/_session.scss                        | 14 ++++++++++++++
 stylesheets/_session_left_pane.scss              |  4 ++++
 ts/components/session/SessionClosableOverlay.tsx |  1 +
 ts/components/session/SessionIdEditable.tsx      |  6 ++++--
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 221572ebb..e47117dd9 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -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"
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 79fcac46e..e92145d17 100644
--- a/stylesheets/_session.scss
+++ b/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;
 
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index b45426787..a5ed85e82 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/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;
diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx
index a6ca82b3e..749143d7e 100644
--- a/ts/components/session/SessionClosableOverlay.tsx
+++ b/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)}
diff --git a/ts/components/session/SessionIdEditable.tsx b/ts/components/session/SessionIdEditable.tsx
index e2d43024c..e2a6cd134 100644
--- a/ts/components/session/SessionIdEditable.tsx
+++ b/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,7 @@ 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 +39,8 @@ 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}