Merge pull request #1010 from CTemplar/920

920

src/app/mail/mail-settings/custom-domains/custom-domains.component.ts

@@ -205,6 +205,6 @@ export class CustomDomainsComponent implements OnInit, OnDestroy {
   }
 
   gotoPricingPlans() {
-    this.onGotoTab.emit('dashboard-plans');
+    this.onGotoTab.emit('dashboard-and-plans');
   }
 }

src/app/mail/mail-settings/mail-settings.component.scss

@@ -623,7 +623,7 @@ $error-red: #e94e4c;
   }
 
   .no-data {
-    color: black;
+    color: var(--text-dark);
     padding: 14px 1.5rem;
   }
 }

src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss

@@ -19,6 +19,8 @@
   padding: 12px 15px;
   resize: none;
   font-size: 14px;
+  background-color: var(--bg-white);
+  color: var(--text-color-black-white);
 }
 
 textarea:disabled {
@@ -37,7 +39,7 @@ textarea:disabled {
   button {
     font-size: inherit !important;
     height: inherit !important;
-    color: rgba(0, 0, 0, 0.38);
+    color: var(--brand-light-gray);
   }
   .btn-more {
     background: #f5f5f5;
@@ -48,7 +50,7 @@ textarea:disabled {
     max-width: 152px;
   }
   a {
-    color: black;
+    color: var(--text-dark);
   }
   .item {
     margin-left: -25px;

src/app/mail/mail-sidebar/mail-sidebar.component.ts

@@ -41,7 +41,7 @@ import { ThemeToggleService } from '../../shared/services/theme-toggle-service';
 import { WebSocketState } from '../../store';
 import { PushNotificationOptions, PushNotificationService } from '../../shared/services/push-notification.service';
 import { SharedService } from '../../store/services';
-import { darkModeCss, PRIMARY_WEBSITE } from '../../shared/config';
+import { PRIMARY_WEBSITE } from '../../shared/config';
 
 @UntilDestroy()
 @Component({
@@ -190,7 +190,6 @@ export class MailSidebarComponent implements OnInit, AfterViewInit, OnDestroy {
         if (this.breakpointsService.isSM() || this.breakpointsService.isXS()) {
           this.LIMIT = this.customFolders.length;
         }
-        // this.handleDarkMode(user.settings.is_night_mode);
         this.handleCustomCss(user.settings.custom_css);
       });
 
@@ -230,8 +229,7 @@ export class MailSidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     this.activatedRoute.queryParams.pipe(untilDestroyed(this)).subscribe((parameters: Params) => {
       this.forceLightMode = parameters.lightMode;
       if (this.forceLightMode) {
-        // this.handleDarkMode(false);
-        this.themeToggleService.forceUpdateTheme(false);
+        this.themeToggleService.forceLightModeTheme();
       }
     });
   }
@@ -272,14 +270,6 @@ export class MailSidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     return s.charAt(0).toUpperCase() + s.slice(1);
   }
 
-  handleDarkMode(isNightMode) {
-    if (isNightMode && !this.forceLightMode) {
-      document.querySelector('#night-mode').innerHTML = darkModeCss;
-    } else {
-      document.querySelector('#night-mode').innerHTML = '';
-    }
-  }
-
   handleCustomCss(customCss: string) {
     document.querySelector('#ctemplar-custom-css').innerHTML = customCss;
   }

src/app/mail/mail.component.scss

@@ -1400,7 +1400,7 @@
 .ngb-dp-day,
 .ngb-dp-weekday,
 .ngb-dp-week-number {
-  color: #212121 !important;
+  color: var(--dropdown-toogle-color) !important;
   font-family: 'Lato', Helvetica, Arial, sans-serif !important;
   font-size: 0.875rem;
   line-height: 1.875rem !important;
@@ -1456,6 +1456,7 @@
     border-radius: 4px;
     font-family: 'Lato', Helvetica, Arial, sans-serif !important;
     width: calc(50% - 0.375rem) !important;
+    color: var(--text-dark);
 
     &:not(:last-of-type) {
       margin-right: 0.375rem;

src/app/shared/config.ts

@@ -186,6 +186,3 @@ export function getWindowConfig(): { host: string; protocol: string } {
   }
   return { host, protocol };
 }
-
-export const darkModeCss =
-  '.mailbox-sidebar-inner .mailbox-sidebar-footer,aside#mailbox-sidebar{background:#151e34;border-right:2px solid #323a4c}nav.navbar.mailbox-navbar{background:#20273e;border:0;border-bottom:1px solid #323a4c}.mail-contact .mail-list-row,div.mail-list-row,div.mail-list-row.is-read,div.mail-list-row.is-selected,div.mail-list-row.is-unread,tr.mail-list-row,tr.mail-list-row.is-read,tr.mail-list-row.is-selected,tr.mail-list-row.is-unread{background:#20273e!important;color:#fff!important;border-bottom:1px solid #323a4c!important}.mail-contact-body.is-bordered,.mail-contact-header.mail-list-row{border:1px solid #323a4c!important}tr.mail-list-row.is-selected{background:#373c50!important} .mail-controls div.mail-result-text.text-muted>small,.mailbox-footer-menu a u,.plan-details .subscription,.pricing-plans .plan-item div,.setting-actions-list a i,.text-dark,.text-gray-dark,.text-secondary,::after,::before,a.dropdown-item,a.text-dark:focus,a.text-dark:hover,a.text-gray-dark:focus,a.text-gray-dark:hover,a.text-muted,a.text-muted:hover,ngb-datepicker div.ngb-dp-months div ngb-datepicker-month-view div.ngb-dp-week .ngb-dp-weekday{color:#fff!important}.mail-list-row.is-unread .mail-from-name,.mail-list-row.is-unread .mail-subject{font-size:15px}.mailbox-actionbar{border-bottom:1px solid #323a4c!important}.mail-checkbox .mat-checkbox .mat-checkbox-frame,.mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.select-all-checkbox .mat-checkbox .mat-checkbox-frame{border:2px solid #fff!important}.input-group-addon,.search-form div.form-group{border:1px solid #474e61!important}.search-form .search-btn{background:#182034;border:0}.bitcoin-payment.card,.bitcoin-payment.card .card-header,.domain-body .domains-list .row .actions .action:hover,.domains-list,.download-attachment-wrapper .download-attachment,.dropdown-menu,.form-control,.help-icon .icon-button,.info-card,.info-list-item,.mail-compose-field,.mailbox-actionbar .mailbox-actionbar-menu>li>a,.mailbox-actionbar-menu>li .dropdown-toggle,.mailbox-dropdown .dropdown-menu,.mailbox-dropdown .dropdown-menu a.dropdown-item:active,.mailbox-dropdown .dropdown-menu a.dropdown-item:focus,.mailbox-dropdown .dropdown-menu a.dropdown-item:hover,.mat-stepper-horizontal,.mat-stepper-vertical,.modal-body,.modal-footer,.modal-header,.nav-tabs.nav .nav-link,.nav-tabs.nav li,.nav.nav-tabs,.plan-details .desc-card-body,.pricing-plans .plan-item,.pricing-plans .plan-sub-item,.stepper-form,.timezone-option,.ui-list-item,app-mail-header .mailbox-actions-menu>li a,app-mail-settings .timezone-block .mat-form-field-appearance-legacy .mat-form-field-infix,app-organization-users .actions,app-organization-users .actions:hover,button.actions-btn,button.btn.btn-default.btn-sm,button.btn.btn-user-action,button.dropdown-toggle,div.mailbox-actionbar div.mail-nav-control button,input,input::placeholder,textarea,textarea::placeholder{background:#363d51!important;border:solid 1px #474e61!important;color:#fff!important}.help-icon .icon-button:hover,.input-group-addon,.mailbox-actionbar .mailbox-actionbar-menu>li>a:hover,app-generic-folder div.mailbox-actionbar div.mail-nav-control button:hover,app-mail-header .mailbox-actions-menu>li a:hover{border:solid 1px #394061!important}.mailbox-dropdown .dropdown-menu a.dropdown-item,.ui-header.border-all-corner{border:solid 1px #363d51!important}input,input::placeholder,textarea,textarea::placeholder{border:0!important}.nav-tabs.nav .nav-link.active,.nav-tabs.nav .nav-link:hover,.nav-tabs.nav li:hover,.nav.nav-tabs:hover{background:#182034!important}.progress-secondary .progress-bar{background-color:#c0392b!important}.bg-faded,.bg-light,.bg-white,.mailbox-footer{background:#363d51!important}.pricing-plans .plan-item .select-btn{box-shadow:5px 10px 10px #151e35!important}.mail-compose-field button{border:0!important}.loading,app-compose-mail .mail-compose-box-inner,app-compose-mail .mail-compose-editable-box,app-compose-mail .mail-composer-footer,app-compose-mail .ng2-menu-item,app-compose-mail tag,ul.mail-composer-actions li div div div ul li button.ql-font,ul.mail-composer-actions li div div div ul li button.ql-size{background:#363d51!important}app-users-sign-in .input-group{border:1px solid #fff;border-radius:5px}app-users-sign-in .password-toggle{border:0}app-mail-detail .mail-content *{background:unset!important} app-compose-mail .ng2-dropdown-menu.ng2-dropdown-menu--inside-element { background: #363d51 !important } .mailbox-main-content, .mail-contact-header{background: #20273e!important} .ui-body li,.ui-body label, .tab-content *,.mail-composer-body *,table.table-inbox *, .mail-contact-header *{color:#fff!important} .msg-reply-content>*:not(style):not(title):not(meta):not(img){} input[type="radio"].fancy-field-control + label,input[type="checkbox"].fancy-field-control + label {color: #ccc;} input[type="radio"].fancy-field-control:checked + label, input[type="checkbox"].fancy-field-control:checked + label{color: #fff;} .decryption-spinner > div{color: #fff!important;}';

src/app/shared/services/theme-toggle-service.ts

@@ -18,6 +18,7 @@ export class ThemeToggleService implements OnDestroy {
     private readonly DARK_THEME_CLASS_NAME = 'theme-dark';
 
     private isDarkMode = false;
+    private isForceLightMode = false;
     public theme$ = new BehaviorSubject<ThemeMode>(ThemeMode.LIGHT);
 
     constructor(
@@ -39,7 +40,7 @@ export class ThemeToggleService implements OnDestroy {
     }
 
     private updateTheme(isDarkMode) {
-        if (isDarkMode) {
+        if (isDarkMode && !this.isForceLightMode) {
             document.body.classList.add(this.DARK_THEME_CLASS_NAME);
             document.body.classList.remove(this.LIGHT_THEME_CLASS_NAME);
             this.theme$.next(ThemeMode.DARK);
@@ -50,8 +51,9 @@ export class ThemeToggleService implements OnDestroy {
         }
     }
 
-    public forceUpdateTheme(isDarkMode) {
-        this.updateTheme(isDarkMode);
+    public forceLightModeTheme() {
+        this.isForceLightMode = true;
+        this.updateTheme(false);
     }
 
     ngOnDestroy(): void {}

src/styles/modules/bootstrap-overrides/_dropdown.scss

@@ -31,7 +31,7 @@
 
   button:disabled {
     a {
-      color: grey !important;
+      color: var(--brand-gray) !important;
     }
   }
 }

src/styles/modules/mail-composer/_mail-composer.scss

@@ -802,11 +802,36 @@ a {
 }
 
 /* Toolbar selected button css.*/
+
 .ql-active {
-  background: white !important;
+  background: var(--bg-white) !important;
   font-weight: bold !important;
 
   i {
     font-weight: bold !important;
   }
 }
+
+.ql-snow {
+  .ql-picker-options {
+    background: var(--bg-white)!important;
+  }
+
+  .ql-stroke {
+    stroke: var(--btn-user-action-color)!important;
+  }
+  .ql-fill {
+    fill: var(--btn-user-action-color)!important;
+  }
+  .ql-picker {
+    color: var(--btn-user-action-color)!important;
+    .ql-picker-label {
+      color: var(--btn-user-action-color)!important;
+    }
+  }
+  button.ql-active {
+    .ql-stroke, .ql-fill {
+      stroke: #06c!important;
+    }
+  }
+}