From 341c5e4ed84e11cfa68b5235453ae44283e2b244 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Mon, 3 Dec 2018 13:31:43 +1100
Subject: [PATCH 1/8] Updated nickname display modal.

---
 stylesheets/_conversation.scss                | 24 ++++++++++++-------
 stylesheets/_modules.scss                     |  1 +
 stylesheets/_variables.scss                   |  1 +
 .../conversation/ConversationHeader.tsx       |  2 +-
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 8c9c8f669..85d374b97 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -368,19 +368,20 @@
     box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
 
     .buttons {
-      margin-top: 10px;
 
       button {
         float: right;
         margin-left: 10px;
-        background-color: $grey_l;
-        border-radius: $border-radius;
-        padding: 5px 8px;
-        border: 1px solid $grey_l2;
+        background-color: $color-loki-green;
+        border-radius: 100px;
+        padding: 5px 15px;
+        border: 1px solid $color-loki-green;
+        color: white;
+        outline: none;
 
         &:hover {
-          background-color: $grey_l2;
-          border-color: $grey_l3;
+          background-color: $color-loki-green-dark;
+          border-color: $color-loki-green-dark;
         }
       }
     }
@@ -388,10 +389,16 @@
     input {
       width: 100%;
       padding: 8px;
-      margin-bottom: 4px;
+      margin-bottom: 15px;
+      border: 0;
+      outline: none;
+      border-radius: 100px;
+      background-color: $color-loki-light-gray;
     }
 
     h4 {
+      margin-top: 8px;
+      margin-bottom: 16px;
       white-space: -moz-pre-wrap; /* Mozilla */
       white-space: -hp-pre-wrap; /* HP printers */
       white-space: -o-pre-wrap; /* Opera 7 */
@@ -406,6 +413,7 @@
       font-style: italic;
       color: $grey;
       font-size: 12px;
+      margin-bottom: 16px;
     }
   }
 }
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 2e534ab57..75cab2bed 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -6,6 +6,7 @@
   flex-direction: column;
   align-items: flex-start;
   margin-right: 8px;
+  overflow-x: hidden;
 }
 
 .module-contact-name span {
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 98236c7d8..3d0ba7ba7 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -30,6 +30,7 @@ $color-loki-light-gray: #e9e9e9;
 $color-loki-dark-gray: #323232;
 $color-loki-extra-dark-gray: #101010;
 $color-loki-green: #3bd110;
+$color-loki-green-dark: #32b10e;
 
 // New colors
 
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 490fd541e..5dfd089ee 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -107,7 +107,7 @@ export class ConversationHeader extends React.Component<Props> {
           profileName={profileName}
           i18n={i18n}
         />
-        {isKeysPending ? ' (pending)' : null}
+        {isKeysPending ? '(pending)' : null}
       </div>
     );
   }

From d686783124b139f8bf6b94e594ed73976189839c Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Mon, 3 Dec 2018 16:18:39 +1100
Subject: [PATCH 2/8] Fix minor icon clipping. Disable text highlighting on
 header.

---
 stylesheets/_modules.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 75cab2bed..02636da2c 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -14,6 +14,7 @@
   overflow-x: hidden;
   width: 100%;
   text-align: left;
