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] 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;