dark theme tweaks

src/app/accounts/lock.component.html

@@ -22,7 +22,7 @@
         </div>
         <div class="buttons">
             <button type="submit" class="btn primary block" appBlurClick>
-                <i class="fa fa-unlock-alt"></i> {{'unlock' | i18n}}
+                <i class="fa fa-unlock-alt"></i> <b>{{'unlock' | i18n}}</b>
             </button>
             <button type="button" class="btn block" appBlurClick (click)="logOut()">
                 {{'logOut' | i18n}}

src/app/accounts/login.component.html

@@ -1,6 +1,6 @@
 <form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <div class="content">
-        <img src="../../images/logo@2x.png" alt="bitwarden">
+        <img class="logo-image" alt="Bitwarden">
         <p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
         <div class="box last">
             <div class="box-content">
@@ -27,7 +27,7 @@
         </div>
         <div class="buttons">
             <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
-                <span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
+                <b [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</b>
                 <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
             </button>
             <a routerLink="/register" class="btn block">

src/app/accounts/settings.component.ts

@@ -121,6 +121,7 @@ export class SettingsComponent implements OnInit {
     async saveTheme() {
         await this.storageService.save(ConstantsService.themeKey, this.theme);
         this.analytics.eventTrack.next({ action: 'Set Theme ' + this.theme });
+        window.setTimeout(() => window.location.reload(), 200);
     }
 
     private callAnalytics(name: string, enabled: boolean) {

src/app/services.module.ts

@@ -105,7 +105,7 @@ const authService = new AuthService(cryptoService, apiService,
 const exportService = new ExportService(folderService, cipherService);
 const auditService = new AuditService(cryptoFunctionService);
 
-const analytics = new Analytics(window, () => isDev(), platformUtilsService, storageService, appIdService);
+const analytics = new Analytics(window, () => false, platformUtilsService, storageService, appIdService);
 containerService.attachToWindow(window);
 environmentService.setUrlsFromStorage().then(() => {
     return syncService.fullSync(true);

src/app/vault/vault.component.html

@@ -34,7 +34,7 @@
     <div id="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view'">
         <div class="content">
             <div class="inner-content">
-                <img src="../../images/logo@2x.png" />
+                <img class="logo-image" />
             </div>
         </div>
     </div>

src/locales/en/messages.json

@@ -792,7 +792,7 @@
     "message": "Theme"
   },
   "themeDesc": {
-    "message": "Change the application's color theme. Restart is required."
+    "message": "Change the application's color theme."
   },
   "dark": {
     "message": "Dark",

src/scss/base.scss

@@ -14,6 +14,9 @@ html, body {
 }
 
 body {
+    color: $text-color;
+    background-color: $background-color-alt2;
+
     @include themify($themes) {
         color: themed('textColor');
         background-color: themed('backgroundColorAlt2');

src/scss/misc.scss

@@ -206,8 +206,15 @@ app-root > #loading {
     align-items: center;
     height: 100%;
     width: 100%;
+    color: $text-muted;
 
     @include themify($themes) {
         color: themed('mutedColor');
     }
 }
+
+.logo-image {
+    @include themify($themes) {
+        content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
+    }
+}

src/scss/pages.scss

@@ -18,7 +18,7 @@
 
     img {
         margin: 0 auto 15px;
-        width: 282px;
+        width: 284px;
         display: block;
     }
 }

src/scss/variables.scss

@@ -79,6 +79,7 @@ $themes: (
         successColor: $brand-success,
         infoColor: $brand-info,
         warningColor: $brand-warning,
+        logoSuffix: 'dark',
     ),
     dark: (
         textColor: #ffffff,
@@ -97,7 +98,7 @@ $themes: (
         headerInputColor: #ffffff,
         headerInputPlaceholderColor: #707070,
         listItemBackgroundColor: #363636,
-        listItemBackgroundHoverColor: #464646,
+        listItemBackgroundHoverColor: #3c3c3c,
         groupingsActiveColor: #292929,
         disabledIconColor: #c7c7cd,
         headingColor: #a3a3a3,
@@ -113,7 +114,7 @@ $themes: (
         inputPlaceholderColor: #707070,
         buttonBackgroundColor: #363636,
         buttonBorderColor: #1f1f1f,
-        buttonColor: #ffffff,
+        buttonColor: #e0e0e0,
         buttonPrimaryColor: #46ace7,
         buttonDangerColor: #ff3e24,
         primaryColor: #52bdfb,
@@ -122,6 +123,7 @@ $themes: (
         successColor: $brand-success,
         infoColor: $brand-info,
         warningColor: $brand-warning,
+        logoSuffix: 'white',
     ),
 );
 

src/scss/vault.scss

@@ -214,7 +214,7 @@
         }
 
         img {
-            width: 282px;
+            width: 284px;
             opacity: 0.3;
             transition: all 1s ease-in-out;