+  user-select: none;
 }
 
 .module-contact-name__profile-number {
@@ -1980,9 +1981,9 @@
 .module-conversation-list-item__message__status-icon {
   flex-shrink: 0;
 
-  margin-top: 2px;
+  margin-top: 1px;
   width: 12px;
-  height: 12px;
+  height: 13px;
   display: inline-block;
   margin-left: 6px;
 }
@@ -2199,7 +2200,7 @@
   div {
     padding: 12px;
     background-color: $color-dark-90;
-
+    user-select: none;
     cursor: pointer;
 
     &:hover {

From 89a19fd09b099f4140830c210de17169478d5142 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Tue, 4 Dec 2018 11:25:57 +1100
Subject: [PATCH 3/8] Added accordian style to registration view

---
 background.html                          | 28 +++++++--------
 js/views/standalone_registration_view.js | 16 +++++++++
 stylesheets/_global.scss                 | 44 +++++++++++++++++++-----
 3 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/background.html b/background.html
index d011f79f9..9c9331478 100644
--- a/background.html
+++ b/background.html
@@ -598,27 +598,27 @@
   </script>
 
   <script type='text/x-tmpl-mustache' id='standalone'>
-    <div class='step'>
+    <div id='standalone' class='step'>
       <div class='inner'>
         <div class='step-body'>
           <div class='header'>Create your Loki Messenger Account</div>
 
-          <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
-
-          <hr>
-          <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false'>
+          <input class='form-control' type='text' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
-          <select id='mnemonic-language'></select>
-
-          <div class='clearfix'>
+          <h4 class='section-toggle'>Register using Mnenomic</h4>
+          <div class='standalone-mnemonic section-content'>
+            <div class='standalone-mnemonic-inputs'>
+              <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false' />
+              <select id='mnemonic-language'></select>
+            </div>
             <a class='button' id='register-mnemonic'>Register using mnenomic</a>
+            <div id='error' class='collapse'></div>
+            <div id=status></div>
+          </div>
+          <h4 class='section-toggle section-toggle-visible'>Register</h4>
+          <div class='standalone-register section-content'>
+            <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
           </div>
-          <div id='error' class='collapse'></div>
-          <div id=status></div>
-          <hr>
-        </div>
-        <div class='nav'>
-          <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
         </div>
       </div>
     </div>
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 4bf69cc80..1e6257a1b 100644
--- a/js/views/standalone_registration_view.js
+++ b/js/views/standalone_registration_view.js
@@ -25,6 +25,8 @@
       });
       this.$('#error').hide();
 
+      this.$('.standalone-mnemonic').hide();
+
       window.mnemonic.get_languages().forEach(language => {
         this.$('#mnemonic-language').append(
           $('<option>', {
@@ -42,6 +44,7 @@
       'click #register': 'register',
       'click #register-mnemonic': 'registerWithMnemonic',
       'change #mnemonic': 'onChangeMnemonic',
+      'click .section-toggle': 'toggleSection',
     },
     register() {
       this.accountManager
@@ -121,5 +124,18 @@
         this.$('#number-container').addClass('invalid');
       }
     },
+    toggleSection(e) {
+      // Expand or collapse this panel
+      const $target = this.$(e.target);
+      const $next = $target.next();
+
+      // Toggle section visibility
+      $next.slideToggle('fast');
+      $target.toggleClass('section-toggle-visible');
+
+      // Hide the other sections
+      this.$('.section-toggle').not($target).removeClass('section-toggle-visible')
+      this.$('.section-content').not($next).slideUp('fast');
+    },
   });
 })();
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 1483bfe0d..5fa3c97fa 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -533,7 +533,7 @@ textarea {
 
   font-size: 10pt;
   input {
-    margin-top: 1em;
+    margin-bottom: 1em;
     font-size: 12pt;
     font-family: roboto-light;
     border: 2px solid $blue;
@@ -647,10 +647,6 @@ textarea {
     max-width: 35em;
   }
 
-  #display-name {
-    margin-bottom: 12px;
-  }
-
   .inner {
     display: flex;
     align-items: center;
@@ -723,9 +719,6 @@ textarea {
     border: none;
     min-width: 300px;
     padding: 0.75em;
-    margin-top: 1em;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
     color: white;
     background: $blue;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
@@ -806,6 +799,41 @@ textarea {
   }
 }
 
+#standalone {
+  .step-body {
+    width: 80%;
+    min-width: 100px;
+    max-width: none;
+  }
+
+  .section-toggle {
+    background: $color-gray-05;
+  }
+
+  .section-content {
+    padding: 1em 0;
+    background-color: $color-gray-02;
+  }
+
+  #status {
+    margin-top: 12px;
+  }
+
+  .standalone-mnemonic-inputs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 1em 12px;
+    margin-top: 0;
+
+    input {
+      flex: 1;
+      margin: 0;
+      margin-right: 12px;
+    }
+  }
+}
+
 //yellow border fix
 .inbox:focus {
   outline: none;

From 85298012e46402972348fbfdf7e755c3ead34fca Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Tue, 4 Dec 2018 12:20:17 +1100
Subject: [PATCH 4/8] Added generation of seed in registration.

---
 _locales/en/messages.json                |  5 ++++
 background.html                          | 11 ++++++--
 js/views/standalone_registration_view.js | 35 +++++++++++++++++++-----
 libtextsecure/account_manager.js         |  7 ++++-
 stylesheets/_global.scss                 | 11 ++++++--
 5 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 15c65f464..f079b38d0 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1669,5 +1669,10 @@
   "editDisplayName": {
     "message": "Edit display name",
     "description": "Button action that the user can click to edit their display name"
+  },
+
+  "copiedMnemonic": {
+    "message": "Copied mnemonic to clipboard",
+    "description": "A toast message telling the user that the mnemonic was copied"
   }
 }
