move the enter session editable to a custom component

js/views/session_registration_view.js

@@ -121,7 +121,7 @@
   window.Session = window.Session || {};
 
   window.Session.setNewSessionID = sessionID => {
-    const el = document.querySelector('.session-signin-enter-session-id');
+    const el = document.querySelector('.session-id-editable');
     const fx = new TextScramble(el);
     el.innerHTML = sessionID;
     fx.setText(sessionID);

stylesheets/_session_signin.scss

@@ -220,9 +220,9 @@
     line-height: 20px;
   }
 
-  &-signin-enter-session-id {
+  &-id-editable {
     height: 94px;
-    width: 289px;
+    width: 100%;
     border-radius: 8px;
     border: 2px solid $session-color-dark-grey;
     outline: 0;
@@ -242,4 +242,5 @@
 [contenteditable='true']:empty::before {
   content: attr(placeholder);
   color: $session-color-light-grey;
+  font-size: 13px;
 }

ts/components/session/LeftPaneMessageSection.tsx

@@ -14,6 +14,8 @@ import { SessionConversationSearch } from './SessionConversationSearch';
 import { debounce } from 'lodash';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { SearchOptions } from '../../types/Search';
+import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+import { SessionIdEditable } from './SessionIdEditable';
 
 export interface Props {
   searchTerm: string;

ts/components/session/RegistrationTabs.tsx

@@ -9,6 +9,7 @@ import {
 } from './SessionButton';
 import { trigger } from '../../shims/events';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
+import { SessionIdEditable } from './SessionIdEditable';
 
 enum SignInMode {
   Default,
@@ -442,14 +443,11 @@ export class RegistrationTabs extends React.Component<{}, State> {
     const enterSessionIDHere = window.i18n('enterSessionIDHere');
 
     return (
-      <div
-        className="session-signin-enter-session-id"
+      <SessionIdEditable
+        editable={contentEditable}
         placeholder={enterSessionIDHere}
-        contentEditable={contentEditable}
-        onInput={(e: any) => {
-          if (contentEditable) {
-            this.onSecondDeviceSessionIDChanged(e);
-          }
+        onChange={(e: any) => {
+          this.onSecondDeviceSessionIDChanged(e);
         }}
       />
     );

ts/components/session/SessionIdEditable.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+
+interface Props {
+    placeholder: string;
+    editable?: boolean;
+    onChange?: any;
+}
+
+
+export class SessionIdEditable extends React.PureComponent<Props> {
+
+    public render() {
+        const { placeholder, editable, onChange } = this.props;
+
+        return (
+            <div
+                className="session-id-editable"
+                placeholder={placeholder}
+                contentEditable={editable}
+                onInput={(e: any) => {
+                    if (editable) {
+                        onChange(e);
+                    }
+                }}
+            />
+        );
+    }
+}