Various Dark Theme fixes per QA feedback (#1212)

* Fix CORS issue on in-line theming javascript

* Fix date picker icon color

* Add comment

* Fix table theming in dark mode

* Selfhosted navbar fix

* Rename selector to avoid clashing with bootstrap

* Do not set initial theme if default

* Fix .text-danger style in dropdown lists

* Fix toast style, restructure toast and card scss

* Fix table and dropdown list hover color

* Use callout component for Disable Send warning

* Remove unneeded theming for hovering over links

* Undo changes to register enterprise2 layout

* Apply theming to Safari input field icons

e.g. Caps lock, password autofill

* Selectively apply themed logo CSS

* Fix unrelated linting

* Fix webpack config to bundle theme.js

Co-authored-by: Danny Murphy <6512845+dltmurphy@users.noreply.github.com>

src/app/accounts/accept-emergency.component.html

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
     <div>
-        <img class="mb-4 logo" alt="Bitwarden">
+        <img class="mb-4 logo logo-themed" alt="Bitwarden">
         <p class="text-center">
             <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span class="sr-only">{{'loading' | i18n}}</span>

src/app/accounts/login.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
     <div class="row justify-content-md-center mt-5">
         <div class="col-5">
-            <img class="mb-2 logo" alt="Bitwarden">
+            <img class="mb-2 logo logo-themed" alt="Bitwarden">
             <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
             <div class="card d-block">
                 <div class="card-body">

src/app/accounts/sso.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" class="container" [appApiAction]="initiateSsoFormPromise" ngNativeValidate>
     <div class="row justify-content-md-center mt-5">
         <div class="col-5">
-            <img class="logo mb-2" alt="Bitwarden">
+            <img class="logo mb-2 logo-themed" alt="Bitwarden">
             <div class="card d-block mt-4">
                 <div class="card-body" *ngIf="loggingIn">
                     <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>

src/app/accounts/verify-email-token.component.html

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center">
     <div>
-        <img class="mb-4 logo" alt="Bitwarden">
+        <img class="mb-4 logo logo-themed" alt="Bitwarden">
         <p class="text-center">
             <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span class="sr-only">{{'loading' | i18n}}</span>

src/app/layouts/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand navbar-dark" [ngClass]="{'bg-secondary-alt': selfHosted}">
+<nav class="navbar navbar-expand navbar-dark" [ngClass]="{'nav-background-alt': selfHosted}">
     <div class="container">
         <a class="navbar-brand" routerLink="/" appA11yTitle="{{'pageTitle' | i18n : 'Bitwarden'}}">
             <i class="fa fa-shield" aria-hidden="true"></i>

src/app/send/send.component.html

@@ -1,12 +1,7 @@
 <div class="container page-content">
-    <div class="row card border-warning mb-4" *ngIf="disableSend">
-        <div class="card-header bg-warning text-white">
-            <i class="fa fa-warning fa-fw" aria-hidden="true"></i> {{'sendDisabled' | i18n}}
-        </div>
-        <div class="card-body">
-            <span>{{'sendDisabledWarning' | i18n}}</span>
-        </div>
-    </div>
+    <app-callout type="warning" title="{{'sendDisabled' | i18n}}" *ngIf="disableSend">
+        <span>{{'sendDisabledWarning' | i18n}}</span>
+    </app-callout>
     <div class="row">
         <div class="col-3 groupings">
             <div class="card vault-filters">

src/app/vault/add-edit-custom-fields.component.ts

@@ -7,8 +7,8 @@ import {
     AddEditCustomFieldsComponent as BaseAddEditCustomFieldsComponent
 } from 'jslib-angular/components/add-edit-custom-fields.component';
 
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { EventService } from 'jslib-common/abstractions/event.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
 @Component({
     selector: 'app-vault-add-edit-custom-fields',