diff --git a/background.html b/background.html
index 9c9331478..15d645a49 100644
--- a/background.html
+++ b/background.html
@@ -603,7 +603,7 @@
         <div class='step-body'>
           <div class='header'>Create your Loki Messenger Account</div>
 
-          <input class='form-control' type='text' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
+          <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
           <h4 class='section-toggle'>Register using Mnenomic</h4>
           <div class='standalone-mnemonic section-content'>
@@ -611,13 +611,18 @@
               <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false' />
               <select id='mnemonic-language'></select>
             </div>
-            <a class='button' id='register-mnemonic'>Register using mnenomic</a>
+            <a class='button' id='register-mnemonic'>Register</a>
             <div id='error' class='collapse'></div>
             <div id=status></div>
           </div>
           <h4 class='section-toggle section-toggle-visible'>Register</h4>
           <div class='standalone-register section-content'>
-            <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
+            <div id='mnemonic-display' />
+            <div class='standalone-register-buttons'>
+              <a class='button' id='generate-mnemonic'>Generate Mnemonic</a>
+              <a class='button' id='copy-mnemonic'>Copy Mnemonic</a>
+              <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 1e6257a1b..44a98181d 100644
--- a/js/views/standalone_registration_view.js
+++ b/js/views/standalone_registration_view.js
@@ -1,4 +1,4 @@
-/* global Whisper, $, getAccountManager, textsecure, storage, ConversationController */
+/* global Whisper, $, getAccountManager, textsecure, i18n, storage, ConversationController */
 
 /* eslint-disable more/no-then */
 
@@ -27,6 +27,8 @@
 
       this.$('.standalone-mnemonic').hide();
 
+      this.onGenerateMnemonic();
+
       window.mnemonic.get_languages().forEach(language => {
         this.$('#mnemonic-language').append(
           $('<option>', {
@@ -41,15 +43,17 @@
       'click #request-voice': 'requestVoice',
       'click #request-sms': 'requestSMSVerification',
       'change #code': 'onChangeCode',
-      'click #register': 'register',
+      'click #register': 'registerWithoutMnemonic',
       'click #register-mnemonic': 'registerWithMnemonic',
       'change #mnemonic': 'onChangeMnemonic',
+      'click #generate-mnemonic': 'onGenerateMnemonic',
+      'click #copy-mnemonic': 'onCopyMnemonic',
       'click .section-toggle': 'toggleSection',
     },
-    register() {
+    register(mnemonic) {
       this.accountManager
         .registerSingleDevice(
-          this.$('#mnemonic').val(),
+          mnemonic,
           this.$('#mnemonic-language').val(),
           this.$('#display-name').val()
         )
@@ -58,17 +62,34 @@
         })
         .catch(this.log.bind(this));
     },
+    registerWithoutMnemonic() {
+      const mnemonic = this.$('#mnemonic-display').text();
+      this.register(mnemonic);
+    },
     registerWithMnemonic() {
-      const words = this.$('#mnemonic').val();
-      if (!words) {
+      const mnemonic = this.$('#mnemonic').val();
+      if (!mnemonic) {
         this.log('Please provide a mnemonic word list');
       } else {
-        this.register();
+        this.register(mnemonic);
       }
     },
     onChangeMnemonic() {
       this.$('#status').html('');
     },
+    async onGenerateMnemonic() {
+      const mnemonic = await this.accountManager.generateMnemonic();
+      this.$('#mnemonic-display').text(mnemonic)
+    },
+    onCopyMnemonic() {
+      window.clipboard.writeText(this.$('#mnemonic-display').text());
+
+      const toast = new Whisper.MessageToastView({
+        message: i18n('copiedMnemonic'),
+      });
+      toast.$el.appendTo(this.$el);
+      toast.render();
+    },
     log(s) {
       window.log.info(s);
       this.$('#status').text(s);
diff --git a/libtextsecure/account_manager.js b/libtextsecure/account_manager.js
index 0feda293d..6c88ea9eb 100644
--- a/libtextsecure/account_manager.js
+++ b/libtextsecure/account_manager.js
@@ -2,7 +2,7 @@
   window,
   textsecure,
   libsignal,
-  WebSocketResource,
+  mnemonic,
   btoa,
   getString,
   Event,
@@ -446,6 +446,11 @@
         );
       });
     },
+    async generateMnemonic() {
+      const keys = await libsignal.KeyHelper.generateIdentityKeyPair();
+      const hex = StringView.arrayBufferToHex(keys.privKey);
+      return mnemonic.mn_encode(hex);
+    },
     async registrationDone(number, profileName) {
       window.log.info('registration done');
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 5fa3c97fa..402a60786 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -722,8 +722,9 @@ textarea {
     color: white;
     background: $blue;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-
+    user-select: none;
     font-size: 12pt;
+    margin-top: 4px;
 
     &.neutral {
       color: black;
@@ -823,7 +824,7 @@ textarea {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 1em 12px;
+    margin: 1em 8px;
     margin-top: 0;
 
     input {
@@ -832,6 +833,12 @@ textarea {
       margin-right: 12px;
     }
   }
+
+  #mnemonic-display {
+    margin: 8px;
+    margin-top: 0;
+    font-size: 16px;
+  }
 }
 
 //yellow border fix

From 8c78a78b41e5dd2128580b28d3244dc9771eb947 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Tue, 4 Dec 2018 13:31:51 +1100
Subject: [PATCH 5/8] Converted to dark theme.

---
 background.html                          |  4 ++--
 js/views/standalone_registration_view.js |  2 +-
 stylesheets/_global.scss                 | 30 ++++++++++++++++++++++--
 stylesheets/_variables.scss              |  1 +
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/background.html b/background.html
index 15d645a49..94b479435 100644
--- a/background.html
+++ b/background.html
@@ -605,7 +605,7 @@
 
           <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
-          <h4 class='section-toggle'>Register using Mnenomic</h4>
+          <h4 class='section-toggle'>Register using mnenomic</h4>
           <div class='standalone-mnemonic section-content'>
             <div class='standalone-mnemonic-inputs'>
               <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false' />
@@ -615,7 +615,7 @@
             <div id='error' class='collapse'></div>
             <div id=status></div>
           </div>
-          <h4 class='section-toggle section-toggle-visible'>Register</h4>
+          <h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
           <div class='standalone-register section-content'>
             <div id='mnemonic-display' />
             <div class='standalone-register-buttons'>
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 44a98181d..248091681 100644
--- a/js/views/standalone_registration_view.js
+++ b/js/views/standalone_registration_view.js
@@ -10,7 +10,7 @@
 
   Whisper.StandaloneRegistrationView = Whisper.View.extend({
     templateName: 'standalone',
-    className: 'full-screen-flow',
+    className: 'full-screen-flow standalone-fullscreen',
     initialize() {
       this.accountManager = getAccountManager();
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 402a60786..49aad94e2 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -800,7 +800,22 @@ textarea {
   }
 }
 
+.standalone-fullscreen {
+  background: $color-dark-85;
+}
+
 #standalone {
+  color: $color-dark-05;
+  height: auto;
+
+  ::-webkit-scrollbar-track {
+    background: $color-dark-85;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid $color-dark-85;
+  }
+
   .step-body {
     width: 80%;
     min-width: 100px;
@@ -808,12 +823,12 @@ textarea {
   }
 
   .section-toggle {
-    background: $color-gray-05;
+    background: $color-dark-75;
   }
 
   .section-content {
     padding: 1em 0;
-    background-color: $color-gray-02;
+    background-color: $color-dark-72;
   }
 
   #status {
@@ -834,10 +849,21 @@ textarea {
     }
   }
 
+  input {
+    border: 1px solid $color-light-60;
+    color: $color-dark-05;
+    background-color: $color-gray-95;
+
+    &:focus {
+      outline: solid 1px $blue;
+    }
+  }
+
   #mnemonic-display {
     margin: 8px;
     margin-top: 0;
     font-size: 16px;
+    font-style: italic;
   }
 }
 
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 3d0ba7ba7..a07d35b5b 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -114,6 +114,7 @@ $color-dark-30: #a8a9aa;
 $color-dark-55: #88898c;
 $color-dark-60: #797a7c;
 $color-dark-70: #414347;
+$color-dark-72: #31343c;
 $color-dark-75: #292c33;
 $color-dark-85: #1a1c20;
 $color-dark-90: #121417;

From 53194e057af72ee553e773dc1a29bfb6b11aa6de Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Tue, 4 Dec 2018 13:48:36 +1100
Subject: [PATCH 6/8] Added mnemonic warning.

---
 background.html          |  6 ++++++
 stylesheets/_global.scss | 34 ++++++++++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/background.html b/background.html
index 94b479435..7ffa8a138 100644
--- a/background.html
+++ b/background.html
@@ -603,6 +603,7 @@
         <div class='step-body'>
           <div class='header'>Create your Loki Messenger Account</div>
 
+          <div class='display-name-header'>Enter a name that will be shown to all your contacts</div>
           <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
           <h4 class='section-toggle'>Register using mnenomic</h4>
@@ -617,6 +618,11 @@
           </div>
           <h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
           <div class='standalone-register section-content'>
+            <div class='standalone-register-warning'>
+              Please save the mnemonic words below in a safe location.
+              </br>
+              They can be used to restore your account if you lose access or migrate to a new device.
+            </div>
             <div id='mnemonic-display' />
             <div class='standalone-register-buttons'>
               <a class='button' id='generate-mnemonic'>Generate Mnemonic</a>
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 49aad94e2..c13cc6093 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -802,11 +802,13 @@ textarea {
 
 .standalone-fullscreen {
   background: $color-dark-85;
+  overflow-y: auto;
 }
 
 #standalone {
   color: $color-dark-05;
   height: auto;
+  padding: 0;
 
   ::-webkit-scrollbar-track {
     background: $color-dark-85;
@@ -860,11 +862,39 @@ textarea {
   }
 
   #mnemonic-display {
-    margin: 8px;
-    margin-top: 0;
+    margin: 2em 8px;
     font-size: 16px;
     font-style: italic;
   }
+
+  .standalone-register-warning {
+    font-weight: bold;
+    font-size: 16px;
+    margin: 0px 8px;
+  }
+
+  .display-name-header {
+    margin-bottom: 8px;
+    font-size: 14px;
+  }
+
+  #generate-mnemonic, #copy-mnemonic {
+    background: $grey;
+  }
+
+  @media (min-height: 750px) and (min-width: 700px) {
+    .display-name-header {
+      font-size: 18px;
+    }
+
+    .standalone-register-warning {
+      font-size: 20px;
+    }
+
+    #mnemonic-display {
+      font-size: 20px;
+    }
+  }
 }
 
 //yellow border fix

From cea78d1f9855c966b2d0872c71bb5bb261f93533 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Wed, 5 Dec 2018 09:40:34 +1100
Subject: [PATCH 7/8] Updated styling. Reworded descriptions and titles.

---
 background.html                | 16 ++++---
 stylesheets/_conversation.scss |  4 +-
 stylesheets/_global.scss       | 84 +++++++++++++++++++++++++++++++++-
 stylesheets/_variables.scss    |  1 +
 4 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/background.html b/background.html
index 7ffa8a138..59bd31eaa 100644
--- a/background.html
+++ b/background.html
@@ -606,27 +606,29 @@
           <div class='display-name-header'>Enter a name that will be shown to all your contacts</div>
           <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
-          <h4 class='section-toggle'>Register using mnenomic</h4>
+          <h4 class='section-toggle'>Restore using seed</h4>
           <div class='standalone-mnemonic section-content'>
             <div class='standalone-mnemonic-inputs'>
-              <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false' />
-              <select id='mnemonic-language'></select>
+              <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic Seed' autocomplete='off' spellcheck='false' />
+              <div class='select-container'>
+                <select id='mnemonic-language'></select>
+              </div>
             </div>
-            <a class='button' id='register-mnemonic'>Register</a>
+            <a class='button' id='register-mnemonic'>Restore</a>
             <div id='error' class='collapse'></div>
             <div id=status></div>
           </div>
           <h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
           <div class='standalone-register section-content'>
             <div class='standalone-register-warning'>
-              Please save the mnemonic words below in a safe location.
+              Please save the seed below in a safe location.
               </br>
               They can be used to restore your account if you lose access or migrate to a new device.
             </div>
             <div id='mnemonic-display' />
             <div class='standalone-register-buttons'>
-              <a class='button' id='generate-mnemonic'>Generate Mnemonic</a>
-              <a class='button' id='copy-mnemonic'>Copy Mnemonic</a>
+              <a class='button' id='generate-mnemonic'>Generate Seed</a>
+              <a class='button' id='copy-mnemonic'>Copy Seed</a>
               <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
             </div>
           </div>
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 85d374b97..bfda09310 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -276,7 +276,7 @@
     display: block;
     max-height: 100px;
     padding: 10px;
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: $color-loki-light-gray;
     color: $color-light-90;
     border: 1px solid rgba(0, 0, 0, 0.2);
@@ -392,7 +392,7 @@
       margin-bottom: 15px;
       border: 0;
       outline: none;
-      border-radius: 100px;
+      border-radius: 4px;
       background-color: $color-loki-light-gray;
     }
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index c13cc6093..d761d3012 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -826,11 +826,38 @@ textarea {
 
   .section-toggle {
     background: $color-dark-75;
+
+    &:first-of-type {
+      border-radius: 8px 8px 0 0;
+    }
+
+    &:last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+  }
+
+  .section-toggle-visible:last-of-type {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .section-content {
     padding: 1em 0;
     background-color: $color-dark-72;
+
+    &:last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+  }
+
+  #display-name {
+    font-weight: bold;
+    font-size: 25px;
+    border-radius: 100px;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   #status {
@@ -853,14 +880,18 @@ textarea {
 
   input {
     border: 1px solid $color-light-60;
-    color: $color-dark-05;
-    background-color: $color-gray-95;
+    border-radius: 4px;
 
     &:focus {
       outline: solid 1px $blue;
     }
   }
 
+  .button {
+    background: $color-loki-green-gradient;
+    border-radius: 100px;
+  }
+
   #mnemonic-display {
     margin: 2em 8px;
     font-size: 16px;
@@ -882,6 +913,55 @@ textarea {
     background: $grey;
   }
 
+  .select-container {
+    position: relative;
+    display: block;
+    width: 10em;
+    line-height: 2.8;
+    background: white;
+    overflow: hidden;
+    border-radius: .25em;
+
+    select {
+      // Reset select
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      -ms-appearance: none;
+      appearance: none;
+      outline: 0;
+      box-shadow: none;
+      border: 0 !important;
+      background: white;
+      background-image: none;
+
+      // Our own stlying
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0 0 0 .5em;
+      color: black;
+      cursor: pointer;
+
+      ::-ms-expand {
+        display: none;
+      }
+    }
+
+    &:after {
+      content: '\25BC';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      padding: 0 1em;
+      background: $color-dark-85;
+      pointer-events: none;
+      -webkit-transition: .25s all ease;
+      -o-transition: .25s all ease;
+      transition: .25s all ease;
+    }
+  }
+
   @media (min-height: 750px) and (min-width: 700px) {
     .display-name-header {
       font-size: 18px;
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index a07d35b5b..2d35849df 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -31,6 +31,7 @@ $color-loki-dark-gray: #323232;
 $color-loki-extra-dark-gray: #101010;
 $color-loki-green: #3bd110;
 $color-loki-green-dark: #32b10e;
+$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
 
 // New colors
 

From 62c802445b14d9ab6a0e026c73df19e1554fc2ee Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Wed, 5 Dec 2018 12:03:40 +1100
Subject: [PATCH 8/8] Allow generating mnemonic for different languages.

---
 background.html                          |  6 ++++++
 js/views/standalone_registration_view.js | 16 ++++++++--------
 libtextsecure/account_manager.js         |  4 ++--
 stylesheets/_global.scss                 | 11 +++++++++++
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/background.html b/background.html
index 59bd31eaa..5e8457eb6 100644
--- a/background.html
+++ b/background.html
@@ -625,6 +625,12 @@
               </br>
               They can be used to restore your account if you lose access or migrate to a new device.
             </div>
+            <div class='standalone-register-language'>
+              <span>Language:</span>
+              <div class='select-container'>
+                <select id='mnemonic-display-language'></select>
+              </div>
+            </div>
             <div id='mnemonic-display' />
             <div class='standalone-register-buttons'>
               <a class='button' id='generate-mnemonic'>Generate Seed</a>
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 248091681..b2eee33c6 100644
--- a/js/views/standalone_registration_view.js
+++ b/js/views/standalone_registration_view.js
@@ -29,14 +29,12 @@
 
       this.onGenerateMnemonic();
 
-      window.mnemonic.get_languages().forEach(language => {
-        this.$('#mnemonic-language').append(
-          $('<option>', {
-            value: language,
-            text: language.charAt(0).toUpperCase() + language.slice(1),
-          })
-        );
+      const options = window.mnemonic.get_languages().map(language => {
+        const text = language.charAt(0).toUpperCase() + language.slice(1);
+        return `<option value="${language}">${text}</option>`;
       });
+      this.$('#mnemonic-language').append(options);
+      this.$('#mnemonic-display-language').append(options);
     },
     events: {
       'validation input.number': 'onValidation',
@@ -47,6 +45,7 @@
       'click #register-mnemonic': 'registerWithMnemonic',
       'change #mnemonic': 'onChangeMnemonic',
       'click #generate-mnemonic': 'onGenerateMnemonic',
+      'change #mnemonic-display-language': 'onGenerateMnemonic',
       'click #copy-mnemonic': 'onCopyMnemonic',
       'click .section-toggle': 'toggleSection',
     },
@@ -78,7 +77,8 @@
       this.$('#status').html('');
     },
     async onGenerateMnemonic() {
-      const mnemonic = await this.accountManager.generateMnemonic();
+      const language = this.$('#mnemonic-display-language').val();
+      const mnemonic = await this.accountManager.generateMnemonic(language);
       this.$('#mnemonic-display').text(mnemonic)
     },
     onCopyMnemonic() {
diff --git a/libtextsecure/account_manager.js b/libtextsecure/account_manager.js
index 6c88ea9eb..7795a4a61 100644
--- a/libtextsecure/account_manager.js
+++ b/libtextsecure/account_manager.js
@@ -446,10 +446,10 @@
         );
       });
     },
-    async generateMnemonic() {
+    async generateMnemonic(language = 'english') {
       const keys = await libsignal.KeyHelper.generateIdentityKeyPair();
       const hex = StringView.arrayBufferToHex(keys.privKey);
-      return mnemonic.mn_encode(hex);
+      return mnemonic.mn_encode(hex, language);
     },
     async registrationDone(number, profileName) {
       window.log.info('registration done');
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index d761d3012..12152f21c 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -904,6 +904,17 @@ textarea {
     margin: 0px 8px;
   }
 
+  .standalone-register-language {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2em;
+
+    span {
+      margin-right: 8px;
+    }
+  }
+
   .display-name-header {
     margin-bottom: 8px;
     font-size: 14px;