From dabde183b81d0b015831ee5f5a6c77068188fe66 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Fri, 22 Jan 2021 17:44:56 +0200
Subject: [PATCH 01/33] Fix search bar issue on small device

---
 src/app/mail/mail-header/mail-header.component.html      | 9 ++++++---
 src/app/mail/mail-header/mail-header.component.scss      | 4 ++--
 .../mail-sidebar/compose-mail/compose-mail.component.ts  | 1 -
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/mail/mail-header/mail-header.component.html b/src/app/mail/mail-header/mail-header.component.html
index 8852f8b01..286f9b281 100644
--- a/src/app/mail/mail-header/mail-header.component.html
+++ b/src/app/mail/mail-header/mail-header.component.html
@@ -24,7 +24,7 @@
     </div>
     <!--Action buttons -->
     <div class="col-sm-6 mailbox-navbar-col">
-      <ul class="mailbox-actions-menu d-flex justify-content-end">
+      <ul class="mailbox-actions-menu d-flex justify-content-end align-items-center">
         <!--Protected by SRI button -->
         <li>
           <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity" target="_blank" rel="noopener noreferrer" class="sri-check" placement="bottom" ngbTooltip="Protected by SRI, click to read more">
@@ -71,8 +71,11 @@
               <div class="form search-form">
                 <form>
                   <div class="form-group mb-0 position-relative">
-                    <input class="form-control form-control-sm" type="text" [placeholder]="'mail_header.search' | translate" />
-                    <button class="btn btn-sm btn-secondary search-btn" role="button">
+                    <input class="form-control form-control-sm" type="text" [formControl]="searchInput" (keyup.enter)="search()" [placeholder]="'mail_header.search' | translate" />
+                    <button class="clear-btn" *ngIf="searchInput.value?.length > 0" (click)="searchInput.setValue('')">
+                      <i class="fas fa-times"></i>
+                    </button>
+                    <button class="btn btn-sm btn-secondary search-btn" (click)="search()" role="button">
                       <i class="icon icon-search"></i>
                     </button>
                   </div>
diff --git a/src/app/mail/mail-header/mail-header.component.scss b/src/app/mail/mail-header/mail-header.component.scss
index bf23b6df7..5111cebe0 100644
--- a/src/app/mail/mail-header/mail-header.component.scss
+++ b/src/app/mail/mail-header/mail-header.component.scss
@@ -211,7 +211,7 @@
 
 // == Search form
 .search-form {
-  @include media('<ipad') {
+  @include media('<ipad', '>sm') {
     width: 90%;
   }
 
@@ -278,7 +278,7 @@
 
   .dropdown-menu {
     position: absolute;
-    top: -0.5rem !important;
+    top: 0.2rem !important;
     right: 0.938rem;
     left: 0.938rem !important;
     z-index: $zindex-default;
diff --git a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
index d09ae7265..e72c7a2f9 100644
--- a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
+++ b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
@@ -1663,7 +1663,6 @@ export class ComposeMailComponent implements OnInit, AfterViewInit, OnChanges, O
       this.draftMail.forward_attachments_of_message = this.forwardAttachmentsMessageId;
       this.forwardAttachmentsMessageId = null;
     }
-    console.log('parent', this.parentId);
     if (this.parentId) {
       this.draftMail.parent = this.parentId;
     }

From 681d7a060e7482f318ac4c4423fed3a74b1f7965 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Fri, 22 Jan 2021 21:09:40 +0200
Subject: [PATCH 02/33] Disable save to draft for empty messages

---
 .../compose-mail/compose-mail.component.ts             | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
index d09ae7265..cab365d74 100644
--- a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
+++ b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
@@ -1008,7 +1008,7 @@ export class ComposeMailComponent implements OnInit, AfterViewInit, OnChanges, O
           debounceTime(Number(this.settings.autosave_duration)), // get autosave interval from user's settings
         )
         .subscribe(data => {
-          if (!this.draft.isSaving) {
+          if (!this.draft.isSaving && this.hasData()) {
             this.updateEmail();
           }
         });
@@ -1573,11 +1573,15 @@ export class ComposeMailComponent implements OnInit, AfterViewInit, OnChanges, O
   hasData() {
     // using >1 because there is always a blank line represented by ‘\n’ (quill docs)
     return (
-      (!this.draftMail.is_html ? this.mailData.content.length > 1 : this.quill.getLength() > 1) ||
+      (!this.draftMail.is_html
+        ? this.mailData.content.length > 1 &&
+          this.mailData.content.replace(/(^[ \t]*\n)/gm, '') !== this.getPlainText(this.selectedMailbox.signature)
+        : this.quill.getLength() > 1 &&
+          this.quill.getText().replace(/(^[ \t]*\n)/gm, '') !== this.getPlainText(this.selectedMailbox.signature)) ||
       this.mailData.receiver.length > 0 ||
       this.mailData.cc.length > 0 ||
       this.mailData.bcc.length > 0 ||
-      this.mailData.subject
+      this.mailData.subject.length > 0
     );
   }
 

From de5a7ab30a7af72fd5d0785e4eaec32f1c28c138 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20G=C4=83l=C4=83=C8=9Beanu?= <vxern@ctemplar.com>
Date: Sat, 23 Jan 2021 18:09:49 +0000
Subject: [PATCH 03/33] Updating grammar and some phrasing

---
 src/assets/i18n/en.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 21bd9003c..6f3058db4 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -260,13 +260,13 @@
       "actions": "Actions:",
       "move_to": "move to",
       "mark_as_starred": "mark as starred",
-      "delete_message": " Are you sure, you want to delete filter",
+      "delete_message": "Are you sure that you want to delete filter",
       "text_or_pattern": "text or pattern",
       "select_folder": "Select folder",
       "select_condition": "Select condition"
     },
     "save_order": "Save order",
-    "delete_folder_message": "Are you sure, you want to delete folder",
+    "delete_folder_message": "Are you sure that you want to delete folder",
     "select_color": "Select color:",
     "folder_name": "Folder name:",
     "update": "Update",
@@ -277,7 +277,7 @@
     "folder_messages": {
       "name_exist": "Folder name already exists.",
       "name_required": "Folder name is required",
-      "name_start": " Folder name must start with an alphabet and can only contain",
+      "name_start": "Folder name must start with an alphanumeric character and can only contain",
       "name_len": "Folder name must be less than 30 characters."
     },
     "security": {
@@ -375,7 +375,7 @@
     "alias_exist": "Email alias already exists.",
     "username_chars": "The username must be between 2 and 64 characters.",
     "username_allowed_chars": "The username must start with a letter and end with a letter or number.It may only contain",
-    "username_minlen": "characters, and minimum length is 2 characters.",
+    "username_minlen": "characters, and the minimum length is 2 characters.",
     "reorder": "Reorder",
     "conversations": " conversations )",
     "conversation": " conversation )",
@@ -408,7 +408,7 @@
       "self_dest_email": "Self Destruct Email",
       "confirm_send": "Confirm Send",
       "confirm_close": "Confirm Close",
-      "send_without_all": "Are you sure, send this message without a subject or text in the body?",
+      "send_without_all": "Are you sure you want send this message without a subject or body?",
       "close_during_uploading": "Are you sure to close? Upload and encryption process will be lost if you close while attachments upload are processing.",
       "email_deleted": "Email will be deleted on selected datetime",
       "select_date": "Select Date",
@@ -422,7 +422,7 @@
       "bcc_email": "Enter Bcc email",
       "subject": "Subject :",
       "text_format": "Text formatting",
-      "small": "small",
+      "small": "Small",
       "to": "To :",
       "delete_draft": "Delete draft",
       "normal": "Normal",
@@ -445,7 +445,7 @@
       "clear": "Clear",
       "email_on_datetime": "Email will be sent on selected datetime",
       "confirm_discard": "Confirm Discard",
-      "want_to_discard": "Are you sure, you want to discard this email?",
+      "want_to_discard": "Are you sure that you want to discard this email?",
       "save_in_drafts": "Save in Drafts",
       "discard": "Discard",
       "new_message": "New message",
@@ -509,7 +509,7 @@
     "settings": "Settings",
     "need_help": "Need Help",
     "search": "Search",
-    "not_sent_message": "Your message hasn't been sent because of Internet connection.",
+    "not_sent_message": "Your message has not been sent due to a bad internet connection.",
     "try_to_connect": "Try to connect",
     "moved_to_trash": "The conversation has been moved to the Trash. ",
     "learn_more": "Learn more",

From b9ea080b566b77ead82745c7b1ca5e3f86a82d64 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Mon, 25 Jan 2021 18:57:55 +0200
Subject: [PATCH 04/33] Enable compose on small devices

---
 src/app/store/services/compose-mail.service.ts       | 8 --------
 src/styles/modules/mail-composer/_mail-composer.scss | 4 ++++
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/app/store/services/compose-mail.service.ts b/src/app/store/services/compose-mail.service.ts
index 33feefcca..d0c2d8183 100644
--- a/src/app/store/services/compose-mail.service.ts
+++ b/src/app/store/services/compose-mail.service.ts
@@ -307,14 +307,6 @@ export class ComposeMailService {
       newComponentReference.instance.isComposeVisible = true;
       newComponentReference.instance.isMinimized = false;
       this.getComposesWidth();
-      if (this.windowWidth < this.composesWidth) {
-        for (const i in this.componentRefList) {
-          if (this.componentRefList[i].instance.isComposeVisible) {
-            this.componentRefList[i].instance.isComposeVisible = false;
-            break;
-          }
-        }
-      }
       newComponentReference.instance.hide.subscribe(event => {
         const index = this.componentRefList.indexOf(newComponentReference);
         this.destroyComponent(newComponentReference, index);
diff --git a/src/styles/modules/mail-composer/_mail-composer.scss b/src/styles/modules/mail-composer/_mail-composer.scss
index be269c09e..dd2257644 100644
--- a/src/styles/modules/mail-composer/_mail-composer.scss
+++ b/src/styles/modules/mail-composer/_mail-composer.scss
@@ -406,6 +406,10 @@ a {
 }
 .composer-footer {
   margin-bottom: 1.4rem;
+
+  @include media('<=sm') {
+    margin-bottom: 0;
+  }
 }
 .mail-composer-actions {
   margin: 0 -0.375rem;

From 6bf5f4fd821bf080a2822a187042f0263dcf6944 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Mon, 25 Jan 2021 20:03:34 +0200
Subject: [PATCH 05/33] Enable/Disable sentry

---
 .../mail/mail-settings/mail-settings.component.ts  |  8 ++++++++
 src/app/mail/mail.component.ts                     | 14 +++++++++-----
 src/app/shared/config.ts                           |  1 +
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/mail/mail-settings/mail-settings.component.ts b/src/app/mail/mail-settings/mail-settings.component.ts
index 60e0be640..d0d299831 100644
--- a/src/app/mail/mail-settings/mail-settings.component.ts
+++ b/src/app/mail/mail-settings/mail-settings.component.ts
@@ -7,9 +7,11 @@ import * as moment from 'moment-timezone';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import * as Sentry from '@sentry/browser';
 
 import { MoveToBlacklist, MoveToWhitelist } from '../../store/actions';
 import { CreditCardNumberPipe } from '../../shared/pipes/creditcard-number.pipe';
+import { SENTRY_DSN } from '../../shared/config';
 import { FONTS, Language, LANGUAGES, VALID_EMAIL_REGEX, AUTOSAVE_DURATION } from '../../shared/config';
 import {
   BlackListDelete,
@@ -385,6 +387,12 @@ export class MailSettingsComponent implements OnInit, AfterViewInit, OnDestroy {
         value = Number(value.slice(0, -1)) * 1000;
       }
     }
+    if (key === 'is_enable_report_bugs') {
+      Sentry.init({
+        dsn: SENTRY_DSN,
+        enabled: value,
+      });
+    }
     if (key === 'notification_email' && value !== '' && !this.validateEmail(value)) {
       this.store.dispatch(new SnackPush({ message: `"${value}" is not valid email address.` }));
       this.notificationEmail = this.userState.settings.notification_email;
diff --git a/src/app/mail/mail.component.ts b/src/app/mail/mail.component.ts
index 932bc3e3d..442fe81f8 100644
--- a/src/app/mail/mail.component.ts
+++ b/src/app/mail/mail.component.ts
@@ -27,13 +27,15 @@ import {
   GetNotification,
   SaveAutoResponder,
   WhiteListGet,
-  CardGet, ContactsGet
+  CardGet,
+  ContactsGet,
 } from '../store/actions';
 import { TimezoneGet } from '../store/actions/timezone.action';
 import { AppState, AutoResponder, UserState } from '../store/datatypes';
 import { SharedService } from '../store/services';
 import { ComposeMailService } from '../store/services/compose-mail.service';
 import { GetOrganizationUsers } from '../store/organization.store';
+import { SENTRY_DSN } from '../shared/config';
 
 @UntilDestroy()
 @Component({
@@ -82,10 +84,12 @@ export class MailComponent implements OnDestroy, OnInit, AfterViewInit {
       .subscribe((userState: UserState) => {
         if (userState.isLoaded && !this.isLoadedData) {
           // Initialize Sentry according to user's setting after login
-          Sentry.init({
-            dsn: 'https://e768a553906d4f87bcb0419a151e36b0@o190614.ingest.sentry.io/5256284',
-            enabled: userState.settings.is_enable_report_bugs,
-          });
+          if (userState.settings.is_enable_report_bugs) {
+            Sentry.init({
+              dsn: SENTRY_DSN,
+              enabled: true,
+            });
+          }
           this.isLoadedData = true;
           this.store.dispatch(new GetMailboxes());
           this.store.dispatch(new TimezoneGet());
diff --git a/src/app/shared/config.ts b/src/app/shared/config.ts
index 214bad227..3b2d72eda 100644
--- a/src/app/shared/config.ts
+++ b/src/app/shared/config.ts
@@ -7,6 +7,7 @@ export const IS_ELECTRON = window.location.protocol === 'file:';
 export const apiUrl = getBaseUrl();
 export const PRIMARY_DOMAIN = AppConfig.production ? 'ctemplar.com' : 'dev.ctemplar.net';
 export const PRIMARY_WEBSITE = 'https://ctemplar.com';
+export const SENTRY_DSN = 'https://e768a553906d4f87bcb0419a151e36b0@o190614.ingest.sentry.io/5256284';
 
 export const COLORS: string[] = [
   '#000000',

From 32ead851ef7e2d8230d27c42b0126980f9716371 Mon Sep 17 00:00:00 2001
From: The-Hidden-Hand <45569116+The-Hidden-Hand@users.noreply.github.com>
Date: Tue, 26 Jan 2021 23:37:24 +0000
Subject: [PATCH 06/33] Fix link

---
 src/app/mail/mail-header/mail-header.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/mail/mail-header/mail-header.component.html b/src/app/mail/mail-header/mail-header.component.html
index 286f9b281..0d0701c7e 100644
--- a/src/app/mail/mail-header/mail-header.component.html
+++ b/src/app/mail/mail-header/mail-header.component.html
@@ -38,7 +38,7 @@
               <i class="far fa-question-circle"></i>
             </button>
             <div ngbDropdownMenu class="dropdown-menu-right text-center faq-dropdown" aria-labelledby="helpDropdownMenuButton">
-              <a class="dropdown-item text-left" target="_blank" rel="noopener noreferrer" href="{{ primaryWebsite }}/faqs/"> FAQs </a>
+              <a class="dropdown-item text-left" target="_blank" rel="noopener noreferrer" href="{{ primaryWebsite }}/help/"> Helpdesk </a>
               <a class="dropdown-item text-left" (click)="openComposeMailDialog(['support@ctemplar.com'])" [innerHTML]="'settings.contact_support' | translate">Contact support </a>
             </div>
           </div>

From 6e270befe040e95eecfb00497ad1623173890a65 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Wed, 27 Jan 2021 04:39:48 +0200
Subject: [PATCH 07/33] Fix UI issues

---
 .../mail-contact/mail-contact.component.scss  |   8 +-
 .../save-contact/save-contact.component.html  |   4 -
 .../mail-autoresponder.component.html         |   4 +-
 .../mail-settings.component.html              | 134 +++++++++---------
 .../mail-sidebar/mail-sidebar.component.html  |   2 +-
 .../mail-sidebar/mail-sidebar.component.scss  |   6 +
 src/assets/i18n/en.json                       |   2 +
 7 files changed, 83 insertions(+), 77 deletions(-)

diff --git a/src/app/mail/mail-contact/mail-contact.component.scss b/src/app/mail/mail-contact/mail-contact.component.scss
index 5fe9711ab..aa119344b 100644
--- a/src/app/mail/mail-contact/mail-contact.component.scss
+++ b/src/app/mail/mail-contact/mail-contact.component.scss
@@ -186,6 +186,10 @@
 // == Mail actions form
 .mail-actions-form-title {
   margin-bottom: 1.25rem;
+
+  .icon {
+    font-size: 0.75rem;
+  }
 }
 
 .mail-actions-form-holder {
@@ -295,10 +299,6 @@
       margin-right: 0.625rem;
       width: 2.75rem;
     }
-
-    .icon {
-      font-size: 0.75rem;
-    }
   }
 
   .has-error .error-msg {
diff --git a/src/app/mail/mail-contact/save-contact/save-contact.component.html b/src/app/mail/mail-contact/save-contact/save-contact.component.html
index ade012cd8..810586de3 100644
--- a/src/app/mail/mail-contact/save-contact/save-contact.component.html
+++ b/src/app/mail/mail-contact/save-contact/save-contact.component.html
@@ -38,7 +38,6 @@
       <div class="col-sm-10">
         <input class="form-control form-control-sm" id="contactEmail" name="email" required [(ngModel)]="newContactModel.email" #contactEmail="ngModel" [placeholder]="'contacts.type_email' | translate" type="text" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" />
       </div>
-      <button type="button" class="add-button-link"><img src="assets/images/plus@2x.png" /></button>
     </div>
   </div>
   <!-- Contact Encryption for InternalUsers-->
@@ -76,7 +75,6 @@
       <div class="col-sm-10">
         <input class="form-control form-control-sm" id="contactPhone1" name="phone" [(ngModel)]="newContactModel.phone" [placeholder]="'common.phone' | translate" type="text" />
       </div>
-      <button type="button" class="add-button-link"><img src="assets/images/plus@2x.png" /></button>
     </div>
   </div>
   <!-- Contact Phone Number 2-->
@@ -88,7 +86,6 @@
       <div class="col-sm-10">
         <input class="form-control form-control-sm" id="contactPhone2" [placeholder]="'common.phone' | translate" name="phone2" [(ngModel)]="newContactModel.phone2" type="text" />
       </div>
-      <button type="button" class="add-button-link"><img src="assets/images/plus@2x.png" /></button>
     </div>
   </div>
   <!-- Contact Address-->
@@ -100,7 +97,6 @@
       <div class="col-sm-10">
         <textarea class="form-control form-control-sm resize-off" id="contactAddress" [placeholder]="'contacts.address' | translate" name="address" [(ngModel)]="newContactModel.address" rows="3"></textarea>
       </div>
-      <button type="button" class="add-button-link"><img src="assets/images/plus@2x.png" /></button>
     </div>
   </div>
   <div class="mb-2 hidden-xs-down">&nbsp;</div>
diff --git a/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.html b/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.html
index 1cdd477f5..87553d333 100644
--- a/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.html
+++ b/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.html
@@ -48,11 +48,11 @@ <h5 class="ui-header-subtitle text-dark mb-0">
       <div class="form-group row col-md-8">
         <div class="col-md-12 row">
           <div class="form-group col-sm col-sm-6">
-            <label class="form-inline" [translate]="'settings.forwarding.start_time'">Start Date</label>
+            <label class="form-inline" [translate]="'settings.forwarding.start_date'">Start Date</label>
             <ngb-datepicker #startDatePicker [(ngModel)]="startDate" [disabled]="!autoresponder.vacationautoresponder_active" class="bg-white ng-datepicker ng-datepicker-265"> </ngb-datepicker>
           </div>
           <div class="form-group col-sm col-sm-6">
-            <label class="form-inline" [translate]="'settings.forwarding.end_time'">End Date</label>
+            <label class="form-inline" [translate]="'settings.forwarding.end_date'">End Date</label>
             <ngb-datepicker #endDatePicker [(ngModel)]="endDate" [disabled]="!autoresponder.vacationautoresponder_active" class="bg-white ng-datepicker ng-datepicker-265"> </ngb-datepicker>
           </div>
         </div>
diff --git a/src/app/mail/mail-settings/mail-settings.component.html b/src/app/mail/mail-settings/mail-settings.component.html
index d94b02a47..36457ee19 100644
--- a/src/app/mail/mail-settings/mail-settings.component.html
+++ b/src/app/mail/mail-settings/mail-settings.component.html
@@ -498,91 +498,93 @@ <h5 class="ui-header-subtitle text-dark mb-0">
             </h5>
           </header>
           <div class="mailbox-section-body mailbox-section-body-sm">
-            <div class="form-content-row">
-              <div class="row align-items-center">
-                <div class="col-sm-3">
-                  <label class="form-label mb-sm-0" [translate]="'settings.emails_per_page'"> Emails per page </label>
-                </div>
-                <div class="col-sm-7 col-md-5">
-                  <div class="row row-sm">
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="emailCoutField1" name="[5]" type="radio" (click)="updateSettings('emails_per_page', 20)" [checked]="settings?.emails_per_page === 20" />
-                        <label for="emailCoutField1">20</label>
+            <div class="form-content-holder">
+              <div class="form-content-row">
+                <div class="row align-items-center">
+                  <div class="col-sm-3">
+                    <label class="form-label mb-sm-0" [translate]="'settings.emails_per_page'"> Emails per page </label>
+                  </div>
+                  <div class="col-sm-7 col-md-5">
+                    <div class="row row-sm">
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="emailCoutField1" name="[5]" type="radio" (click)="updateSettings('emails_per_page', 20)" [checked]="settings?.emails_per_page === 20" />
+                          <label for="emailCoutField1">20</label>
+                        </div>
                       </div>
-                    </div>
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="emailCoutField2" name="[5]" type="radio" (click)="updateSettings('emails_per_page', 50)" [checked]="settings?.emails_per_page === 50" />
-                        <label for="emailCoutField2">50</label>
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="emailCoutField2" name="[5]" type="radio" (click)="updateSettings('emails_per_page', 50)" [checked]="settings?.emails_per_page === 50" />
+                          <label for="emailCoutField2">50</label>
+                        </div>
                       </div>
-                    </div>
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="emailCoutField3" name="[5]" type="radio" (click)="updateSettings('emails_per_page', 100)" [checked]="settings?.emails_per_page === 100" />
-                        <label for="emailCoutField3">100</label>
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="emailCoutField3" name="[5]" type="radio" (click)="updateSettings('emails_per_page', 100)" [checked]="settings?.emails_per_page === 100" />
+                          <label for="emailCoutField3">100</label>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="form-content-row">
-              <div class="row align-items-center">
-                <div class="col-sm-3">
-                  <label class="form-label mb-0">Dark mode</label>
-                </div>
-                <div class="col-sm-7 col-md-5">
-                  <div class="row row-sm">
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="darkMode1" name="[darkMode]" type="radio" (click)="updateSettings('is_night_mode', true)" [checked]="settings.is_night_mode" />
-                        <label for="darkMode1" [translate]="'common.enabled'">Enabled</label>
+              <div class="form-content-row">
+                <div class="row align-items-center">
+                  <div class="col-sm-3">
+                    <label class="form-label mb-0">Dark mode</label>
+                  </div>
+                  <div class="col-sm-7 col-md-5">
+                    <div class="row row-sm">
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="darkMode1" name="[darkMode]" type="radio" (click)="updateSettings('is_night_mode', true)" [checked]="settings.is_night_mode" />
+                          <label for="darkMode1" [translate]="'common.enabled'">Enabled</label>
+                        </div>
                       </div>
-                    </div>
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="darkMode2" name="[darkMode]" type="radio" (click)="updateSettings('is_night_mode', false)" [checked]="!settings.is_night_mode" />
-                        <label for="darkMode2" [translate]="'common.disabled'">Disabled</label>
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="darkMode2" name="[darkMode]" type="radio" (click)="updateSettings('is_night_mode', false)" [checked]="!settings.is_night_mode" />
+                          <label for="darkMode2" [translate]="'common.disabled'">Disabled</label>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="form-content-row">
-              <div class="row align-items-center">
-                <div class="col-sm-3">
-                  <label class="form-label mb-0">Conversation View</label>
-                </div>
-                <div class="col-sm-7 col-md-5">
-                  <div class="row row-sm">
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="conversationViewMode1" name="[conversationMode]" type="radio" (click)="updateConversationMode(true)" [checked]="settings.is_conversation_mode" />
-                        <label for="conversationViewMode1" [translate]="'common.enabled'">Enabled</label>
+              <div class="form-content-row">
+                <div class="row align-items-center">
+                  <div class="col-sm-3">
+                    <label class="form-label mb-0">Conversation View</label>
+                  </div>
+                  <div class="col-sm-7 col-md-5">
+                    <div class="row row-sm">
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="conversationViewMode1" name="[conversationMode]" type="radio" (click)="updateConversationMode(true)" [checked]="settings.is_conversation_mode" />
+                          <label for="conversationViewMode1" [translate]="'common.enabled'">Enabled</label>
+                        </div>
                       </div>
-                    </div>
-                    <div class="col-6 flex-auto-col">
-                      <div class="fancy-field-group">
-                        <input class="d-none fancy-field-control fancy-field-control-sm" id="conversationViewMode2" name="[conversationMode]" type="radio" (click)="updateConversationMode(false)" [checked]="!settings.is_conversation_mode" />
-                        <label for="conversationViewMode2" [translate]="'common.disabled'">Disabled</label>
+                      <div class="col-6 flex-auto-col">
+                        <div class="fancy-field-group">
+                          <input class="d-none fancy-field-control fancy-field-control-sm" id="conversationViewMode2" name="[conversationMode]" type="radio" (click)="updateConversationMode(false)" [checked]="!settings.is_conversation_mode" />
+                          <label for="conversationViewMode2" [translate]="'common.disabled'">Disabled</label>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="form-content-row">
-              <div class="row align-items-center">
-                <div class="col-sm-3">
-                  <label for="customCss" class="form-label mb-sm-0"> Custom css </label>
-                </div>
-                <form class="col-sm-7 col-md-5" autocomplete="off">
-                  <textarea class="form-control form-control-sm resize-off" id="customCss" name="customCss" [(ngModel)]="settings.custom_css" [ngModelOptions]="{ updateOn: 'blur' }" (change)="updateSettings('custom_css', $event.target.value)" rows="3"> </textarea>
-                </form>
-                <div class="info-card mx-3 mt-2 full-width">
-                  <p>You can write the custom css here in order to customize the display of your mailbox.</p>
+              <div class="form-content-row">
+                <div class="row align-items-center">
+                  <div class="col-sm-3">
+                    <label for="customCss" class="form-label mb-sm-0"> Custom css </label>
+                  </div>
+                  <form class="col-sm-7 col-md-5" autocomplete="off">
+                    <textarea class="form-control form-control-sm resize-off" id="customCss" name="customCss" [(ngModel)]="settings.custom_css" [ngModelOptions]="{ updateOn: 'blur' }" (change)="updateSettings('custom_css', $event.target.value)" rows="3"> </textarea>
+                  </form>
+                  <div class="info-card mx-3 mt-2 full-width">
+                    <p>You can write the custom css here in order to customize the display of your mailbox.</p>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.html b/src/app/mail/mail-sidebar/mail-sidebar.component.html
index c0d81dfc4..59142e67a 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.html
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.html
@@ -174,7 +174,7 @@
         </small>
       </a>
       <a href="{{ primaryWebsite }}/transparency-report-ctemplar/" target="_blank" rel="noopener noreferrer">
-        <img height="30" width="31" src="assets/icons/warranty-canary.png" />
+        <img alt="warranty-canary" class="warranty-canary-image" src="assets/icons/warranty-canary.png" />
       </a>
     </div>
   </div>
diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.scss b/src/app/mail/mail-sidebar/mail-sidebar.component.scss
index 03848e85b..39744324c 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.scss
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.scss
@@ -152,3 +152,9 @@
 .mail-allemails {
   opacity: 0.7;
 }
+
+.mailbox-sidebar-footer .warranty-canary-image {
+  height: 25px;
+  width: 26px;
+  margin-top: 6px;
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index a51e7483f..5429b5d91 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -354,6 +354,8 @@
       "restrict": "Restrict to time range",
       "start_time": "Start Time",
       "end_time": "End Time",
+      "start_date": "Start Date",
+      "end_date": "End Date",
       "auto_message": "Email autoresponse message",
       "message": "Message",
       "vac_autoresponder": "Vacation Autoresponder",

From 0106a70435ecbda43041669836660b3b4a19fa81 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Wed, 27 Jan 2021 11:48:01 +0200
Subject: [PATCH 08/33] make consistent pricing wording and features

---
 .../pricing-plans.component.html              | 64 +++++++++----------
 .../pricing-plans.component.scss              |  4 ++
 src/app/store/datatypes.ts                    |  4 ++
 src/assets/i18n/en.json                       | 32 ++++++----
 src/assets/static/pricing-plans.json          | 38 +++++++++--
 5 files changed, 86 insertions(+), 56 deletions(-)

diff --git a/src/app/shared/components/pricing-plans/pricing-plans.component.html b/src/app/shared/components/pricing-plans/pricing-plans.component.html
index 507462d5e..c088a3cfa 100644
--- a/src/app/shared/components/pricing-plans/pricing-plans.component.html
+++ b/src/app/shared/components/pricing-plans/pricing-plans.component.html
@@ -22,33 +22,30 @@ <h4 class="l-block-subtitle mb-0 text-dark fw-light">
             <label class="pt-3" [translate]="'page_pricing.plan_price'">Plan & Price</label>
           </div>
           <h3 class="heading mt-4" [translate]="'page_pricing.packages'">Packages</h3>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.emails_allowed_to_send' | translate" [translate]="'page_pricing.messages_per_day'">Messages per day</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.upload_limit_MB' | translate" [translate]="'page_pricing.attachment_limit'">Attachment limit (MB)</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.storage_in_GB' | translate" [translate]="'page_pricing.storage'">Storage (GB)</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.emails_allowed_to_send' | translate" [translate]="'page_pricing.messages_per_day'">Sending limits</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.upload_limit_MB' | translate" [translate]="'page_pricing.attachment_limit'">Attachments limit</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.storage_in_GB' | translate" [translate]="'page_pricing.storage'">Storage</div>
           <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.mail_aliases' | translate" [translate]="'page_pricing.aliases'">Aliases</div>
           <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.custom_domains' | translate" [translate]="'page_pricing.custom_domains'">Custom domains</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.folders' | translate" [translate]="'page_pricing.folders'">Folders</div>
           <h3 class="heading mt-4" [translate]="'page_pricing.features'">Features</h3>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.encryption_in_transit' | translate" [translate]="'page_pricing.encryption_in_transit'">Encryption in transit (SSL/TLS)</div>
-          <div class="bold px-2 py-3 plan-sub-item" ngbTooltip="Encrypted attachments" [innerHTML]="'page_pricing.encrypted_attachments' | translate">Encrypted attachments</div>
-          <div class="bold px-2 py-3 plan-sub-item" ngbTooltip="Encrypted content" [translate]="'page_pricing.encrypted_content'">Encrypted content</div>
-          <div class="bold px-2 py-3 plan-sub-item" ngbTooltip="Encrypted contacts" [translate]="'page_pricing.encrypted_contact'">Encrypted contacts</div>
-          <div class="bold px-2 py-3 plan-sub-item" ngbTooltip="Encrypted subjects" [translate]="'page_pricing.encrypted_subjects'">Encrypted subjects</div>
-          <div class="bold px-2 py-3 plan-sub-item" [innerHTML]="'page_pricing.encypted_metadata' | translate">Encrypted metadata <sup> (Coming soon)</sup></div>
-          <div class="bold px-2 py-3 plan-sub-item" [innerHTML]="'page_pricing.virus_detection' | translate">Virus detection tool</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.two_fac_authentication' | translate" [translate]="'page_pricing.two_factore_auth'">2 Factor authentication</div>
-          <div class="bold px-2 py-3 plan-sub-item" [translate]="'page_pricing.anti_phishing'">Anti phishing</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.brute_force' | translate" [translate]="'page_pricing.brute_force'">Brute force protection</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.zero_knowledge' | translate" [translate]="'page_pricing.zero_knowledge'">Zero knowledge passwords</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.stripes_ip' | translate" [translate]="'page_pricing.stripes_ip'">Strips IP from headers</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.unhackable_by_siri' | translate" [translate]="'page_pricing.unhackable_by_siri'">Unhackable by others with SRI</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.unhackable_by_checksum' | translate" [translate]="'page_pricing.unhackable_by_checksum'">Unhackable by us with checksums</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.support_custom_domains' | translate" [translate]="'page_pricing.multi_user'">Multi user support</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.self_destructing' | translate" [translate]="'page_pricing.self_destructing'">Self destructing emails</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.dead_man_timer' | translate" [translate]="'page_pricing.dead_man_timer'">Dead man timer</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.encryption_in_transit' | translate" [translate]="'page_pricing.encryption_in_transit'">Encryption in transit</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.encryption_at_rest' | translate" [translate]="'page_pricing.encryption_at_rest'">Encryption at rest</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.encrypted_attachments' | translate" [translate]="'page_pricing.encrypted_attachments' | translate">Encrypted attachments</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.encrypted_subjects' | translate" [translate]="'page_pricing.encrypted_subjects'">Encrypted subject</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.encrypted_body' | translate" [translate]="'page_pricing.encrypted_body'">Encrypted body</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.virus_protection' | translate" [translate]="'page_pricing.virus_protection'">Virus protection</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.2fa_security' | translate" [translate]="'page_pricing.2fa_security'">2FA security</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.anti_phishing' | translate" [translate]="'page_pricing.anti_phishing'">Anti-phishing phrase</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.brute_force' | translate" [translate]="'page_pricing.brute_force'">Brute-force proof</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.zero_knowledge' | translate" [translate]="'page_pricing.zero_knowledge'">Zero-knowledge privacy</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.anonymized_ip' | translate" [translate]="'page_pricing.anonymized_ip'">Anonymized IP</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.self_destructing' | translate" [translate]="'page_pricing.self_destructing'">Self-destructing emails</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.dead_man_timer' | translate" [translate]="'page_pricing.dead_man_timer'">Dead-man timer</div>
           <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.delayed_delivery' | translate" [translate]="'page_pricing.delayed_delivery'">Delayed delivery</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.mails_of_custom_dom' | translate" [translate]="'page_pricing.catch_all_emails'">Catch all emails</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.unlimited_folders' | translate" [translate]="'page_pricing.unlimited_folders'">Unlimited folders</div>
-          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.exclusive_access' | translate" [translate]="'page_pricing.exclusive_access'">Exclusive access to new features</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.mails_of_custom_dom' | translate" [translate]="'page_pricing.catch_all_emails'">Catch-all domains</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.remote_encrypted_link' | translate" [translate]="'page_pricing.remote_encrypted_link'">Remote encrypted link</div>
+          <div class="bold px-2 py-3 plan-sub-item" [ngbTooltip]="'page_pricing.exclusive_access' | translate" [translate]="'page_pricing.exclusive_access'">Exclusive beta access</div>
         </div>
         <div class="col-9">
           <div class="row pricing-plans-list">
@@ -82,32 +79,29 @@ <h3 class="heading mt-4" [translate]="'page_pricing.features'">Features</h3>
               <h3 class="heading mt-4 position-relative">
                 <a *ngIf="plan.name === planType.PRIME" class="switch-payment-type" (click)="togglePaymentType()"> Click here to switch to {{ selectedPaymentType === paymentTypeEnum.ANNUALLY ? 'monthly' : 'yearly' }} </a>
               </h3>
-              <div class="px-2 py-3 plan-sub-item">{{ plan.messages_per_day }}</div>
-              <div class="px-2 py-3 plan-sub-item">{{ plan.attachment_upload_limit }}</div>
-              <div class="px-2 py-3 plan-sub-item">{{ plan.gb }}</div>
+              <div class="px-2 py-3 plan-sub-item">{{ plan.messages_per_day }}<label *ngIf="plan.name !== planType.CHAMPION">/day</label></div>
+              <div class="px-2 py-3 plan-sub-item">{{ plan.attachment_upload_limit }}/MB</div>
+              <div class="px-2 py-3 plan-sub-item">{{ plan.gb }}GB</div>
               <div class="px-2 py-3 plan-sub-item">{{ plan.aliases }}</div>
               <div class="px-2 py-3 plan-sub-item">{{ plan.custom_domains }}</div>
+              <div class="px-2 py-3 plan-sub-item">Unlimited</div>
               <h3 class="heading mt-4"></h3>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.ssl_tls }"></ng-container>
+              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encryption_in_transit }"></ng-container>
+              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encryption_at_rest }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encrypted_attachments }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encrypted_content }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encrypted_contacts }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encrypted_subjects }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encrypted_metadata }"></ng-container>
+              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.encrypted_body }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.virus_detection_tool }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.two_fa }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.anti_phishing }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.brute_force_protection }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.zero_knowledge_password }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.strip_ips }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.sri }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.checksums }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.multi_user_support }"></ng-container>
+              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.anonymized_ip }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.self_destructing_emails }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.dead_man_timer }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.delayed_delivery }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.catch_all_email }"></ng-container>
-              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.unlimited_folders }"></ng-container>
+              <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.remote_encrypted_link }"></ng-container>
               <ng-container *ngTemplateOutlet="featureIcon; context: { value: plan.exclusive_access }"></ng-container>
             </div>
           </div>
diff --git a/src/app/shared/components/pricing-plans/pricing-plans.component.scss b/src/app/shared/components/pricing-plans/pricing-plans.component.scss
index ce71878c2..030fc70fc 100644
--- a/src/app/shared/components/pricing-plans/pricing-plans.component.scss
+++ b/src/app/shared/components/pricing-plans/pricing-plans.component.scss
@@ -90,6 +90,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: center;
+
+    label {
+      margin-bottom: 0;
+    }
   }
 }
 
diff --git a/src/app/store/datatypes.ts b/src/app/store/datatypes.ts
index a2f146a44..77aa60083 100644
--- a/src/app/store/datatypes.ts
+++ b/src/app/store/datatypes.ts
@@ -613,6 +613,8 @@ export interface PricingPlan {
   domain_count: number;
   email_count: number;
   encrypted_attachments: boolean;
+  encryption_at_rest: boolean;
+  encrypted_body: boolean;
   encrypted_contacts: boolean;
   encrypted_content: boolean;
   encrypted_metadata: boolean;
@@ -632,7 +634,9 @@ export interface PricingPlan {
   two_fa: boolean;
   unlimited_folders: boolean;
   virus_detection_tool: boolean;
+  anonymized_ip: boolean;
   zero_knowledge_password: boolean;
+  remote_encrypted_link: boolean;
 }
 
 export enum TransactionStatus {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 33e180106..08320e221 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -579,33 +579,36 @@
     "sending_spam": "**CTemplar can not be used for sending spam or bulk emails",
     "plan_price": "Plan & Price",
     "packages": "Packages",
-    "messages_per_day": "Messages per day",
+    "messages_per_day": "Sending limits",
     "page_pricing": "Attachment limit (MB)",
-    "attachment_limit": "Attachment limit (MB)",
-    "storage": "Storage (GB)",
+    "attachment_limit": "Attachments limit",
+    "storage": "Storage",
     "aliases": "Aliases",
     "custom_domains": "Custom domains",
     "features": "Features",
-    "encryption_in_transit": "Encryption in transit(SSL/TLS)",
+    "encryption_in_transit": "Encryption in transit",
+    "encryption_at_rest": "Encryption at rest",
     "encrypted_attachments": "Encrypted attachments",
     "encrypted_contact": "Encrypted contacts",
-    "encrypted_subjects": "Encrypted subjects",
+    "encrypted_subjects": "Encrypted subject",
+    "encrypted_body": "Encrypted body",
     "encypted_metadata": "Encrypted metadata <sup> (Coming soon)</sup>",
-    "virus_detection": "Virus detection tool <sup> (Coming soon)</sup>",
-    "anti_phishing": "Anti phishing",
-    "zero_knowledge": "Zero knowledge passwords",
+    "virus_protection": "Virus protection",
+    "anti_phishing": "Anti-phishing phrase",
+    "zero_knowledge": "Zero-knowledge privacy",
     "stripes_ip": "Strips IP from headers",
     "unhackable_by_siri": "Unhackable by others with SRI",
     "unhackable_by_checksum": "Unhackable by us with checksums",
     "multi_user": "Multi user support",
-    "self_destructing": "Self destructing emails",
-    "dead_man_timer": "Dead man timer",
+    "anonymized_ip": "Anonymized IP",
+    "self_destructing": "Self-destructing emails",
+    "dead_man_timer": "Dead-man timer",
     "delayed_delivery": "Delayed delivery",
-    "catch_all_emails": "Catch all emails",
+    "catch_all_emails": "Catch-all domains",
     "unlimited_folders": "Unlimited folders",
-    "exclusive_access": "Exclusive access to new features",
+    "exclusive_access": "Exclusive beta access",
     "two_factore_auth": "2 Factor authentication",
-    "brute_force": "Brute force protection",
+    "brute_force": "Brute-force proof",
     "encrypted_content": "Encrypted content",
     "upgrade_anytime": "Upgrade <br> anytime",
     "select": "Select",
@@ -628,8 +631,9 @@
     "upload_limit_MB": "Attachment upload limit in MB",
     "storage_in_GB": "Storage in GB",
     "mail_aliases": "Email aliases",
-    "two_fac_authentication": "Two factor authentication",
+    "2fa_security": "2FA security",
     "support_custom_domains": "Multi user support under custom domains",
+    "remote_encrypted_link": "Remote encrypted link",
     "mails_of_custom_dom": "Catch all emails of a custom domain"
   },
   "login": {
diff --git a/src/assets/static/pricing-plans.json b/src/assets/static/pricing-plans.json
index 5e0d22704..df752fc52 100644
--- a/src/assets/static/pricing-plans.json
+++ b/src/assets/static/pricing-plans.json
@@ -10,16 +10,20 @@
     "gb": 1,
     "aliases": 0,
     "custom_domains": 0,
-    "ssl_tls": true,
+    "encryption_in_transit": true,
+    "encryption_at_rest": true,
     "encrypted_attachments": true,
     "encrypted_content": true,
     "encrypted_contacts": true,
     "encrypted_subjects": true,
+    "encrypted_body": true,
     "encrypted_metadata": false,
     "two_fa": true,
     "anti_phishing": true,
     "attachment_upload_limit": 10,
     "brute_force_protection": true,
+    "anonymized_ip": true,
+    "remote_encrypted_link": false,
     "zero_knowledge_password": true,
     "strip_ips": true,
     "sri": true,
@@ -29,7 +33,7 @@
     "dead_man_timer": false,
     "delayed_delivery": false,
     "four_data_deletion_methods": false,
-    "virus_detection_tool": false,
+    "virus_detection_tool": true,
     "catch_all_email": false,
     "unlimited_folders": true,
     "exclusive_access": false
@@ -45,16 +49,20 @@
     "gb": 5,
     "aliases": 10,
     "custom_domains": 1,
-    "ssl_tls": true,
+    "encryption_in_transit": true,
+    "encryption_at_rest": true,
     "encrypted_attachments": true,
     "encrypted_content": true,
     "encrypted_contacts": true,
     "encrypted_subjects": true,
+    "encrypted_body": true,
     "encrypted_metadata": true,
     "two_fa": true,
     "anti_phishing": true,
     "attachment_upload_limit": 50,
     "brute_force_protection": true,
+    "anonymized_ip": true,
+    "remote_encrypted_link": true,
     "zero_knowledge_password": true,
     "strip_ips": true,
     "sri": true,
@@ -80,16 +88,20 @@
     "gb": 10,
     "aliases": 30,
     "custom_domains": 5,
-    "ssl_tls": true,
+    "encryption_in_transit": true,
+    "encryption_at_rest": true,
     "encrypted_attachments": true,
     "encrypted_content": true,
     "encrypted_contacts": true,
     "encrypted_subjects": true,
+    "encrypted_body": true,
     "encrypted_metadata": true,
     "two_fa": true,
     "anti_phishing": true,
     "attachment_upload_limit": 50,
     "brute_force_protection": true,
+    "anonymized_ip": true,
+    "remote_encrypted_link": true,
     "zero_knowledge_password": true,
     "strip_ips": true,
     "sri": true,
@@ -115,16 +127,20 @@
     "gb": 20,
     "aliases": 60,
     "custom_domains": 10,
-    "ssl_tls": true,
+    "encryption_in_transit": true,
+    "encryption_at_rest": true,
     "encrypted_attachments": true,
     "encrypted_content": true,
     "encrypted_contacts": true,
     "encrypted_subjects": true,
+    "encrypted_body": true,
     "encrypted_metadata": true,
     "two_fa": true,
     "anti_phishing": true,
     "attachment_upload_limit": 50,
     "brute_force_protection": true,
+    "anonymized_ip": true,
+    "remote_encrypted_link": true,
     "zero_knowledge_password": true,
     "strip_ips": true,
     "sri": true,
@@ -150,16 +166,20 @@
     "gb": 50,
     "aliases": 100,
     "custom_domains": 25,
-    "ssl_tls": true,
+    "encryption_in_transit": true,
+    "encryption_at_rest": true,
     "encrypted_attachments": true,
     "encrypted_content": true,
     "encrypted_contacts": true,
     "encrypted_subjects": true,
+    "encrypted_body": true,
     "encrypted_metadata": true,
     "two_fa": true,
     "anti_phishing": true,
     "attachment_upload_limit": 50,
     "brute_force_protection": true,
+    "anonymized_ip": true,
+    "remote_encrypted_link": true,
     "zero_knowledge_password": true,
     "strip_ips": true,
     "sri": true,
@@ -185,16 +205,20 @@
     "gb": 50,
     "aliases": 200,
     "custom_domains": 100,
-    "ssl_tls": true,
+    "encryption_in_transit": true,
+    "encryption_at_rest": true,
     "encrypted_attachments": true,
     "encrypted_content": true,
     "encrypted_contacts": true,
     "encrypted_subjects": true,
+    "encrypted_body": true,
     "encrypted_metadata": true,
     "two_fa": true,
     "anti_phishing": true,
     "attachment_upload_limit": 50,
     "brute_force_protection": true,
+    "anonymized_ip": true,
+    "remote_encrypted_link": true,
     "zero_knowledge_password": true,
     "strip_ips": true,
     "sri": true,

From 359748df956aea034290deeaace3d290aee199c7 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Wed, 27 Jan 2021 22:07:48 -0400
Subject: [PATCH 09/33] Update dark mode refactoring including light mode
 (updating bootstrap, variables)

---
 .../mail-footer/mail-footer.component.scss    |  4 +-
 .../mail-header/mail-header.component.scss    | 14 ++--
 .../custom-domains.component.scss             |  4 +-
 .../folders/folders.component.scss            |  4 +-
 .../mail-settings.component.scss              | 12 ++--
 .../organization-users.component.scss         |  4 +-
 .../mail-sidebar/mail-sidebar.component.scss  |  1 +
 .../mail-sidebar/mail-sidebar.component.ts    |  7 +-
 src/app/mail/mail.component.scss              | 20 +++---
 .../shared/services/theme-toggle-service.ts   | 58 ++++++++++++++++
 src/app/shared/shared.module.ts               |  4 +-
 .../decrypt/decrypt-message.component.scss    |  2 +-
 .../display-secure-message.component.scss     |  2 +-
 .../reply-secure-message.component.scss       |  2 +-
 .../users-sign-in.component.scss              |  2 +-
 src/index.html                                |  4 +-
 src/styles.scss                               |  4 ++
 src/styles/_theme-variables-collection.scss   | 46 +++++++++++++
 src/styles/_themes.scss                       | 11 +++
 src/styles/base/_dark-variables.scss          | 68 +++++++++++++++++++
 src/styles/base/_light-variables.scss         | 11 +++
 src/styles/components.styles.scss             |  2 +-
 src/styles/modules/_blocks.scss               |  4 +-
 .../modules/bootstrap-overrides/_form.scss    |  6 +-
 src/styles/modules/cards/_package.scss        |  6 +-
 src/styles/modules/cards/_post.scss           |  8 ++-
 .../modules/mail-composer/_mail-composer.scss | 18 ++---
 .../modules/utilities/_form-fields.scss       | 30 ++++----
 .../pages/user-actions/_form-pages.scss       |  8 ++-
 src/styles/vendors/bootstrap/_close.scss      |  7 +-
 src/styles/vendors/bootstrap/_dropdown.scss   | 12 ++--
 src/styles/vendors/bootstrap/_reboot.scss     |  7 +-
 .../vendors/bootstrap/mixins/_alert.scss      |  4 +-
 .../vendors/bootstrap/mixins/_forms.scss      |  2 +-
 34 files changed, 318 insertions(+), 80 deletions(-)
 create mode 100644 src/app/shared/services/theme-toggle-service.ts
 create mode 100644 src/styles/_theme-variables-collection.scss
 create mode 100644 src/styles/_themes.scss
 create mode 100644 src/styles/base/_dark-variables.scss
 create mode 100644 src/styles/base/_light-variables.scss

diff --git a/src/app/mail/mail-footer/mail-footer.component.scss b/src/app/mail/mail-footer/mail-footer.component.scss
index 17ac0bf52..5b2eae7c0 100644
--- a/src/app/mail/mail-footer/mail-footer.component.scss
+++ b/src/app/mail/mail-footer/mail-footer.component.scss
@@ -32,7 +32,7 @@
     > a {
       position: relative;
       display: block;
-      color: $brand-gray;
+      color: var(--brand-gray);
       &:hover {
         color: $brand-primary;
       }
@@ -42,7 +42,7 @@
         top: 50%;
         right: -0.5rem;
         content: '';
-        border-right: 1px solid $brand-gray;
+        border-right: 1px solid var(--brand-gray);
         height: 10px;
         transform: translateY(-50%);
       }
diff --git a/src/app/mail/mail-header/mail-header.component.scss b/src/app/mail/mail-header/mail-header.component.scss
index 5111cebe0..ecd58632f 100644
--- a/src/app/mail/mail-header/mail-header.component.scss
+++ b/src/app/mail/mail-header/mail-header.component.scss
@@ -2,13 +2,15 @@
 @import '../../../styles/vendors/include-media/include-media';
 @import '../../../styles/config/include-media-config';
 @import '../../../styles/vendors/ceaser/ceaser-easing';
+@import '../../../styles/theme-variables-collection';
+@import '../../../styles/themes';
 
 // == Mailbox navbar
 .mailbox-navbar {
   position: relative;
   padding: 0.5rem 0.938rem;
-  background-color: $brand-faded;
-  border: 1px solid $dropdown-border-color;
+  background-color: var(--brand-faded);
+  border: 1px solid var(--dropdown-border-color);
   border-right: 0;
   border-left: 0;
 
@@ -120,8 +122,8 @@
       @include media('>sm') {
         padding: 0.438rem 0.813rem;
         background: $brand-white;
-        border: 1px solid $dropdown-border-color;
-        color: $brand-light-gray;
+        border: 1px solid var(--dropdown-border-color);
+        color: var(--brand-light-gray);
         font-size: 1.25rem;
 
         &.active,
@@ -156,7 +158,7 @@
 
     a:hover,
     .dropdown-toggle:hover {
-      background: $brand-faded;
+      background: var(--brand-faded);
       // TODO: add scss variables files in refactor
       color: #8a9095;
       border-color: #8a9095;
@@ -179,7 +181,7 @@
   .dropdown-toggle {
     padding-top: 0.938rem;
     padding-bottom: 0.938rem;
-    color: $brand-light-gray;
+    color: var(--brand-light-gray);
     font-size: 0.875rem;
     height: 3rem;
     width: 4.625rem;
diff --git a/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss b/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss
index 89aeff9bb..66e8c83ce 100644
--- a/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss
+++ b/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss
@@ -2,6 +2,8 @@
 @import '~styles/vendors/include-media/include-media';
 @import '~styles/config/include-media-config';
 @import '~styles/vendors/ceaser/ceaser-easing';
+@import '~styles/theme-variables-collection';
+@import '~styles/themes';
 
 .domain-body {
   padding-left: 1.563rem;
@@ -126,7 +128,7 @@
 
           &:hover {
             opacity: 1;
-            background-color: $brand-faded;
+            background-color: var(--brand-faded);
             color: #949494;
           }
         }
diff --git a/src/app/mail/mail-settings/folders/folders.component.scss b/src/app/mail/mail-settings/folders/folders.component.scss
index 4874c0f52..f1ed9d164 100644
--- a/src/app/mail/mail-settings/folders/folders.component.scss
+++ b/src/app/mail/mail-settings/folders/folders.component.scss
@@ -22,8 +22,8 @@
 
 .folders-list {
   height: auto;
-  border-top: 1px solid $dropdown-border-color;
-  border-bottom: 1px solid $dropdown-border-color;
+  border-top: 1px solid var(--dropdown-border-color);
+  border-bottom: 1px solid var(--dropdown-border-color);
 }
 
 .sort-alphabetic-btn {
diff --git a/src/app/mail/mail-settings/mail-settings.component.scss b/src/app/mail/mail-settings/mail-settings.component.scss
index de66c77f4..3af790f9e 100644
--- a/src/app/mail/mail-settings/mail-settings.component.scss
+++ b/src/app/mail/mail-settings/mail-settings.component.scss
@@ -2,6 +2,8 @@
 @import '../../../styles/vendors/include-media/include-media';
 @import '../../../styles/config/include-media-config';
 @import '../../../styles/vendors/ceaser/ceaser-easing';
+@import '../../../styles/theme-variables-collection';
+@import '../../../styles/themes';
 
 $error-red: #e94e4c;
 
@@ -31,9 +33,9 @@ $error-red: #e94e4c;
     }
 
     .info-list-detail {
-      background: white;
+      background: var(--brand-faded);
       i {
-        color: $body-color;
+        color: var(--body-color);
       }
       .info-list-action {
         margin-top: 1.5rem;
@@ -51,7 +53,7 @@ $error-red: #e94e4c;
   align-items: center;
   flex-wrap: wrap;
   padding: 1.188rem 0.938rem;
-  background: $brand-faded;
+  background: var(--brand-faded);
   border: 1px solid darken($brand-faded, 3%);
   font-size: 0.875rem;
   line-height: 1.14;
@@ -80,7 +82,7 @@ $error-red: #e94e4c;
 .info-list-val {
   width: calc(100% - 140px - 1.25rem); //~calc(100% - 65px - 1.25rem);
   i {
-    color: $body-color;
+    color: var(--body-color);
   }
 }
 
@@ -291,7 +293,7 @@ $error-red: #e94e4c;
     padding-left: 0.563rem;
 
     .icon {
-      color: $brand-light-gray;
+      color: var(--brand-light-gray);
       font-size: 1.063rem;
       line-height: 1.188;
     }
diff --git a/src/app/mail/mail-settings/organization/organization-users/organization-users.component.scss b/src/app/mail/mail-settings/organization/organization-users/organization-users.component.scss
index 498a1749f..8868a54af 100644
--- a/src/app/mail/mail-settings/organization/organization-users/organization-users.component.scss
+++ b/src/app/mail/mail-settings/organization/organization-users/organization-users.component.scss
@@ -1,4 +1,6 @@
 @import '~styles/base/variables';
+@import '~styles/theme-variables-collection';
+@import '~styles/themes';
 
 .users-body {
   padding-left: 1.563rem;
@@ -69,7 +71,7 @@
   padding: 10px 15px;
 
   &:hover {
-    background-color: $brand-faded;
+    background-color: var(--brand-faded);
   }
 }
 
diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.scss b/src/app/mail/mail-sidebar/mail-sidebar.component.scss
index 03848e85b..604b01b79 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.scss
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.scss
@@ -92,6 +92,7 @@
 }
 
 .mailbox-sidebar {
+  border-right: var(--width-0-2) solid var(--sidebar-border-right);
   @include media('>sm', '<ipad') {
     .mailbox-sidebar-nav-link + button {
       display: none;
diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.ts b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
index 842dc9349..872d5f68b 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.ts
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
@@ -37,6 +37,7 @@ import {
   StarredFolderCountUpdate,
 } from '../../store/actions';
 import { WebsocketService } from '../../shared/services/websocket.service';
+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';
@@ -100,6 +101,7 @@ export class MailSidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     @Inject(DOCUMENT) private document: Document,
     private sharedService: SharedService,
     private cdr: ChangeDetectorRef,
+    private themeToggleService: ThemeToggleService,
   ) {
     // customize default values of dropdowns used by this component tree
     config.autoClose = 'outside';
@@ -188,7 +190,7 @@ 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.handleDarkMode(user.settings.is_night_mode);
         this.handleCustomCss(user.settings.custom_css);
       });
 
@@ -228,7 +230,8 @@ 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.handleDarkMode(false);
+        this.themeToggleService.forceUpdateTheme(false);
       }
     });
   }
diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index bb82cd752..d928743a3 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -2,6 +2,8 @@
 @import '../../styles/vendors/include-media/include-media';
 @import '../../styles/config/include-media-config';
 @import '../../styles/vendors/ceaser/ceaser-easing';
+@import '../../styles/theme-variables-collection';
+@import '../../styles/themes';
 
 // == Mailbox content
 .app-outer-mailbox {
@@ -47,7 +49,7 @@
   top: 0;
   bottom: 0;
   left: 0;
-  background-color: #34495e;
+  background-color: var(--brand-secondary);
   width: 220px;
 
   @include media('<ipad') {
@@ -354,11 +356,11 @@
 
 .divider-item {
   margin: 0.375rem 0.938rem;
-  border-top: 1px solid $divider-color;
+  border-top: 1px solid var(--divider-color);
 }
 
 .mailbox-sidebar-footer {
-  background: #29394e;
+  background: var(--sidebar-footer-background);
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -680,7 +682,7 @@
 .more-xs-options {
   .mobiledOptionsDropdown {
     padding: 0.75rem 0.938rem;
-    background: $brand-faded;
+    background: var(--brand-faded);
     &.dropdown-menu {
       margin-top: 1px;
       right: 0;
@@ -713,7 +715,7 @@
 
   [class*='mail-nav-control-'] {
     background: #f5f5f5;
-    border: 1px solid $dropdown-border-color;
+    border: 1px solid var(--dropdown-border-color);
     border-radius: 2px;
     color: $gray-9e9e9e;
     font-size: 0.75rem;
@@ -808,7 +810,7 @@
 
   [class*='mail-nav-control-'] {
     background: #f5f5f5;
-    border: 1px solid $dropdown-border-color;
+    border: 1px solid var(--dropdown-border-color);
     border-radius: 2px;
     color: $gray-9e9e9e;
     font-size: 0.75rem;
@@ -933,7 +935,7 @@
 
   &.is-read {
     background-color: #fff;
-    color: $brand-gray;
+    color: var(--brand-gray);
   }
 
   &.is-checked {
@@ -1133,7 +1135,7 @@
   }
 
   .mail-status-type .icon-star {
-    color: $dropdown-border-color;
+    color: var(--dropdown-border-color);
   }
 
   .mail-status-type.is-fav .icon-star-filled {
@@ -1355,7 +1357,7 @@
 
 .ngb-dp-header {
   padding-top: 1rem !important;
-  background: $brand-faded;
+  background: var(--brand-faded);
 }
 
 .ngb-dp-arrow {
diff --git a/src/app/shared/services/theme-toggle-service.ts b/src/app/shared/services/theme-toggle-service.ts
new file mode 100644
index 000000000..92f3a954a
--- /dev/null
+++ b/src/app/shared/services/theme-toggle-service.ts
@@ -0,0 +1,58 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+
+import { AppState, UserState } from '../../store/datatypes';
+
+export enum ThemeMode {
+    DARK, LIGHT
+}
+
+@UntilDestroy()
+@Injectable({
+    providedIn: 'root'
+})
+export class ThemeToggleService implements OnDestroy {
+    private readonly LIGHT_THEME_CLASS_NAME = 'theme-light';
+    private readonly DARK_THEME_CLASS_NAME = 'theme-dark';
+
+    private isDarkMode = false;
+    public theme$ = new BehaviorSubject<ThemeMode>(ThemeMode.LIGHT);
+
+    constructor(
+        private store: Store<AppState>
+    ) {
+        /**
+         * Get user settings
+         */
+        this.store
+            .select(state => state.user)
+            .pipe(untilDestroyed(this))
+            .subscribe((user: UserState) => {
+                const isDarkMode = user.settings.is_night_mode;
+                if (this.isDarkMode !== isDarkMode) {
+                    this.isDarkMode = isDarkMode;
+                    this.updateTheme(this.isDarkMode);
+                }
+            });
+    }
+
+    private updateTheme(isDarkMode) {
+        if (isDarkMode) {
+            document.body.classList.add(this.DARK_THEME_CLASS_NAME);
+            document.body.classList.remove(this.LIGHT_THEME_CLASS_NAME);
+            this.theme$.next(ThemeMode.DARK);
+        } else {
+            document.body.classList.add(this.LIGHT_THEME_CLASS_NAME);
+            document.body.classList.remove(this.DARK_THEME_CLASS_NAME);
+            this.theme$.next(ThemeMode.LIGHT);
+        }
+    }
+
+    public forceUpdateTheme(isDarkMode) {
+        this.updateTheme(isDarkMode);
+    }
+
+    ngOnDestroy(): void {}
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index de09861b3..9a7be4635 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { CreditCardNumberPipe } from './pipes/creditcard-number.pipe';
 import { EmailFormatPipe } from './pipes/email-formatting.pipe';
 import { LineBreakToBrTag } from './pipes/replace-linebreak-brtag.pipe';
 import { CircleBarSpinnerComponent } from './circle-bar-spinner/circle-bar-spinner.component';
+import { ThemeToggleService } from './services/theme-toggle-service';
 
 @NgModule({
   imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, TagInputModule, MatIconModule, NgbModule],
@@ -99,7 +100,8 @@ import { CircleBarSpinnerComponent } from './circle-bar-spinner/circle-bar-spinn
     FilenamePipe,
     CreditCardNumberPipe,
     LineBreakToBrTag,
-    EmailFormatPipe
+    EmailFormatPipe,
+    ThemeToggleService
   ],
   entryComponents: [CreateFolderComponent, PaymentFailureNoticeComponent],
 })
diff --git a/src/app/users/decrypt/decrypt-message.component.scss b/src/app/users/decrypt/decrypt-message.component.scss
index 78a6a4d97..69433043f 100644
--- a/src/app/users/decrypt/decrypt-message.component.scss
+++ b/src/app/users/decrypt/decrypt-message.component.scss
@@ -44,7 +44,7 @@
 .form-control {
   &:focus,
   &:focus + .input-group-addon {
-    border-color: $dropdown-border-color !important;
+    border-color: var(--dropdown-border-color) !important;
   }
 }
 
diff --git a/src/app/users/display-secure-message/display-secure-message.component.scss b/src/app/users/display-secure-message/display-secure-message.component.scss
index 903706fce..c6de52b06 100644
--- a/src/app/users/display-secure-message/display-secure-message.component.scss
+++ b/src/app/users/display-secure-message/display-secure-message.component.scss
@@ -164,7 +164,7 @@
 }
 
 .actions-btn.actions-btn-inline {
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   font-size: 0.625rem;
   min-width: 4.125rem;
   width: inherit;
diff --git a/src/app/users/reply-secure-message/reply-secure-message.component.scss b/src/app/users/reply-secure-message/reply-secure-message.component.scss
index 903706fce..c6de52b06 100644
--- a/src/app/users/reply-secure-message/reply-secure-message.component.scss
+++ b/src/app/users/reply-secure-message/reply-secure-message.component.scss
@@ -164,7 +164,7 @@
 }
 
 .actions-btn.actions-btn-inline {
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   font-size: 0.625rem;
   min-width: 4.125rem;
   width: inherit;
diff --git a/src/app/users/users-sign-in/users-sign-in.component.scss b/src/app/users/users-sign-in/users-sign-in.component.scss
index a7c17c39d..64c6846b8 100644
--- a/src/app/users/users-sign-in/users-sign-in.component.scss
+++ b/src/app/users/users-sign-in/users-sign-in.component.scss
@@ -43,7 +43,7 @@ $error-red: #e94e4c;
 .form-control {
   &:focus,
   &:focus + .input-group-addon {
-    border-color: $dropdown-border-color !important;
+    border-color: var(--dropdown-border-color) !important;
   }
   &[type='text'] {
     + span .fa-eye {
diff --git a/src/index.html b/src/index.html
index e4ac4dbd7..bb97ed93a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,7 +22,7 @@
     <link href="assets/css/noscript-styles.css" rel="stylesheet" />
   </head>
 
-  <body>
+  <body class="theme-light">
     <script type="text/javascript" integrity="sha384-jeMare1Tag4YJDru+W5NJpF9ma+9ARdnJ+RNjR+dr9SU2PkQCpSQ4m/gW2uXmlQ2" src="assets/js/browser-compatibility.js"></script>
     <noscript>
       <header class="nav-fixed" role="banner">
@@ -72,6 +72,6 @@ <h1 class="page-title text-secondary">JavaScript <strong>REQUIRED</strong></h1>
     </noscript>
     <app-root></app-root>
   </body>
-  <style rel="stylesheet" id="night-mode"></style>
+  <!-- <style rel="stylesheet" id="night-mode"></style> -->
   <style rel="stylesheet" id="ctemplar-custom-css"></style>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index 25f5fcf2b..c93df8849 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -71,6 +71,10 @@
 // Components global styles
 @import 'styles/components.styles';
 
+// Theme styles
+@import 'styles/theme-variables-collection';
+@import 'styles/themes';
+
 .loading-icon {
   position: absolute;
   top: 28vh;
diff --git a/src/styles/_theme-variables-collection.scss b/src/styles/_theme-variables-collection.scss
new file mode 100644
index 000000000..d39d6b595
--- /dev/null
+++ b/src/styles/_theme-variables-collection.scss
@@ -0,0 +1,46 @@
+@import 'base/dark-variables';
+@import 'base/light-variables';
+@import 'base/variables';
+
+$width-0: 0;
+$width-1: 1px;
+$width-2: 2px;
+$width-3: 3px;
+
+$variables: (
+    // General
+    --brand-secondary: ($brand-secondary, $brand-secondary-dark),
+    --text-color: ($text-color, $text-color-dark),
+    --body-color: ($body-color, $body-color-dark),
+    --control-label-text-color: ($control-text-color-light, $text-color-dark),
+    --divider-color: ($divider-color, $divider-color-dark),
+    --border-gray: ($border-gray, $border-gray-dark),
+    --brand-gray: ($brand-gray, $brand-gray-dark),
+    --brand-light-gray: ($brand-light-gray, $brand-light-gray-dark),
+    --brand-faded: ($brand-faded, $brand-faded-dark),
+    --text-muted: ($text-muted, $text-muted-dark),
+
+    // Width
+    --width-0-1: ($width-0, $width-1),
+    --width-1-0: ($width-1, $width-0),
+    --width-0-2: ($width-0, $width-2),
+    --width-2-0: ($width-2, $width-0),
+
+    // Dropdown
+    --dropdown-link-active-bg: ($dropdown-link-active-bg, $dropdown-link-active-bg-dark),
+    --dropdown-link-active-color: ($dropdown-link-active-color, $dropdown-link-active-color-dark),
+    --dropdown-border-color: ($dropdown-border-color, $dropdown-border-color-dark),
+    --dropdown-link-hover-bg: ($dropdown-link-hover-bg, $dropdown-link-hover-bg-dark),
+
+    // Form Fields
+    --input-border-color: ($input-border-color, $input-border-color-dark),
+    --input-border-focus: ($input-border-focus, $input-border-focus-dark),
+
+    // Modal
+    --close-color: ($close-color, $close-color-dark),
+
+    // Customizing components
+    --sidebar-footer-background: ($sidebar-footer-background-light, $sidebar-footer-background-dark),
+    // --sidebar-border-right: var(--width-0-2) solid var(--sidebar-border-right),
+    --sidebar-border-right: ($sidebar-border-right-light, $sidebar-border-right-dark),
+)
\ No newline at end of file
diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss
new file mode 100644
index 000000000..92af63f1a
--- /dev/null
+++ b/src/styles/_themes.scss
@@ -0,0 +1,11 @@
+.theme-light {
+    @each $name, $value in $variables {
+        #{$name}: nth($value, 1);
+    }
+}
+
+.theme-dark {
+    @each $name, $value in $variables {
+        #{$name}: nth($value, 2);
+    }
+}
\ No newline at end of file
diff --git a/src/styles/base/_dark-variables.scss b/src/styles/base/_dark-variables.scss
new file mode 100644
index 000000000..02a153948
--- /dev/null
+++ b/src/styles/base/_dark-variables.scss
@@ -0,0 +1,68 @@
+
+@import '../vendors/bootstrap/variables';
+////
+//== Variables
+////
+// Sidebar background...
+$brand-secondary-dark: #161f34;
+$brand-secondary-darker: darken($brand-secondary-dark, 20%);
+
+// Header background...
+$brand-third-dark: #20273e;
+
+// Action button background, Tab bar on settings, Input background....
+$brand-fourth-dark: #363d51;
+
+// Border color...
+// Control border
+$control-border-color-dark: #474e61;
+// Panel border
+$control-border-1-color-dark: #323a4c;
+
+// Text color
+$dark-primary-fore-color: $white;
+
+// Controls
+$action-control-background: $brand-fourth-dark;
+$action-control-active-background: darken($brand-fourth-dark, 15%);
+
+//////
+//## Start redefining the variables on original variables
+//////
+// == General
+$text-color-dark: $dark-primary-fore-color;
+$body-color-dark: $dark-primary-fore-color;
+$divider-color-dark: $dark-primary-fore-color;
+$border-gray-dark: $dark-primary-fore-color;
+$brand-gray-dark: $dark-primary-fore-color;
+$brand-light-gray-dark: $dark-primary-fore-color;
+$brand-faded-dark: $brand-third-dark;
+$text-muted-dark: $dark-primary-fore-color;
+
+// == Dropdowns
+$dropdown-link-active-bg-dark: $action-control-active-background;
+$dropdown-link-active-color-dark: $text-color-dark;
+$dropdown-border-color-dark: $control-border-color-dark;
+$dropdown-link-hover-bg-dark: $brand-faded-dark;
+
+// == Form fields
+$input-border-color-dark: $control-border-color-dark;
+$input-border-focus-dark: $control-border-color-dark;
+
+// == Modal
+$close-color-dark: $text-color-dark;
+
+//////
+//## End redefining the variables on original variables
+//////
+
+
+
+//////
+//## Start Component customzing
+//////
+$sidebar-footer-background-dark: $brand-secondary-darker;
+$sidebar-border-right-dark: $control-border-1-color-dark;
+
+$mail-list-background-dark: $brand-third-dark;
+$mail-list-background-active-dark: lighten($brand-third-dark, 10%);
\ No newline at end of file
diff --git a/src/styles/base/_light-variables.scss b/src/styles/base/_light-variables.scss
new file mode 100644
index 000000000..c579cd458
--- /dev/null
+++ b/src/styles/base/_light-variables.scss
@@ -0,0 +1,11 @@
+@import '../vendors/bootstrap/variables';
+
+$brand-secondary-light: $brand-secondary;
+
+$control-text-color-light: $brand-secondary;
+
+//////
+//## Start Component customzing
+//////
+$sidebar-footer-background-light: #29394e;
+$sidebar-border-right-light: transparent;
\ No newline at end of file
diff --git a/src/styles/components.styles.scss b/src/styles/components.styles.scss
index c961ec830..a0b232ead 100644
--- a/src/styles/components.styles.scss
+++ b/src/styles/components.styles.scss
@@ -232,7 +232,7 @@ app-mail-detail {
   }
 
   div {
-    color: #29394e;
+    color: var(--sidebar-footer-background);
   }
 }
 
diff --git a/src/styles/modules/_blocks.scss b/src/styles/modules/_blocks.scss
index 287914f2c..7f61dbdb4 100644
--- a/src/styles/modules/_blocks.scss
+++ b/src/styles/modules/_blocks.scss
@@ -1,6 +1,8 @@
 /**
 * Block modules scss file which includes reusable block related style rules
 */
+@import '../theme-variables-collection';
+@import '../themes';
 
 // == Equal gap
 .gap-p-eq {
@@ -135,7 +137,7 @@
     top: -2rem;
     content: '';
     display: block;
-    background: $brand-faded;
+    background: var(--brand-faded);
     width: calc(115% + 4rem);
     height: 4.5rem;
     transform: skew(48deg) rotate(-4deg);
diff --git a/src/styles/modules/bootstrap-overrides/_form.scss b/src/styles/modules/bootstrap-overrides/_form.scss
index b2c5fb715..c3c1246ab 100644
--- a/src/styles/modules/bootstrap-overrides/_form.scss
+++ b/src/styles/modules/bootstrap-overrides/_form.scss
@@ -1,6 +1,8 @@
 /**
 * Bootstrap form override
 */
+@import '../../theme-variables-collection';
+@import '../../themes';
 
 select::-ms-expand {
   display: none !important;
@@ -36,7 +38,7 @@ input:-webkit-autofill {
 
   &:focus {
     //box-shadow: 0 0 4px 0 rgba(51, 72, 93, 0.3) !important;
-    border-color: $brand-secondary !important;
+    border-color: var(--brand-secondary) !important;
   }
 
   .is-validate & {
@@ -50,7 +52,7 @@ input:-webkit-autofill {
       box-shadow: none !important;
 
       + .input-group-addon {
-        border-color: $brand-secondary;
+        border-color: var(--brand-secondary);
       }
     }
   }
diff --git a/src/styles/modules/cards/_package.scss b/src/styles/modules/cards/_package.scss
index d7c6566d0..ff5a2fcc7 100644
--- a/src/styles/modules/cards/_package.scss
+++ b/src/styles/modules/cards/_package.scss
@@ -1,6 +1,8 @@
 /**
 * Package card modules scss file which includes style rules related to pricing
 */
+@import '../../theme-variables-collection';
+@import '../../themes';
 
 // == package card
 .package-card {
@@ -79,7 +81,7 @@
   }
 
   &.has-border {
-    border-bottom: 1px solid $border-gray;
+    border-bottom: 1px solid var(--border-gray);
 
     .fa {
       position: absolute;
@@ -260,7 +262,7 @@
     }
 
     > li > a {
-      color: $brand-gray;
+      color: var(--brand-gray);
       font-size: 0.875rem;
       font-weight: 500;
 
diff --git a/src/styles/modules/cards/_post.scss b/src/styles/modules/cards/_post.scss
index be50e7cdf..3d169a391 100644
--- a/src/styles/modules/cards/_post.scss
+++ b/src/styles/modules/cards/_post.scss
@@ -1,6 +1,8 @@
 /**
 * Post card modules scss file which includes reusable post cards
 */
+@import '../../theme-variables-collection';
+@import '../../themes';
 
 // == badge
 .badge {
@@ -21,7 +23,7 @@
 
 // == News / Blog post cards
 .news-card-holder {
-  color: $brand-gray;
+  color: var(--brand-gray);
   font-size: 0.875rem;
 
   @include media('>sm') {
@@ -30,7 +32,7 @@
 
   &:hover,
   &:focus {
-    color: $brand-gray;
+    color: var(--brand-gray);
   }
 
   &:hover {
@@ -86,7 +88,7 @@
   align-items: center;
   margin: 0 -10px;
   padding-left: 0;
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   font-style: italic;
   list-style: none;
 
diff --git a/src/styles/modules/mail-composer/_mail-composer.scss b/src/styles/modules/mail-composer/_mail-composer.scss
index dd2257644..7d163e8de 100644
--- a/src/styles/modules/mail-composer/_mail-composer.scss
+++ b/src/styles/modules/mail-composer/_mail-composer.scss
@@ -1,6 +1,8 @@
 /**
 * Mail composer module
 */
+@import '../../theme-variables-collection';
+@import '../../themes';
 
 // == Mail composer
 $mail_composer_padding_x: 0.75rem;
@@ -119,7 +121,7 @@ a {
 
 // == Mail compose is-bordered
 .mail-composer.is-borderd {
-  border: 1px solid $dropdown-border-color;
+  border: 1px solid var(--dropdown-border-color);
 }
 
 // == Is minimized
@@ -374,7 +376,7 @@ a {
 // Mail composer footer
 .mail-composer-footer {
   padding: 0.5rem $mail_composer_padding_x;
-  background: $brand-faded;
+  background: var(--brand-faded);
   border: 1px solid $input-border-color;
   margin-bottom: -26px;
 
@@ -445,10 +447,10 @@ a {
 .actions-btn {
   position: relative;
   padding: 1rem 0.5rem;
-  background: $brand-faded;
+  background: var(--brand-faded);
   border: 1px solid $input-border-color;
   border-radius: 2px;
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   height: 2rem;
   width: 2.25rem;
 
@@ -494,7 +496,7 @@ a {
   position: relative;
   margin-bottom: 0.5rem;
   padding: 0.563rem 1.563rem 0.563rem 0.75rem;
-  background: $brand-faded;
+  background: var(--brand-faded);
   border: 1px solid $input-border-color;
   border-radius: 2px;
   line-height: 1;
@@ -534,7 +536,7 @@ a {
   padding: 0 0;
   background: transparent;
   border: 0;
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   font-size: 0.613rem;
   transform: translateY(-50%);
 }
@@ -784,12 +786,12 @@ a {
   .dropdown-link {
     display: block;
     padding: 0.5rem 0.75rem;
-    color: $brand-gray;
+    color: var(--brand-gray);
     font-size: 0.813rem;
     text-align: center;
 
     &:hover {
-      background: $brand-faded;
+      background: var(--brand-faded);
     }
   }
 }
diff --git a/src/styles/modules/utilities/_form-fields.scss b/src/styles/modules/utilities/_form-fields.scss
index 78c8456bc..66df840e4 100644
--- a/src/styles/modules/utilities/_form-fields.scss
+++ b/src/styles/modules/utilities/_form-fields.scss
@@ -1,6 +1,8 @@
 /**
 * Fancy form fields styles
 */
+@import '../../theme-variables-collection';
+@import '../../themes';
 
 .fancy-field-group {
 }
@@ -15,7 +17,7 @@ input[type='radio'].fancy-field-control + label {
   display: inline-block;
   margin-bottom: 0;
   padding-left: 1.625rem;
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   vertical-align: middle;
   cursor: pointer;
   transition: all ceaser($easeInOutQuint) 0.35s;
@@ -49,14 +51,14 @@ input[type='radio'].fancy-field-control + label {
 
 // == Checked
 input[type='radio'].fancy-field-control:checked + label {
-  color: $brand-secondary;
+  color: var(--brand-secondary);
 
   &::before {
-    border-color: $brand-secondary;
+    border-color: var(--brand-secondary);
   }
 
   &::after {
-    background: $brand-secondary;
+    background: var(--brand-secondary);
   }
 }
 
@@ -80,7 +82,7 @@ input[type='checkbox'].fancy-field-control + label {
   display: inline-block;
   margin-bottom: 0;
   padding-left: 1.625rem;
-  color: $brand-light-gray;
+  color: var(--brand-light-gray);
   vertical-align: middle;
   cursor: pointer;
   transition: all ceaser($easeInOutQuint) 0.35s;
@@ -159,20 +161,20 @@ input[type='checkbox'].fancy-field-control-sm + label {
 
 // == Checked
 input[type='checkbox'].fancy-field-control:checked + label {
-  color: $brand-secondary;
+  color: var(--control-label-text-color);
 
   &::before {
-    border-color: $brand-secondary;
+    border-color: var(--brand-secondary);
   }
 
   &::after {
-    border-color: $brand-secondary;
+    border-color: var(--brand-secondary);
   }
 }
 
 input[type='checkbox'].fancy-field-control.checked-type-minus:checked + label {
   &::after {
-    background: $brand-secondary;
+    background: var(--brand-secondary);
   }
 }
 
@@ -187,7 +189,7 @@ input[type='checkbox'].fancy-field-control.checked-type-minus:checked + label {
   position: relative;
   margin-bottom: 0;
   margin-right: 1rem;
-  background: $brand-faded;
+  background: var(--brand-faded);
   border: 1px solid $input-border-color;
   border-radius: 0.625rem;
   height: 1.25rem;
@@ -224,14 +226,14 @@ input[type='checkbox'].fancy-field-control.checked-type-minus:checked + label {
   }
 
   + .toggle-switcher-text {
-    color: $brand-light-gray;
+    color: var(--brand-light-gray);
   }
 }
 
 .toggle-switcher-control:checked + label {
   &::before {
-    background: #34495e;
-    color: $brand-white;
+    background: var(--brand-secondary);
+    color: var(--text-color);
     width: 1.75rem;
   }
 
@@ -241,6 +243,6 @@ input[type='checkbox'].fancy-field-control.checked-type-minus:checked + label {
   }
 
   + .toggle-switcher-text {
-    color: $brand-secondary;
+    color: var(--text-color);
   }
 }
diff --git a/src/styles/pages/user-actions/_form-pages.scss b/src/styles/pages/user-actions/_form-pages.scss
index f9d706bd5..24f20f693 100644
--- a/src/styles/pages/user-actions/_form-pages.scss
+++ b/src/styles/pages/user-actions/_form-pages.scss
@@ -1,6 +1,8 @@
 /**
 * @partial: _inbox.scss
 */
+@import '../../theme-variables-collection';
+@import '../../themes';
 
 // == Create account page
 .form-card-holder {
@@ -43,7 +45,7 @@
       left: 0rem;
       counter-increment: counterStep;
       content: counter(counterStep);
-      background: $brand-faded;
+      background: var(--brand-faded);
       border-radius: 50%;
       box-shadow: 0 4px 7px 0 rgba(6, 0, 68, 0.15);
       color: $brand-black;
@@ -105,7 +107,7 @@
 // == Billing page
 .form-card-holder-top-border {
   padding-top: 0.938rem;
-  border-top: 1px solid $dropdown-border-color;
+  border-top: 1px solid var(--dropdown-border-color);
 
   @include media('>sm') {
     padding-top: 2rem;
@@ -222,7 +224,7 @@
 .form-step-card {
   .btn-dropdown-lg .dropdown-toggle {
     padding: 0.875rem 0.75rem;
-    color: $brand-light-gray;
+    color: var(--brand-light-gray);
     font-style: italic;
     height: 3rem;
 
diff --git a/src/styles/vendors/bootstrap/_close.scss b/src/styles/vendors/bootstrap/_close.scss
index 491562983..811f84e79 100644
--- a/src/styles/vendors/bootstrap/_close.scss
+++ b/src/styles/vendors/bootstrap/_close.scss
@@ -1,14 +1,17 @@
+@import '../../theme-variables-collection';
+@import '../../themes';
+
 .close {
   float: right;
   font-size: $close-font-size;
   font-weight: $close-font-weight;
   line-height: 1;
-  color: $close-color;
+  color: var(--close-color);
   text-shadow: $close-text-shadow;
   opacity: 0.5;
 
   @include hover-focus {
-    color: $close-color;
+    color: var(--close-color);
     text-decoration: none;
     cursor: pointer;
     opacity: 0.75;
diff --git a/src/styles/vendors/bootstrap/_dropdown.scss b/src/styles/vendors/bootstrap/_dropdown.scss
index e3807e8ff..3ef6f9773 100644
--- a/src/styles/vendors/bootstrap/_dropdown.scss
+++ b/src/styles/vendors/bootstrap/_dropdown.scss
@@ -1,4 +1,8 @@
 // The dropdown wrapper (`<div>`)
+
+@import '../../theme-variables-collection';
+@import '../../themes';
+
 .dropup,
 .dropdown {
   position: relative;
@@ -45,12 +49,12 @@
   padding: $dropdown-padding-y 0;
   margin: $dropdown-margin-top 0 0; // override default ul
   font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
-  color: $body-color;
+  color: var(--body-color);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
   background-color: $dropdown-bg;
   background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
+  border: $dropdown-border-width solid var(--dropdown-border-color);
   @include border-radius($border-radius);
   @include box-shadow($dropdown-box-shadow);
 }
@@ -83,9 +87,9 @@
 
   &.active,
   &:active {
-    color: $dropdown-link-active-color;
+    color: var(--dropdown-link-active-color);
     text-decoration: none;
-    background-color: $dropdown-link-active-bg;
+    background-color: var(--dropdown-link-active-bg);
   }
 
   &.disabled,
diff --git a/src/styles/vendors/bootstrap/_reboot.scss b/src/styles/vendors/bootstrap/_reboot.scss
index ae271de3e..d90bf9a33 100644
--- a/src/styles/vendors/bootstrap/_reboot.scss
+++ b/src/styles/vendors/bootstrap/_reboot.scss
@@ -1,5 +1,6 @@
 // scss-lint:disable QualifyingElement, DuplicateProperty
-
+@import '../../theme-variables-collection';
+@import '../../themes';
 // Reboot
 //
 // Global resets to common HTML elements and more for easier usage by Bootstrap.
@@ -77,7 +78,7 @@ body {
   font-weight: $font-weight-base;
   line-height: $line-height-base;
   // Go easy on the eyes and use something other than `#000` for text
-  color: $body-color;
+  color: var(--body-color);
   // By default, `<body>` has no `background-color` so we set one as a best practice.
   background-color: $body-bg;
 }
@@ -273,7 +274,7 @@ table {
 caption {
   padding-top: $table-cell-padding;
   padding-bottom: $table-cell-padding;
-  color: $text-muted;
+  color: var(--text-muted);
   text-align: left;
   caption-side: bottom;
 }
diff --git a/src/styles/vendors/bootstrap/mixins/_alert.scss b/src/styles/vendors/bootstrap/mixins/_alert.scss
index 6ed3a81ab..f658aa3ee 100644
--- a/src/styles/vendors/bootstrap/mixins/_alert.scss
+++ b/src/styles/vendors/bootstrap/mixins/_alert.scss
@@ -1,9 +1,11 @@
 // Alerts
+@import '../../../theme-variables-collection';
+@import '../../../themes';
 
 @mixin alert-variant($background, $border, $body-color) {
   background-color: $background;
   border-color: $border;
-  color: $body-color;
+  color: var(--body-color);
 
   hr {
     border-top-color: darken($border, 5%);
diff --git a/src/styles/vendors/bootstrap/mixins/_forms.scss b/src/styles/vendors/bootstrap/mixins/_forms.scss
index c8aea9669..7dfe63c0e 100644
--- a/src/styles/vendors/bootstrap/mixins/_forms.scss
+++ b/src/styles/vendors/bootstrap/mixins/_forms.scss
@@ -46,7 +46,7 @@
   &:focus {
     color: $input-color-focus;
     background-color: $input-bg-focus;
-    border-color: $input-border-focus;
+    border-color: var(--input-border-focus);
     outline: none;
     @include box-shadow($input-box-shadow-focus);
   }

From dd20286fda810ceddeba7c861d8493bf47feca32 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Wed, 27 Jan 2021 22:55:27 -0400
Subject: [PATCH 10/33] Update dark mode

---
 src/app/mail/mail.component.scss            | 13 ++++++++-----
 src/styles.scss                             | 16 ++++++++++++++++
 src/styles/_theme-variables-collection.scss | 14 +++++++++++++-
 src/styles/base/_dark-variables.scss        | 14 ++++++++++++--
 src/styles/base/_light-variables.scss       | 15 ++++++++++++++-
 5 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index d928743a3..a6f0721ae 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -916,9 +916,9 @@
 }
 
 .mail-list-row {
-  position: relative;
+  // position: relative;
   padding: 0.75rem 0.938rem;
-  border-bottom: 1px solid $input-border-color;
+  border-bottom: 1px solid var(--mail-row-border-bottom-color);
   font-size: 0.75rem;
   line-height: 1;
   background-color: #fafaf9;
@@ -930,11 +930,11 @@
 
   &.is-unread {
     color: $brand-black !important;
-    background: #f5f5f5;
+    background: var(--mail-row-background-unread);
   }
 
   &.is-read {
-    background-color: #fff;
+    background-color: var(--mail-row-background);
     color: var(--brand-gray);
   }
 
@@ -944,13 +944,16 @@
 
   &.is-selected,
   &.is-selected:hover {
-    background: #ffc;
+    background: var(--mail-row-background-selected)!important;
   }
 
   &.is-active {
     background: $brand-secondary !important;
     color: $brand-white !important;
   }
+  &:hover {
+    background: var(--mail-row-background-selected)!important;
+  }
 }
 
 .mail-list-inner-row {
diff --git a/src/styles.scss b/src/styles.scss
index c93df8849..807bd0a61 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -571,3 +571,19 @@ button[disabled] {
   bottom: unset !important;
   transition: inherit;
 }
+
+.text-dark {
+  color: var(--text-dark)!important;
+}
+.text-secondary {
+  color: var(--text-secondary)!important;
+}
+.text-faded {
+  background-color: var(--text-faded)!important;
+}
+.bg-faded {
+  background-color: var(--bg-faded)!important;
+}
+.bg-white {
+  background-color: var(--bg-white)!important;
+}
diff --git a/src/styles/_theme-variables-collection.scss b/src/styles/_theme-variables-collection.scss
index d39d6b595..1c46c11de 100644
--- a/src/styles/_theme-variables-collection.scss
+++ b/src/styles/_theme-variables-collection.scss
@@ -19,6 +19,13 @@ $variables: (
     --brand-light-gray: ($brand-light-gray, $brand-light-gray-dark),
     --brand-faded: ($brand-faded, $brand-faded-dark),
     --text-muted: ($text-muted, $text-muted-dark),
+    
+    --text-dark: ($text-dark-light, $text-dark-dark),
+    --text-secondary: ($text-secondary-light, $text-secondary-dark),
+    --text-faded: (#c4c4c4, #c4c4c4),
+    --bg-faded: ($bg-faded-light, $bg-faded-dark),
+    --bg-white: ($bg-white-light, $bg-white-dark),
+
 
     // Width
     --width-0-1: ($width-0, $width-1),
@@ -41,6 +48,11 @@ $variables: (
 
     // Customizing components
     --sidebar-footer-background: ($sidebar-footer-background-light, $sidebar-footer-background-dark),
-    // --sidebar-border-right: var(--width-0-2) solid var(--sidebar-border-right),
     --sidebar-border-right: ($sidebar-border-right-light, $sidebar-border-right-dark),
+
+    --mail-row-background: ($mail-row-background-light, $mail-row-background-dark),
+    --mail-row-background-active: ($mail-row-background-active-light, $mail-row-background-active-dark),
+    --mail-row-background-selected: ($mail-row-background-selected-light, $mail-row-background-selected-dark),
+    --mail-row-background-unread: ($mail-row-background-unread-light, $mail-row-background-unread-dark),
+    --mail-row-border-bottom-color: ($mail-row-border-bottom-color-light, $mail-row-border-bottom-color-dark),
 )
\ No newline at end of file
diff --git a/src/styles/base/_dark-variables.scss b/src/styles/base/_dark-variables.scss
index 02a153948..a3dcc53c1 100644
--- a/src/styles/base/_dark-variables.scss
+++ b/src/styles/base/_dark-variables.scss
@@ -3,6 +3,7 @@
 ////
 //== Variables
 ////
+
 // Sidebar background...
 $brand-secondary-dark: #161f34;
 $brand-secondary-darker: darken($brand-secondary-dark, 20%);
@@ -39,6 +40,12 @@ $brand-light-gray-dark: $dark-primary-fore-color;
 $brand-faded-dark: $brand-third-dark;
 $text-muted-dark: $dark-primary-fore-color;
 
+$text-dark-dark: $text-color-dark;
+$text-secondary-dark: $brand-secondary-dark;
+$text-faded-dark: #c4c4c4;
+$bg-faded-dark: $brand-faded-dark;
+$bg-white-dark: $brand-fourth-dark;
+
 // == Dropdowns
 $dropdown-link-active-bg-dark: $action-control-active-background;
 $dropdown-link-active-color-dark: $text-color-dark;
@@ -64,5 +71,8 @@ $close-color-dark: $text-color-dark;
 $sidebar-footer-background-dark: $brand-secondary-darker;
 $sidebar-border-right-dark: $control-border-1-color-dark;
 
-$mail-list-background-dark: $brand-third-dark;
-$mail-list-background-active-dark: lighten($brand-third-dark, 10%);
\ No newline at end of file
+$mail-row-background-dark: $brand-third-dark;
+$mail-row-background-active-dark: lighten($brand-third-dark, 10%);  // including hover
+$mail-row-background-selected-dark: lighten($brand-third-dark, 10%);
+$mail-row-background-unread-dark: lighten($brand-third-dark, 5%);
+$mail-row-border-bottom-color-dark: $control-border-1-color-dark;
\ No newline at end of file
diff --git a/src/styles/base/_light-variables.scss b/src/styles/base/_light-variables.scss
index c579cd458..3974e3f79 100644
--- a/src/styles/base/_light-variables.scss
+++ b/src/styles/base/_light-variables.scss
@@ -4,8 +4,21 @@ $brand-secondary-light: $brand-secondary;
 
 $control-text-color-light: $brand-secondary;
 
+$text-dark-light: rgba(0, 0, 0, 0.87);
+$text-secondary-light: $brand-secondary;
+$text-faded-light: #c4c4c4;
+
+$bg-faded-light: $brand-faded;
+$bg-white-light: $brand-white;
+
 //////
 //## Start Component customzing
 //////
 $sidebar-footer-background-light: #29394e;
-$sidebar-border-right-light: transparent;
\ No newline at end of file
+$sidebar-border-right-light: transparent;
+
+$mail-row-background-light: $white;
+$mail-row-background-active-light: rgba(0, 0, 0, 0.075); // including hover
+$mail-row-background-selected-light: #ffc;
+$mail-row-background-unread-light: #f5f5f5;
+$mail-row-border-bottom-color-light: $input-border-color;
\ No newline at end of file

From 517c8f287142e15b9ad1c00cbb1a8076fd2bebef Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Thu, 28 Jan 2021 21:04:21 -0400
Subject: [PATCH 11/33] Completed dark mode refactoring

---
 .../mail-contact/mail-contact.component.scss  | 17 ++++-
 .../mail-footer/mail-footer.component.scss    |  2 +-
 .../mail-header/mail-header.component.scss    |  4 +-
 .../generic-folder.component.scss             |  5 +-
 .../custom-domains.component.scss             |  2 +-
 .../mail-autoresponder.component.scss         |  3 +
 .../mail-settings.component.scss              | 20 +++---
 .../compose-mail/compose-mail.component.scss  |  4 +-
 src/app/mail/mail.component.scss              | 27 ++++----
 .../pricing-plans.component.scss              | 15 +++--
 src/assets/i18n/ar.json                       |  6 +-
 src/assets/i18n/en.json                       |  6 +-
 src/styles.scss                               | 48 +++++++++-----
 src/styles/_theme-variables-collection.scss   | 54 +++++++++++++++
 src/styles/base/_dark-variables.scss          | 57 ++++++++++++++--
 src/styles/base/_light-variables.scss         | 65 +++++++++++++++++--
 src/styles/base/_variables.scss               |  2 +-
 src/styles/components.styles.scss             | 10 +--
 .../bootstrap-overrides/_dropdown.scss        |  9 ++-
 .../modules/bootstrap-overrides/_form.scss    |  2 +-
 .../modules/bootstrap-overrides/_modal.scss   |  4 +-
 .../modules/mail-composer/_mail-composer.scss | 18 ++---
 .../modules/utilities/_form-fields.scss       |  6 +-
 src/styles/vendors/bootstrap/_dropdown.scss   |  8 +--
 src/styles/vendors/bootstrap/_forms.scss      | 13 ++--
 src/styles/vendors/bootstrap/_modal.scss      |  4 +-
 .../vendors/bootstrap/mixins/_forms.scss      |  4 +-
 27 files changed, 309 insertions(+), 106 deletions(-)

diff --git a/src/app/mail/mail-contact/mail-contact.component.scss b/src/app/mail/mail-contact/mail-contact.component.scss
index 5fe9711ab..4306eedbe 100644
--- a/src/app/mail/mail-contact/mail-contact.component.scss
+++ b/src/app/mail/mail-contact/mail-contact.component.scss
@@ -27,7 +27,7 @@
 }
 
 .mail-contact-header {
-  background: #f5f5f5;
+  background: var(--contacts-header-background);
   border-radius: 2px 2px 0 0;
 
   tr {
@@ -55,7 +55,7 @@
 }
 
 .mail-contact-body.is-bordered {
-  border: 1px solid #f5f5f5;
+  border: 1px solid var(--mail-row-border-bottom-color);
   border-bottom: 0;
 
   tr {
@@ -96,7 +96,7 @@
 }
 
 .mail-contact .mail-list-row {
-  border-color: #f5f5f5;
+  border-color: var(--mail-row-border-bottom-color);
   font-size: 0.875rem;
 
   @include media('<ipad', '>sm') {
@@ -383,3 +383,14 @@
   height: calc(100vh - 118px);
   overflow: auto;
 }
+
+.select-all-checkbox {
+  top: 4px;
+}
+
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  border: 2px solid var(--mat-checkbox-border-color);
+}
+::ng-deep .mat-checkbox .mat-checkbox-background {
+  border: var(--width-0-2) solid var(--mat-checkbox-border-color);
+}
\ No newline at end of file
diff --git a/src/app/mail/mail-footer/mail-footer.component.scss b/src/app/mail/mail-footer/mail-footer.component.scss
index 5b2eae7c0..917806c0c 100644
--- a/src/app/mail/mail-footer/mail-footer.component.scss
+++ b/src/app/mail/mail-footer/mail-footer.component.scss
@@ -10,7 +10,7 @@
   bottom: 0;
   left: 0;
   padding: 1.5rem 0.938rem;
-  background: $brand-white;
+  background: var(--bg-white);
 
   @include media('>=ipad') {
     padding: 0.5rem 1.563rem;
diff --git a/src/app/mail/mail-header/mail-header.component.scss b/src/app/mail/mail-header/mail-header.component.scss
index ecd58632f..8be2d1cd2 100644
--- a/src/app/mail/mail-header/mail-header.component.scss
+++ b/src/app/mail/mail-header/mail-header.component.scss
@@ -121,7 +121,7 @@
 
       @include media('>sm') {
         padding: 0.438rem 0.813rem;
-        background: $brand-white;
+        background: var(--dropdown-toggle-bg);
         border: 1px solid var(--dropdown-border-color);
         color: var(--brand-light-gray);
         font-size: 1.25rem;
@@ -247,7 +247,7 @@
     background: transparent;
     border: 0;
     cursor: pointer;
-
+    color: var(--text-dark);
     i {
       &:hover {
         color: $brand-secondary;
diff --git a/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.scss b/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.scss
index 7b1c6a91f..05949fdc0 100644
--- a/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.scss
+++ b/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.scss
@@ -35,7 +35,10 @@ a.disabled {
   top: 8px;
 
   ::ng-deep .mat-checkbox .mat-checkbox-frame {
-    border-color: rgba(0, 0, 0, 0.38);
+    border: 2px solid var(--mat-checkbox-border-color);
+  }
+  ::ng-deep .mat-checkbox .mat-checkbox-background {
+    border: var(--width-0-2) solid var(--mat-checkbox-border-color);
   }
 }
 
diff --git a/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss b/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss
index 66e8c83ce..b4eae2bd5 100644
--- a/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss
+++ b/src/app/mail/mail-settings/custom-domains/custom-domains.component.scss
@@ -140,7 +140,7 @@
 .stepper-form {
   padding: 1.5625rem 1.875rem 2.5rem 1.875rem;
   font-size: 0.875rem;
-  background-color: #fafafa;
+  background-color: var(--bg-faded);
 
   .domain-input {
     width: 28.125rem;
diff --git a/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.scss b/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.scss
index e69de29bb..affe76036 100644
--- a/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.scss
+++ b/src/app/mail/mail-settings/mail-autoresponder/mail-autoresponder.component.scss
@@ -0,0 +1,3 @@
+::ng-deep .ql-editor.ql-blank::before {
+    color: var(--input-color-placeholder);
+}
diff --git a/src/app/mail/mail-settings/mail-settings.component.scss b/src/app/mail/mail-settings/mail-settings.component.scss
index 3af790f9e..0c1fdcf43 100644
--- a/src/app/mail/mail-settings/mail-settings.component.scss
+++ b/src/app/mail/mail-settings/mail-settings.component.scss
@@ -53,8 +53,8 @@ $error-red: #e94e4c;
   align-items: center;
   flex-wrap: wrap;
   padding: 1.188rem 0.938rem;
-  background: var(--brand-faded);
-  border: 1px solid darken($brand-faded, 3%);
+  background: var(--bg-faded);
+  border: 1px solid var(--border-class-color);
   font-size: 0.875rem;
   line-height: 1.14;
 
@@ -330,7 +330,7 @@ $error-red: #e94e4c;
 }
 
 .info-card {
-  background: #f5f5f5;
+  background: var(--bg-faded);
 
   p {
     font-size: 14px;
@@ -457,7 +457,7 @@ $error-red: #e94e4c;
 
 .signup-form {
   position: relative;
-  padding-top: 5px;
+  // padding-top: 5px;
   .validate-message {
     display: block;
     margin-bottom: 0.375rem;
@@ -535,8 +535,8 @@ $error-red: #e94e4c;
 
 .plan-details {
   .desc-card-body {
-    background: #fafafa;
-    border: 1px solid #f2f2f2;
+    background: var(--bg-faded);
+    border: 1px solid var(--border-class-color);
   }
 
   .user-details {
@@ -546,7 +546,7 @@ $error-red: #e94e4c;
   }
 
   .subscription {
-    color: black;
+    color: var(--text-dark);
     margin-top: 10px;
 
     .subscription-tag {
@@ -597,12 +597,12 @@ $error-red: #e94e4c;
       padding: 1.5rem;
 
       li {
-        background: white;
-        border: 1px solid #f5f5f5;
+        background: var(-bg-white);
+        border: 1px solid var(--border-class-color);
         font-size: 0.875rem;
 
         &:first-child {
-          border: 1px solid #fafafa;
+          border: 1px solid var(--bg-faded);
           border-bottom: 0;
         }
       }
diff --git a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss
index 631c5e574..c86826c92 100644
--- a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss
+++ b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss
@@ -91,7 +91,7 @@ textarea:disabled {
       width: 2.25rem;
       display: flex;
       justify-content: center;
-      background: #fafafa;
+      background: var(--bg-faded);
     }
     &:disabled {
       background-color: inherit;
@@ -102,7 +102,7 @@ textarea:disabled {
     }
     border: none;
     i {
-      color: black;
+      color: var(--text-color-black-white);
     }
   }
 }
diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index a6f0721ae..0a5e3ef51 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -33,6 +33,7 @@
   padding-bottom: 3.75rem;
   min-height: 100vh;
   height: 100vh;
+  background: var(--main-content-background);
 
   @include media('<ipad', '>sm') {
     margin-left: 68px;
@@ -360,7 +361,7 @@
 }
 
 .mailbox-sidebar-footer {
-  background: var(--sidebar-footer-background);
+  background: var(--brand-secondary);
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -503,7 +504,7 @@
 // == Actions bar
 .mailbox-actionbar {
   padding: 0.6rem 0.938rem;
-  border-bottom: 1px solid $input-border-color;
+  border-bottom: 1px solid var(--dropdown-border-color);
 
   @include media('>=ipad') {
     padding-right: 1.563rem;
@@ -584,10 +585,10 @@
       display: flex;
       align-items: center;
       padding: 0.219rem 0.688rem;
-      background: #f5f5f5;
-      border: 1px solid $input-border-color;
+      background: var(--dropdown-toggle-secondary-bg);
+      border: 1px solid var(--dropdown-border-color);
       border-radius: 2px;
-      color: rgba(0, 0, 0, 0.38);
+      color: var(--brand-light-gray);
       font-weight: bold;
       height: 2rem;
       width: 2.52rem;
@@ -663,7 +664,7 @@
   li > a {
     transition: none;
     &:active {
-      background: #e4e4e4;
+      background: var(--btn-mail-action-active-background);
     }
   }
   .mailbox-dropdown .dropdown-item {
@@ -809,10 +810,10 @@
   justify-content: center;
 
   [class*='mail-nav-control-'] {
-    background: #f5f5f5;
+    background: var(--dropdown-toggle-secondary-bg);
     border: 1px solid var(--dropdown-border-color);
     border-radius: 2px;
-    color: $gray-9e9e9e;
+    color: var(--gray-9e9e9e);
     font-size: 0.75rem;
     height: 2rem;
     width: 2rem;
@@ -848,13 +849,13 @@
   }
 
   &.ui-header-bordered {
-    border: 1px solid darken($brand-faded, 3%); //$dropdown-border-color;
+    border: 1px solid var(--border-class-color); //$dropdown-border-color;
     border-right: 0;
     border-left: 0;
   }
 
   &.border-all-corner {
-    border: 1px solid darken($brand-faded, 3%);
+    border: 1px solid var(--border-class-color);
   }
 }
 
@@ -929,13 +930,13 @@
   }
 
   &.is-unread {
-    color: $brand-black !important;
+    color: var(--mail-row-unread-sent-date-text-color) !important;
     background: var(--mail-row-background-unread);
   }
 
   &.is-read {
     background-color: var(--mail-row-background);
-    color: var(--brand-gray);
+    color: var(--mail-row-read-sent-date-text-color);
   }
 
   &.is-checked {
@@ -1130,7 +1131,7 @@
   .mail-security-status {
     width: 3rem;
     text-align: center;
-    color: #34495e;
+    color: var(--text-brand-secondary-white-color);
 
     @include media('<=xs') {
       width: 1rem;
diff --git a/src/app/shared/components/pricing-plans/pricing-plans.component.scss b/src/app/shared/components/pricing-plans/pricing-plans.component.scss
index ce71878c2..a200c4900 100644
--- a/src/app/shared/components/pricing-plans/pricing-plans.component.scss
+++ b/src/app/shared/components/pricing-plans/pricing-plans.component.scss
@@ -32,13 +32,15 @@
   }
 
   .plan-item {
-    background: #fafafa;
+    background: var(--bg-faded);
     height: 190px;
-    border-left: 2px solid white;
+    border-left: 2px solid var(--settings-dashboard-plan-border-color);
+    border-top: var(--width-0-1) solid var(--settings-dashboard-plan-border-color);
+    border-bottom: var(--width-0-1) solid var(--settings-dashboard-plan-border-color);
     padding-top: 10px;
 
     div {
-      color: #2e4053;
+      color: var(--settings-dashboard-plan-text-color);
     }
 
     .select-btn {
@@ -46,7 +48,7 @@
       line-height: 0;
       border-color: transparent;
       color: white !important;
-      box-shadow: 5px 10px 10px #e8dcdc;
+      box-shadow: 5px 10px 10px var(--settings-dashboard-plan-btn-box-shadow);
       max-width: 90%;
       width: 100px;
       min-width: unset;
@@ -82,9 +84,8 @@
   }
 
   .plan-sub-item {
-    background: #fafafa;
-    border-bottom: 2px solid white;
-    border-left: 2px solid white;
+    background: var(--bg-faded);
+    border: 1px solid var(--settings-dashboard-plan-border-color);
     font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
diff --git a/src/assets/i18n/ar.json b/src/assets/i18n/ar.json
index 4ccf3114b..a5b6cb26c 100644
--- a/src/assets/i18n/ar.json
+++ b/src/assets/i18n/ar.json
@@ -118,7 +118,7 @@
       "imp_messages": "Important messages filter",
       "auto_labeling": "Auto-labeling test",
       "add_custom_filter": "Add custom filter",
-      "custom_filter": "custom filter",
+      "custom_filter": "Custom filter",
       "filter_name": "Filter name",
       "filter_name_exist": "Filter name already exists.",
       "filter_name_req": "Filter name is required.",
@@ -128,8 +128,8 @@
       "if_sender": "If the sender",
       "starts_with": "starts with",
       "actions": "Actions:",
-      "move_to": "move to",
-      "mark_as_starred": "mark as starred",
+      "move_to": "Move to",
+      "mark_as_starred": "Mark as starred",
       "delete_message": " Are you sure, you want to delete filter",
       "text_or_pattern": "text or pattern",
       "select_folder": "Select folder",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 33e180106..1b258a73a 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -248,7 +248,7 @@
       "imp_messages": "Important messages filter",
       "auto_labeling": "Auto-labeling test",
       "add_custom_filter": "Add custom filter",
-      "custom_filter": "custom filter",
+      "custom_filter": "Custom filter",
       "filter_name": "Filter name",
       "filter_name_exist": "Filter name already exists.",
       "filter_name_req": "Filter name is required.",
@@ -258,8 +258,8 @@
       "if_sender": "If the sender",
       "starts_with": "starts with",
       "actions": "Actions:",
-      "move_to": "move to",
-      "mark_as_starred": "mark as starred",
+      "move_to": "Move to",
+      "mark_as_starred": "Mark as starred",
       "delete_message": "Are you sure that you want to delete filter",
       "text_or_pattern": "text or pattern",
       "select_folder": "Select folder",
diff --git a/src/styles.scss b/src/styles.scss
index 807bd0a61..abdee6a57 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -178,6 +178,8 @@ tag-input {
   .ng2-tag-input__text-input {
     height: 20px !important;
     font-size: 14px !important;
+    background-color: var(--bg-white);
+    color: var(--text-color-black-white);
   }
 
   tag {
@@ -191,6 +193,9 @@ tag-input {
       margin-top: -10px;
     }
   }
+  tag:hover {
+    box-shadow: 0 2px 3px 1px var(--composer-tag-box-shadow)!important;
+  }
 
   .ng2-dropdown-menu {
     margin-top: -15px;
@@ -207,9 +212,9 @@ tag-input {
   min-width: 54px;
   outline: 0;
   padding: 0 8px;
-  background-color: #f1f1f1;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  color: #444;
+  background-color: var(--btn-user-action-background);
+  border: 1px solid var(--btn-user-action-border-color);
+  color: var(--btn-user-action-color);
 
   .icon-lg {
     font-size: 1.1rem;
@@ -218,8 +223,8 @@ tag-input {
 
   &:hover,
   &:focus {
-    border: 1px solid #c6c6c6;
-    color: #333;
+    border: 1px solid var(--btn-user-action-border-focus-color);
+    color: var(--btn-user-action-focus-color);
   }
 
   &:active {
@@ -283,7 +288,7 @@ app-compose-mail {
 
 button[disabled] {
   cursor: not-allowed;
-  background-color: #f1f0f0;
+  background-color: var(--btn-user-action-background-disabled);
 }
 
 .menu-open .mailbox-sidebar {
@@ -337,11 +342,11 @@ button[disabled] {
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
-  border-bottom: 1px solid #f5f5f5;
+  border-bottom: 1px solid var(--settings-tabs-border-color);
 }
 
 .nav-tabs.nav li {
-  border-right: 1px solid #f5f5f5;
+  border-right: 1px solid var(--settings-tabs-border-color);
 }
 
 .nav-tabs.nav .nav-link {
@@ -349,13 +354,13 @@ button[disabled] {
   align-items: center;
   height: 100%;
   text-decoration: none;
-  background-color: transparent;
+  background-color: var(--settings-tabs-background);
   padding: 1rem 0.9rem;
   text-transform: unset;
-  border-radius: 0.25rem;
+  // border-radius: 0.25rem;
   font-size: 14px;
   font-weight: 600;
-  color: #616161;
+  color: var(--settings-tabs-color);
   text-align: center;
   max-width: 175px;
 }
@@ -375,7 +380,7 @@ button[disabled] {
   .nav-link {
     &:hover,
     &.active {
-      background: #f4f4f4;
+      background: var(--settings-tabs-container-background);
       border-radius: 0;
     }
   }
@@ -441,7 +446,10 @@ button[disabled] {
     }
 
     .mat-checkbox-frame {
-      border: 2px solid #cccaca;
+      border: 2px solid var(--mat-checkbox-border-color);
+    }
+    .mat-checkbox-background {
+      border: var(--width-0-2) solid var(--mat-checkbox-border-color);
     }
   }
 }
@@ -572,14 +580,22 @@ button[disabled] {
   transition: inherit;
 }
 
-.text-dark {
+// Overriding global styles
+
+.text-dark, 
+.text-dark:hover,
+a.text-dark,
+a.text-dark:hover {
   color: var(--text-dark)!important;
 }
 .text-secondary {
-  color: var(--text-secondary)!important;
+  color: var(--text-muted)!important;
 }
 .text-faded {
-  background-color: var(--text-faded)!important;
+  color: var(--text-faded)!important;
+}
+.text-muted {
+  color: var(--text-muted)!important;
 }
 .bg-faded {
   background-color: var(--bg-faded)!important;
diff --git a/src/styles/_theme-variables-collection.scss b/src/styles/_theme-variables-collection.scss
index 1c46c11de..1cba99ab0 100644
--- a/src/styles/_theme-variables-collection.scss
+++ b/src/styles/_theme-variables-collection.scss
@@ -9,6 +9,7 @@ $width-3: 3px;
 
 $variables: (
     // General
+    --text-color-black-white: (#000, #fff),
     --brand-secondary: ($brand-secondary, $brand-secondary-dark),
     --text-color: ($text-color, $text-color-dark),
     --body-color: ($body-color, $body-color-dark),
@@ -25,6 +26,8 @@ $variables: (
     --text-faded: (#c4c4c4, #c4c4c4),
     --bg-faded: ($bg-faded-light, $bg-faded-dark),
     --bg-white: ($bg-white-light, $bg-white-dark),
+    --text-brand-secondary-white-color: ($brand-secondary, $text-color-dark),
+    --gray-9e9e9e: ($gray-9e9e9e, $text-color-dark),
 
 
     // Width
@@ -34,19 +37,48 @@ $variables: (
     --width-2-0: ($width-2, $width-0),
 
     // Dropdown
+    --dropdown-toogle-color: ($brand-black, $text-color-dark),
+    --dropdown-toggle-bg: ($dropdown-toggle-bg-light, $dropdown-toggle-bg-dark),
+    --dropdown-toggle-secondary-bg: ($dropdown-toggle-bg-secondary-light, $dropdown-toggle-bg-dark),
     --dropdown-link-active-bg: ($dropdown-link-active-bg, $dropdown-link-active-bg-dark),
     --dropdown-link-active-color: ($dropdown-link-active-color, $dropdown-link-active-color-dark),
     --dropdown-border-color: ($dropdown-border-color, $dropdown-border-color-dark),
     --dropdown-link-hover-bg: ($dropdown-link-hover-bg, $dropdown-link-hover-bg-dark),
+    --dropdown-link-color: ($dropdown-link-color-light, $dropdown-link-color-dark),
+    --dropdown-hover-background: ($dropdown-hover-background-light, $dropdown-hover-background-dark),
+
+    // Mail Action Buttons
+    --btn-mail-action-active-background: ($btn-mail-action-active-background-light, $btn-mail-action-active-background-dark),
 
     // Form Fields
     --input-border-color: ($input-border-color, $input-border-color-dark),
     --input-border-focus: ($input-border-focus, $input-border-focus-dark),
+    --input-bg: ($input-bg-light, $input-bg-dark),
+    --input-bg-disabled: ($input-bg-light, $input-bg-dark),
+    --input-color: ($input-color-light, $input-color-dark),
+    --input-color-placeholder: ($input-color-placeholder-light, $input-color-placeholder-dark),
+
+    // Checkbox
+    --mat-checkbox-border-color: ($mat-checkbox-border-color-light, $mat-checkbox-border-color-dark),
 
     // Modal
     --close-color: ($close-color, $close-color-dark),
+    --modal-header-background: ($modal-header-background-light, $modal-header-background-dark),
+    --modal-divider-color: ($modal-divider-color-light, $modal-divider-color-dark),
+
+    // Buttons - Reply, Forward...
+    --btn-user-action-background: ($btn-user-action-background-light, $btn-user-action-background-dark),
+    --btn-user-action-color: ($btn-user-action-color-light, $btn-user-action-color-dark),
+    --btn-user-action-border-color: ($btn-user-action-border-color-light, $btn-user-action-border-color-dark),
+    --btn-user-action-focus-color: ($btn-user-action-color-focus-light, $btn-user-action-color-focus-dark),
+    --btn-user-action-border-focus-color: ($btn-user-action-border-color-focus-light, $btn-user-action-border-color-focus-dark),
+    --btn-user-action-background-disabled: ($btn-user-action-background-disabled-light, $btn-user-action-background-disabled-dark),
+
+    --option-checked-color: ($option-checked-color-light, $option-checked-color-dark),
 
     // Customizing components
+    --main-content-background: ($main-content-background-light, $main-content-background-dark),
+
     --sidebar-footer-background: ($sidebar-footer-background-light, $sidebar-footer-background-dark),
     --sidebar-border-right: ($sidebar-border-right-light, $sidebar-border-right-dark),
 
@@ -55,4 +87,26 @@ $variables: (
     --mail-row-background-selected: ($mail-row-background-selected-light, $mail-row-background-selected-dark),
     --mail-row-background-unread: ($mail-row-background-unread-light, $mail-row-background-unread-dark),
     --mail-row-border-bottom-color: ($mail-row-border-bottom-color-light, $mail-row-border-bottom-color-dark),
+    --mail-row-read-sent-date-text-color: ($mail-row-read-sent-date-text-color-light, $mail-row-read-sent-date-text-color-dark),
+    --mail-row-unread-sent-date-text-color: ($mail-row-unread-sent-date-text-color-light, $mail-row-unread-sent-date-text-color-dark),
+
+    // Contacts
+    --contacts-header-background: ($contacts-header-background-light, $contacts-header-background-dark),
+
+    // Settings - Tabs
+    --settings-tabs-background: ($settings-tabs-background-light, $settings-tabs-background-dark),
+    --settings-tabs-container-background: ($settings-tabs-container-background-light, $settings-tabs-container-background-dark),
+    --settings-tabs-border-color: ($settings-tabs-border-color-light, $settings-tabs-border-color-dark),
+    --settings-tabs-color: ($settings-tabs-color-light, $settings-tabs-color-dark),
+    // Settings - Dashboard
+    --settings-dashboard-plan-text-color: ($settings-dashboard-plan-text-color-light, $settings-dashboard-plan-text-color-dark),
+    --settings-dashboard-plan-btn-box-shadow: ($settings-dashboard-plan-btn-box-shadow-light, $settings-dashboard-plan-btn-box-shadow-dark),
+    --settings-dashboard-plan-border-color: ($brand-white, $border-class-color-dark),
+
+    // Composer
+    --composer-header-background: ($brand-secondary, $brand-secondary-dark),
+    --composer-tag-box-shadow: ($composer-tag-box-shadow-light, $composer-tag-box-shadow-dark),
+
+    // Border
+    --border-class-color: ($border-class-color-light, $border-class-color-dark),
 )
\ No newline at end of file
diff --git a/src/styles/base/_dark-variables.scss b/src/styles/base/_dark-variables.scss
index a3dcc53c1..7f2f82700 100644
--- a/src/styles/base/_dark-variables.scss
+++ b/src/styles/base/_dark-variables.scss
@@ -1,5 +1,5 @@
 
-@import '../vendors/bootstrap/variables';
+@import 'variables';
 ////
 //== Variables
 ////
@@ -21,12 +21,22 @@ $control-border-color-dark: #474e61;
 $control-border-1-color-dark: #323a4c;
 
 // Text color
-$dark-primary-fore-color: $white;
+$dark-primary-fore-color: $brand-white;
+//// Mail row size or date fields...
+$dark-secondary-text-color: rgba(255, 255, 255, 0.54);
 
 // Controls
 $action-control-background: $brand-fourth-dark;
 $action-control-active-background: darken($brand-fourth-dark, 15%);
 
+// Buttons
+$btn-user-action-background-dark: $brand-fourth-dark;
+$btn-user-action-color-dark: $dark-primary-fore-color;
+$btn-user-action-border-color-dark: $dark-primary-fore-color;
+$btn-user-action-color-focus-dark: darken($dark-primary-fore-color, 20%);
+$btn-user-action-border-color-focus-dark: darken($dark-primary-fore-color, 20%);
+$btn-user-action-background-disabled-dark: lighten($brand-fourth-dark, 15%);
+
 //////
 //## Start redefining the variables on original variables
 //////
@@ -43,21 +53,41 @@ $text-muted-dark: $dark-primary-fore-color;
 $text-dark-dark: $text-color-dark;
 $text-secondary-dark: $brand-secondary-dark;
 $text-faded-dark: #c4c4c4;
-$bg-faded-dark: $brand-faded-dark;
+$bg-faded-dark: $brand-fourth-dark;
 $bg-white-dark: $brand-fourth-dark;
 
+// Border
+$border-class-color-dark: $control-border-color-dark;
+
 // == Dropdowns
+$dropdown-toggle-bg-dark: $action-control-background;
 $dropdown-link-active-bg-dark: $action-control-active-background;
 $dropdown-link-active-color-dark: $text-color-dark;
 $dropdown-border-color-dark: $control-border-color-dark;
 $dropdown-link-hover-bg-dark: $brand-faded-dark;
+$dropdown-link-color-dark: $text-color-dark;
+$dropdown-hover-background-dark: darken($action-control-background, 5%);
+
+// Action button on mail header
+$btn-mail-action-active-background-dark: darken($action-control-background, 15%);
 
 // == Form fields
 $input-border-color-dark: $control-border-color-dark;
 $input-border-focus-dark: $control-border-color-dark;
+$input-bg-dark: $action-control-background;
+$input-color-dark: $text-color-dark;
+$input-color-placeholder-dark: darken($text-color-dark, 25%);
 
 // == Modal
 $close-color-dark: $text-color-dark;
+$modal-header-background-dark: lighten($brand-fourth-dark, 5%);
+$modal-divider-color-dark: $control-border-color-dark;
+
+// == Checkbox - Materials
+$mat-checkbox-border-color-dark: $dark-primary-fore-color;
+
+// Controls - Checkbox, Radio
+$option-checked-color-dark: lighten($brand-secondary, 10%);
 
 //////
 //## End redefining the variables on original variables
@@ -68,6 +98,8 @@ $close-color-dark: $text-color-dark;
 //////
 //## Start Component customzing
 //////
+$main-content-background-dark: $brand-third-dark;
+
 $sidebar-footer-background-dark: $brand-secondary-darker;
 $sidebar-border-right-dark: $control-border-1-color-dark;
 
@@ -75,4 +107,21 @@ $mail-row-background-dark: $brand-third-dark;
 $mail-row-background-active-dark: lighten($brand-third-dark, 10%);  // including hover
 $mail-row-background-selected-dark: lighten($brand-third-dark, 10%);
 $mail-row-background-unread-dark: lighten($brand-third-dark, 5%);
-$mail-row-border-bottom-color-dark: $control-border-1-color-dark;
\ No newline at end of file
+$mail-row-border-bottom-color-dark: $control-border-1-color-dark;
+$mail-row-read-sent-date-text-color-dark: $dark-secondary-text-color;
+$mail-row-unread-sent-date-text-color-dark: $dark-secondary-text-color;
+
+// Contacts
+$contacts-header-background-dark: $brand-third-dark;
+
+//// Settings ////
+//Tabs
+$settings-tabs-background-dark: $brand-fourth-dark;
+$settings-tabs-container-background-dark: $brand-third-dark;
+$settings-tabs-border-color-dark: $control-border-color-dark;
+$settings-tabs-color-dark: $text-color-dark;
+// Dashboard & Plans
+$settings-dashboard-plan-text-color-dark: $text-color-dark;
+$settings-dashboard-plan-btn-box-shadow-dark: darken(#e8dcdc, 80%);
+// Composer
+$composer-tag-box-shadow-dark: darken($brand-secondary-dark, 10%);
\ No newline at end of file
diff --git a/src/styles/base/_light-variables.scss b/src/styles/base/_light-variables.scss
index 3974e3f79..f338a661e 100644
--- a/src/styles/base/_light-variables.scss
+++ b/src/styles/base/_light-variables.scss
@@ -1,4 +1,4 @@
-@import '../vendors/bootstrap/variables';
+@import 'variables';
 
 $brand-secondary-light: $brand-secondary;
 
@@ -7,18 +7,75 @@ $control-text-color-light: $brand-secondary;
 $text-dark-light: rgba(0, 0, 0, 0.87);
 $text-secondary-light: $brand-secondary;
 $text-faded-light: #c4c4c4;
+$main-background-color: $brand-white;
+
+// Border
+$border-class-color-light: #f2f2f2;
+
+// Unread mail row background, Mail header action button background
+$background-faded-secondary: #f5f5f5;
 
 $bg-faded-light: $brand-faded;
 $bg-white-light: $brand-white;
 
+$mat-checkbox-border-color-light: #cccaca;
+
+// Dropdown
+$dropdown-toggle-bg-light: $main-background-color;
+$dropdown-toggle-bg-secondary-light: $background-faded-secondary;
+$dropdown-link-color-light: #292b2c;
+$dropdown-hover-background-light: $brand-faded;
+
+// Action button on mail header
+$btn-mail-action-active-background-light: #e4e4e4;
+
+// Input
+$input-bg-light: $main-background-color;
+$input-color-light: #464a4c;
+$input-color-placeholder-light: $brand-light-gray;
+
+// Button - Reply, Forward button on mail detail ...
+$btn-user-action-background-light: #f1f1f1;
+$btn-user-action-color-light: #444;
+$btn-user-action-border-color-light: rgba(0, 0, 0, 0.1);
+$btn-user-action-color-focus-light: darken(#444, 20%);
+$btn-user-action-border-color-focus-light: darken(rgba(0, 0, 0, 0.1), 20%);
+$btn-user-action-background-disabled-light: #f1f0f0;
+
+// Modal
+$modal-header-background-light: $main-background-color;
+$modal-divider-color-light: #eceeef;
+
+// Controls - Checkbox, Radio
+$option-checked-color-light: $brand-secondary;
+
 //////
 //## Start Component customzing
 //////
+$main-content-background-light: $main-background-color;
+
 $sidebar-footer-background-light: #29394e;
 $sidebar-border-right-light: transparent;
 
-$mail-row-background-light: $white;
+$mail-row-background-light: $brand-white;
 $mail-row-background-active-light: rgba(0, 0, 0, 0.075); // including hover
 $mail-row-background-selected-light: #ffc;
-$mail-row-background-unread-light: #f5f5f5;
-$mail-row-border-bottom-color-light: $input-border-color;
\ No newline at end of file
+$mail-row-background-unread-light: $background-faded-secondary;
+$mail-row-border-bottom-color-light: $input-border-color;
+$mail-row-read-sent-date-text-color-light: $text-color;
+$mail-row-unread-sent-date-text-color-light: $brand-black;
+
+// Contacts
+$contacts-header-background-light: $background-faded-secondary;
+
+//// Settings ////
+//Tabs
+$settings-tabs-background-light: $main-background-color;
+$settings-tabs-container-background-light: #f4f4f4;
+$settings-tabs-border-color-light: $background-faded-secondary;
+$settings-tabs-color-light: #616161;
+// Dashboard & Plans
+$settings-dashboard-plan-text-color-light: #2e4053;
+$settings-dashboard-plan-btn-box-shadow-light: #e8dcdc;
+// Composer
+$composer-tag-box-shadow-light: #d4d1d1;
\ No newline at end of file
diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
index bc3c59420..8f0c4e8e0 100644
--- a/src/styles/base/_variables.scss
+++ b/src/styles/base/_variables.scss
@@ -189,7 +189,7 @@ $modal-header-padding: 1.5rem;
 $modal-md: 555px;
 $close-color: rgba(0, 0, 0, 0.54);
 $modal-header-border-width: 1px;
-$modal-inner-padding: null;
+// $modal-inner-padding: null;
 $border-radius-lg: 4px;
 $modal-dialog-margin: 0.938rem;
 
diff --git a/src/styles/components.styles.scss b/src/styles/components.styles.scss
index a0b232ead..34cc142a0 100644
--- a/src/styles/components.styles.scss
+++ b/src/styles/components.styles.scss
@@ -40,6 +40,7 @@ app-custom-domains {
   .mat-stepper-horizontal {
     font-family: 'Lato', Helvetica, Arial, sans-serif;
     word-break: break-all;
+    background-color: var(--bg-faded);
   }
 
   .mat-step {
@@ -132,7 +133,7 @@ app-mail-settings {
       ul.nav-tabs.nav {
         position: absolute;
         z-index: 10;
-        background: white;
+        background: var(--settings-tabs-container-background);
         width: 100%;
       }
     }
@@ -156,8 +157,9 @@ app-mail-settings {
 
   .timezone-block {
     .mat-form-field-appearance-legacy .mat-form-field-infix {
-      border: 1px solid #e0e0e0;
-      color: black;
+      border: 1px solid var(--dropdown-border-color);
+      color: var(--text-dark);
+      background-color: var(--bg-faded);
     }
 
     .mat-form-field-underline {
@@ -232,7 +234,7 @@ app-mail-detail {
   }
 
   div {
-    color: var(--sidebar-footer-background);
+    color: var(--text-color);
   }
 }
 
diff --git a/src/styles/modules/bootstrap-overrides/_dropdown.scss b/src/styles/modules/bootstrap-overrides/_dropdown.scss
index 0d8a69d49..58b1254ba 100644
--- a/src/styles/modules/bootstrap-overrides/_dropdown.scss
+++ b/src/styles/modules/bootstrap-overrides/_dropdown.scss
@@ -2,6 +2,9 @@
 * Bootstrap overrides dropdown scss file
 */
 
+@import '../../theme-variables-collection';
+@import '../../themes';
+
 .dropdown[placement='bottom-right'] .dropdown-menu {
   right: 0;
   left: auto;
@@ -76,10 +79,10 @@
   .dropdown-toggle {
     position: relative;
     padding: 0.5rem 0.5rem 0.5rem;
-    background: $brand-white;
-    border: solid 1px $input-border-color;
+    background: var(--dropdown-toggle-bg);
+    border: solid 1px var(--dropdown-border-color);
     border-radius: 4px;
-    color: $brand-black;
+    color: var(--dropdown-toogle-color);
     cursor: pointer;
     font-family: $font-family-lato;
     font-size: 1rem;
diff --git a/src/styles/modules/bootstrap-overrides/_form.scss b/src/styles/modules/bootstrap-overrides/_form.scss
index c3c1246ab..3dc320ad4 100644
--- a/src/styles/modules/bootstrap-overrides/_form.scss
+++ b/src/styles/modules/bootstrap-overrides/_form.scss
@@ -15,7 +15,7 @@ input:-webkit-autofill {
 }
 
 /* Include placeholder mixin */
-@include placeholder('.form-control', $brand-light-gray, '', $font-family-lato, 'initial', italic);
+@include placeholder('.form-control', var(--input-color-placeholder), '', $font-family-lato, 'initial', italic);
 @include placeholder('.form-control.error', $brand-danger, '', $font-family-lato, 'initial', italic);
 
 .form-group {
diff --git a/src/styles/modules/bootstrap-overrides/_modal.scss b/src/styles/modules/bootstrap-overrides/_modal.scss
index 10b08f74e..3d011aaf0 100644
--- a/src/styles/modules/bootstrap-overrides/_modal.scss
+++ b/src/styles/modules/bootstrap-overrides/_modal.scss
@@ -25,7 +25,7 @@
 
 .modal-header {
   padding: 0.75rem 0.938rem;
-  background: $brand-white;
+  background: var(--modal-header-background);
   border-radius: 2px;
   line-height: 1;
 
@@ -72,7 +72,7 @@
 .modal-footer {
   padding-right: 1.5rem;
   padding-left: 1.5rem;
-  background: #f5f5f5;
+  background: var(--modal-header-background);
   border-radius: 2px;
 }
 
diff --git a/src/styles/modules/mail-composer/_mail-composer.scss b/src/styles/modules/mail-composer/_mail-composer.scss
index 7d163e8de..ea8b25b83 100644
--- a/src/styles/modules/mail-composer/_mail-composer.scss
+++ b/src/styles/modules/mail-composer/_mail-composer.scss
@@ -270,8 +270,8 @@ a {
   align-items: center;
   position: relative;
   padding: 0.2rem $mail_composer_padding_x;
-  background: $brand-white;
-  border-bottom: 1px solid $input-border-color;
+  background: var(--bg-white);
+  border-bottom: 1px solid var(--border-class-color);
 
   @include media('>sm') {
     font-size: 0.75rem;
@@ -280,7 +280,7 @@ a {
   .mail-label {
     display: block;
     margin-right: 0.5rem;
-    color: rgba(0, 0, 0, 0.38);
+    color: var(--brand-light-gray);
     line-height: 1;
   }
 
@@ -292,6 +292,8 @@ a {
     resize: none;
     width: 100%;
     overflow: hidden;
+    background-color: var(--bg-white);
+    color: var(--text-color-black-white);
 
     @include media('>sm') {
       padding: 0.688rem 0 0.5rem;
@@ -339,7 +341,7 @@ a {
   overflow-x: hidden;
   overflow-y: auto;
   line-height: 1.67rem;
-  background: white;
+  background: var(--bg-white);
   max-height: 50vh;
   overflow-y: auto;
 
@@ -349,11 +351,11 @@ a {
 }
 
 .mail-compose-box-inner {
-  background: $brand-white;
+  background: var(--bg-white);
 }
 
 .mail-compose-editable-box {
-  background: $brand-white;
+  background: var(--bg-white);
 
   &[contenteditable]:focus {
     outline: 0;
@@ -362,7 +364,7 @@ a {
   .ql-editor {
     min-height: 385.867px;
     line-height: inherit;
-    color: black;
+    color: var(--text-color-black-white);
     .originalblock {
       border-left: 1px solid rgb(204, 204, 204);
       padding-left: 1ex;
@@ -377,7 +379,7 @@ a {
 .mail-composer-footer {
   padding: 0.5rem $mail_composer_padding_x;
   background: var(--brand-faded);
-  border: 1px solid $input-border-color;
+  border: 1px solid var(--border-class-color);
   margin-bottom: -26px;
 
   @include media('<=sm') {
diff --git a/src/styles/modules/utilities/_form-fields.scss b/src/styles/modules/utilities/_form-fields.scss
index 66df840e4..7fe6ba78e 100644
--- a/src/styles/modules/utilities/_form-fields.scss
+++ b/src/styles/modules/utilities/_form-fields.scss
@@ -51,14 +51,14 @@ input[type='radio'].fancy-field-control + label {
 
 // == Checked
 input[type='radio'].fancy-field-control:checked + label {
-  color: var(--brand-secondary);
+  color: var(--option-checked-color);
 
   &::before {
-    border-color: var(--brand-secondary);
+    border-color: var(--option-checked-color);
   }
 
   &::after {
-    background: var(--brand-secondary);
+    background: var(--option-checked-color);
   }
 }
 
diff --git a/src/styles/vendors/bootstrap/_dropdown.scss b/src/styles/vendors/bootstrap/_dropdown.scss
index 3ef6f9773..e2f1f79ea 100644
--- a/src/styles/vendors/bootstrap/_dropdown.scss
+++ b/src/styles/vendors/bootstrap/_dropdown.scss
@@ -52,7 +52,7 @@
   color: var(--body-color);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
-  background-color: $dropdown-bg;
+  background-color: var(--dropdown-toggle-bg);
   background-clip: padding-box;
   border: $dropdown-border-width solid var(--dropdown-border-color);
   @include border-radius($border-radius);
@@ -73,16 +73,16 @@
   padding: 3px $dropdown-item-padding-x;
   clear: both;
   font-weight: $font-weight-normal;
-  color: $dropdown-link-color;
+  color: var(--dropdown-link-color);
   text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background: none; // For `<button>`s
   border: 0; // For `<button>`s
 
   @include hover-focus {
-    color: $dropdown-link-hover-color;
+    color: var(--dropdown-link-color);
     text-decoration: none;
-    background-color: $dropdown-link-hover-bg;
+    background-color: var(--dropdown-hover-background);
   }
 
   &.active,
diff --git a/src/styles/vendors/bootstrap/_forms.scss b/src/styles/vendors/bootstrap/_forms.scss
index b8071b193..0f9166260 100644
--- a/src/styles/vendors/bootstrap/_forms.scss
+++ b/src/styles/vendors/bootstrap/_forms.scss
@@ -1,5 +1,6 @@
 // scss-lint:disable QualifyingElement
-
+@import '../../theme-variables-collection';
+@import '../../themes';
 //
 // Textual form controls
 //
@@ -12,12 +13,12 @@
   padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
   line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
+  color: var(--input-color);
+  background-color: var(--input-bg);
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
   background-image: none;
   background-clip: padding-box;
-  border: $input-btn-border-width solid $input-border-color;
+  border: $input-btn-border-width solid var(--input-border-color);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @if $enable-rounded {
@@ -42,7 +43,7 @@
 
   // Placeholder
   &::placeholder {
-    color: $input-color-placeholder;
+    color: var(--input-color-placeholder);
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -54,7 +55,7 @@
   // don't honor that edge case; we style them as disabled anyway.
   &:disabled,
   &[readonly] {
-    background-color: $input-bg-disabled;
+    background-color: var(--input-bg-disabled);
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
diff --git a/src/styles/vendors/bootstrap/_modal.scss b/src/styles/vendors/bootstrap/_modal.scss
index 4da1873f0..03e3e17e3 100644
--- a/src/styles/vendors/bootstrap/_modal.scss
+++ b/src/styles/vendors/bootstrap/_modal.scss
@@ -86,7 +86,7 @@
   align-items: center; // vertically center it
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
-  border-bottom: $modal-header-border-width solid $modal-header-border-color;
+  border-bottom: $modal-header-border-width solid var(--modal-divider-color);
 }
 
 // Title text within header
@@ -111,7 +111,7 @@
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding;
-  border-top: $modal-footer-border-width solid $modal-footer-border-color;
+  border-top: $modal-footer-border-width solid var(--modal-divider-color);
 
   // Easily place margin between footer elements
   > :not(:first-child) {
diff --git a/src/styles/vendors/bootstrap/mixins/_forms.scss b/src/styles/vendors/bootstrap/mixins/_forms.scss
index 7dfe63c0e..e746fb428 100644
--- a/src/styles/vendors/bootstrap/mixins/_forms.scss
+++ b/src/styles/vendors/bootstrap/mixins/_forms.scss
@@ -44,8 +44,8 @@
 // contrast against a dark gray background.
 @mixin form-control-focus() {
   &:focus {
-    color: $input-color-focus;
-    background-color: $input-bg-focus;
+    color: var(--input-color);
+    background-color: var(--input-bg);
     border-color: var(--input-border-focus);
     outline: none;
     @include box-shadow($input-box-shadow-focus);

From 902e39927f185a611ea0413821f643879d7b609c Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 11:19:27 -0400
Subject: [PATCH 12/33] Update dark mode refactoring

---
 src/app/mail/mail-contact/mail-contact.component.scss | 2 +-
 src/app/mail/mail.component.scss                      | 4 ++--
 src/styles/base/_dark-variables.scss                  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/mail/mail-contact/mail-contact.component.scss b/src/app/mail/mail-contact/mail-contact.component.scss
index 4306eedbe..e0d0e09b1 100644
--- a/src/app/mail/mail-contact/mail-contact.component.scss
+++ b/src/app/mail/mail-contact/mail-contact.component.scss
@@ -376,7 +376,7 @@
 }
 .modal-content-email {
   white-space: pre-wrap;
-  background: #fff;
+  background: var(--bg-white);
   padding: 1rem;
 }
 .mailbox-section {
diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index 0a5e3ef51..6d797c96f 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -361,7 +361,7 @@
 }
 
 .mailbox-sidebar-footer {
-  background: var(--brand-secondary);
+  background: var(--sidebar-footer-background);
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -953,7 +953,7 @@
     color: $brand-white !important;
   }
   &:hover {
-    background: var(--mail-row-background-selected)!important;
+    background: var(--mail-row-background-active)!important;
   }
 }
 
diff --git a/src/styles/base/_dark-variables.scss b/src/styles/base/_dark-variables.scss
index 7f2f82700..be0d8e62a 100644
--- a/src/styles/base/_dark-variables.scss
+++ b/src/styles/base/_dark-variables.scss
@@ -100,7 +100,7 @@ $option-checked-color-dark: lighten($brand-secondary, 10%);
 //////
 $main-content-background-dark: $brand-third-dark;
 
-$sidebar-footer-background-dark: $brand-secondary-darker;
+$sidebar-footer-background-dark: $brand-secondary-dark;
 $sidebar-border-right-dark: $control-border-1-color-dark;
 
 $mail-row-background-dark: $brand-third-dark;

From fb353aeda6f3177f756eba0862756ac70647d075 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 11:21:06 -0400
Subject: [PATCH 13/33] update dark mode

---
 .../circle-bar-spinner.component.html         | 133 ++++++------------
 1 file changed, 45 insertions(+), 88 deletions(-)

diff --git a/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.html b/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.html
index 577319574..6a3f261e6 100644
--- a/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.html
+++ b/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.html
@@ -1,110 +1,67 @@
 <div class="spinner-container" *ngIf="showSpinner" [ngbTooltip]="'Loading Encryption Info...'">
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: transparent; display: inline; shape-rendering: auto" width="16px" height="16px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" *ngIf="night_mode; else light_mode">
-    <g transform="rotate(0 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(36 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(72 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(108 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(144 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(180 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(216 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(252 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(288 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <g transform="rotate(324 50 50)">
-      <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#fff">
-        <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
-      </rect>
-    </g>
-    <!-- [ldio] generated by https://loading.io/ -->
-  </svg>
-  <ng-template #light_mode>
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: transparent; display: inline; shape-rendering: auto" width="16px" height="16px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+      style="margin: auto; background: transparent; display: inline; shape-rendering: auto;" width="16px"
+      height="16px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
       <g transform="rotate(0 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(36 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(72 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(108 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(144 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(180 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(216 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(252 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(288 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <g transform="rotate(324 50 50)">
-        <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25" fill="#333333">
-          <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
-        </rect>
+          <rect x="47" y="10.5" rx="2.75" ry="2.75" width="6" height="25"  [ngStyle]="{'fill': color}">
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s"
+                  repeatCount="indefinite"></animate>
+          </rect>
       </g>
       <!-- [ldio] generated by https://loading.io/ -->
-    </svg>
-  </ng-template>
-</div>
+  </svg>
+</div>
\ No newline at end of file

From d1e56c4d99073647cc361c99b5b43c2aeaca1c46 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 11:34:21 -0400
Subject: [PATCH 14/33] update circle bar spinner

---
 .../compose-mail/compose-mail.component.html          |  6 +++---
 .../circle-bar-spinner.component.ts                   | 11 +++++++----
 src/styles.scss                                       |  2 ++
 src/styles/_theme-variables-collection.scss           |  1 +
 src/styles/base/_dark-variables.scss                  |  3 ++-
 src/styles/base/_light-variables.scss                 |  3 ++-
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.html b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.html
index caf29d5e0..82e0c3538 100644
--- a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.html
+++ b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.html
@@ -25,7 +25,7 @@
         <span class="mail-label label-to">{{ 'settings.compose.to' | translate }}</span>
         <tag-input [(ngModel)]="mailData.receiver" *ngIf="isLoaded" name="to" [placeholder]="' '" [secondaryPlaceholder]="'settings.compose.recipient_email' | translate" [onTextChangeDebounce]="100" [onlyFromAutocomplete]="false" [addOnBlur]="true" [editable]="true" [separatorKeys]="[',']" [separatorKeyCodes]="[13]" [(inputText)]="inputTextValue" (onAdd)="onAddingReceiver($event, mailData.receiver)" (onRemove)="onRemoveReceive()" (onTextChange)="updateInputTextValue($event)" (paste)="onPaste($event)" (onTagEdited)="onTagEdited($event)" (click)="onClick($event)" #input>
           <ng-template let-item="item" let-index="index">
-            <app-circle-bar-spinner [showSpinner]="getUserKeyFetchingStatus(item.email)" [night_mode]="night_mode"></app-circle-bar-spinner>
+            <app-circle-bar-spinner [showSpinner]="getUserKeyFetchingStatus(item.email)" [color]="night_mode ? '#fff' : '#333333'"></app-circle-bar-spinner>
             <span>
               {{ item.email }}
             </span>
@@ -54,7 +54,7 @@
         <span class="mail-label label-cc">Cc:</span>
         <tag-input [(ngModel)]="mailData.cc" name="cc" [placeholder]="' '" [secondaryPlaceholder]="'settings.compose.cc_email' | translate" [onTextChangeDebounce]="100" [onlyFromAutocomplete]="false" [addOnBlur]="true" [editable]="true" [separatorKeys]="[',']" [separatorKeyCodes]="[13]" [(inputText)]="ccInputTextValue" (onAdd)="onAddingReceiver($event, mailData.cc)" (onRemove)="onRemoveCc()" (onTextChange)="ccUpdateInputTextValue($event)" (paste)="ccOnPaste($event)" (onTagEdited)="ccOnTagEdited($event)" (click)="onCcClick($event)" #ccInput>
           <ng-template let-item="item" let-index="index">
-            <app-circle-bar-spinner [showSpinner]="getUserKeyFetchingStatus(item.email)" [night_mode]="night_mode"></app-circle-bar-spinner>
+            <app-circle-bar-spinner [showSpinner]="getUserKeyFetchingStatus(item.email)" [color]="night_mode ? '#fff' : '#333333'"></app-circle-bar-spinner>
             <span>
               {{ item.email }}
             </span>
@@ -79,7 +79,7 @@
         <span class="mail-label label-bcc">Bcc:</span>
         <tag-input [(ngModel)]="mailData.bcc" name="bcc" [placeholder]="' '" [secondaryPlaceholder]="'settings.compose.bcc_email' | translate" [onTextChangeDebounce]="100" [onlyFromAutocomplete]="false" [addOnBlur]="true" [editable]="true" [separatorKeys]="[',']" [separatorKeyCodes]="[13]" [(inputText)]="bccInputTextValue" (onAdd)="onAddingReceiver($event, mailData.bcc)" (onRemove)="onRemoveBcc()" (onTextChange)="bccUpdateInputTextValue($event)" (paste)="bccOnPaste($event)" (onTagEdited)="bccOnTagEdited($event)" (click)="onBccClick($event)" #bccInput>
           <ng-template let-item="item" let-index="index">
-            <app-circle-bar-spinner [showSpinner]="getUserKeyFetchingStatus(item.email)" [night_mode]="night_mode"></app-circle-bar-spinner>
+            <app-circle-bar-spinner [showSpinner]="getUserKeyFetchingStatus(item.email)" [color]="night_mode ? '#fff' : '#333333'"></app-circle-bar-spinner>
             <span>
               {{ item.email }}
             </span>
diff --git a/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.ts b/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.ts
index b84ec7f25..78359a849 100644
--- a/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.ts
+++ b/src/app/shared/circle-bar-spinner/circle-bar-spinner.component.ts
@@ -3,12 +3,15 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
   selector: 'app-circle-bar-spinner',
   templateUrl: './circle-bar-spinner.component.html',
-  styleUrls: ['./circle-bar-spinner.component.scss'],
+  styleUrls: ['./circle-bar-spinner.component.scss']
 })
 export class CircleBarSpinnerComponent implements OnInit {
+
   @Input() showSpinner: boolean;
-  @Input() night_mode: boolean;
-  constructor() {}
+  @Input() color: string = '#333333';
+  constructor() { }
+
+  ngOnInit(): void {
+  }
 
-  ngOnInit(): void {}
 }
diff --git a/src/styles.scss b/src/styles.scss
index abdee6a57..9a4d80eca 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -186,6 +186,8 @@ tag-input {
     height: 20px !important;
     border-radius: 20px !important;
     border: 1px solid lightgrey !important;
+    color: var(--text-color)!important;
+    background-color: var(--composer-tag-background)!important;
     .tag-wrapper {
       margin-top: -10px !important;
     }
diff --git a/src/styles/_theme-variables-collection.scss b/src/styles/_theme-variables-collection.scss
index 1cba99ab0..0ac4a87fb 100644
--- a/src/styles/_theme-variables-collection.scss
+++ b/src/styles/_theme-variables-collection.scss
@@ -106,6 +106,7 @@ $variables: (
     // Composer
     --composer-header-background: ($brand-secondary, $brand-secondary-dark),
     --composer-tag-box-shadow: ($composer-tag-box-shadow-light, $composer-tag-box-shadow-dark),
+    --composer-tag-background: ($composer-tag-background-light, $composer-tag-background-dark),
 
     // Border
     --border-class-color: ($border-class-color-light, $border-class-color-dark),
diff --git a/src/styles/base/_dark-variables.scss b/src/styles/base/_dark-variables.scss
index be0d8e62a..b2a833e74 100644
--- a/src/styles/base/_dark-variables.scss
+++ b/src/styles/base/_dark-variables.scss
@@ -124,4 +124,5 @@ $settings-tabs-color-dark: $text-color-dark;
 $settings-dashboard-plan-text-color-dark: $text-color-dark;
 $settings-dashboard-plan-btn-box-shadow-dark: darken(#e8dcdc, 80%);
 // Composer
-$composer-tag-box-shadow-dark: darken($brand-secondary-dark, 10%);
\ No newline at end of file
+$composer-tag-box-shadow-dark: darken($brand-secondary-dark, 10%);
+$composer-tag-background-dark: $brand-fourth-dark;
\ No newline at end of file
diff --git a/src/styles/base/_light-variables.scss b/src/styles/base/_light-variables.scss
index f338a661e..f74f95a3a 100644
--- a/src/styles/base/_light-variables.scss
+++ b/src/styles/base/_light-variables.scss
@@ -78,4 +78,5 @@ $settings-tabs-color-light: #616161;
 $settings-dashboard-plan-text-color-light: #2e4053;
 $settings-dashboard-plan-btn-box-shadow-light: #e8dcdc;
 // Composer
-$composer-tag-box-shadow-light: #d4d1d1;
\ No newline at end of file
+$composer-tag-box-shadow-light: #d4d1d1;
+$composer-tag-background-light: #efefef;
\ No newline at end of file

From 40163bcbaa8a25d4513a8cfc690a0a69cf020075 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 11:37:21 -0400
Subject: [PATCH 15/33] update circle bar

---
 src/styles.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/styles.scss b/src/styles.scss
index 9a4d80eca..bcb110e72 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -188,6 +188,13 @@ tag-input {
     border: 1px solid lightgrey !important;
     color: var(--text-color)!important;
     background-color: var(--composer-tag-background)!important;
+    delete-icon {
+      svg {
+        path {
+          fill: var(--text-color)!important;
+        }
+      }
+    }
     .tag-wrapper {
       margin-top: -10px !important;
     }

From 77363a834ebfa3eb614525d09d4682d71e5ac072 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 11:54:11 -0400
Subject: [PATCH 16/33] Removed unused import

---
 src/styles/modules/_blocks.scss                       | 2 --
 src/styles/modules/bootstrap-overrides/_dropdown.scss | 3 ---
 src/styles/modules/bootstrap-overrides/_form.scss     | 2 --
 src/styles/modules/cards/_package.scss                | 2 --
 src/styles/modules/cards/_post.scss                   | 2 --
 src/styles/modules/mail-composer/_mail-composer.scss  | 2 --
 src/styles/modules/utilities/_form-fields.scss        | 2 --
 src/styles/pages/user-actions/_form-pages.scss        | 2 --
 src/styles/vendors/bootstrap/_close.scss              | 2 --
 src/styles/vendors/bootstrap/_dropdown.scss           | 3 ---
 src/styles/vendors/bootstrap/_forms.scss              | 2 --
 src/styles/vendors/bootstrap/_reboot.scss             | 2 --
 src/styles/vendors/bootstrap/mixins/_alert.scss       | 2 --
 13 files changed, 28 deletions(-)

diff --git a/src/styles/modules/_blocks.scss b/src/styles/modules/_blocks.scss
index 7f61dbdb4..f419a19fb 100644
--- a/src/styles/modules/_blocks.scss
+++ b/src/styles/modules/_blocks.scss
@@ -1,8 +1,6 @@
 /**
 * Block modules scss file which includes reusable block related style rules
 */
-@import '../theme-variables-collection';
-@import '../themes';
 
 // == Equal gap
 .gap-p-eq {
diff --git a/src/styles/modules/bootstrap-overrides/_dropdown.scss b/src/styles/modules/bootstrap-overrides/_dropdown.scss
index 58b1254ba..f072fac49 100644
--- a/src/styles/modules/bootstrap-overrides/_dropdown.scss
+++ b/src/styles/modules/bootstrap-overrides/_dropdown.scss
@@ -2,9 +2,6 @@
 * Bootstrap overrides dropdown scss file
 */
 
-@import '../../theme-variables-collection';
-@import '../../themes';
-
 .dropdown[placement='bottom-right'] .dropdown-menu {
   right: 0;
   left: auto;
diff --git a/src/styles/modules/bootstrap-overrides/_form.scss b/src/styles/modules/bootstrap-overrides/_form.scss
index 3dc320ad4..55daca91c 100644
--- a/src/styles/modules/bootstrap-overrides/_form.scss
+++ b/src/styles/modules/bootstrap-overrides/_form.scss
@@ -1,8 +1,6 @@
 /**
 * Bootstrap form override
 */
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 select::-ms-expand {
   display: none !important;
diff --git a/src/styles/modules/cards/_package.scss b/src/styles/modules/cards/_package.scss
index ff5a2fcc7..44da2a866 100644
--- a/src/styles/modules/cards/_package.scss
+++ b/src/styles/modules/cards/_package.scss
@@ -1,8 +1,6 @@
 /**
 * Package card modules scss file which includes style rules related to pricing
 */
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 // == package card
 .package-card {
diff --git a/src/styles/modules/cards/_post.scss b/src/styles/modules/cards/_post.scss
index 3d169a391..c138947ff 100644
--- a/src/styles/modules/cards/_post.scss
+++ b/src/styles/modules/cards/_post.scss
@@ -1,8 +1,6 @@
 /**
 * Post card modules scss file which includes reusable post cards
 */
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 // == badge
 .badge {
diff --git a/src/styles/modules/mail-composer/_mail-composer.scss b/src/styles/modules/mail-composer/_mail-composer.scss
index ea8b25b83..05a441a31 100644
--- a/src/styles/modules/mail-composer/_mail-composer.scss
+++ b/src/styles/modules/mail-composer/_mail-composer.scss
@@ -1,8 +1,6 @@
 /**
 * Mail composer module
 */
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 // == Mail composer
 $mail_composer_padding_x: 0.75rem;
diff --git a/src/styles/modules/utilities/_form-fields.scss b/src/styles/modules/utilities/_form-fields.scss
index 7fe6ba78e..bcb1e4f2c 100644
--- a/src/styles/modules/utilities/_form-fields.scss
+++ b/src/styles/modules/utilities/_form-fields.scss
@@ -1,8 +1,6 @@
 /**
 * Fancy form fields styles
 */
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 .fancy-field-group {
 }
diff --git a/src/styles/pages/user-actions/_form-pages.scss b/src/styles/pages/user-actions/_form-pages.scss
index 24f20f693..94a35203a 100644
--- a/src/styles/pages/user-actions/_form-pages.scss
+++ b/src/styles/pages/user-actions/_form-pages.scss
@@ -1,8 +1,6 @@
 /**
 * @partial: _inbox.scss
 */
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 // == Create account page
 .form-card-holder {
diff --git a/src/styles/vendors/bootstrap/_close.scss b/src/styles/vendors/bootstrap/_close.scss
index 811f84e79..614f79224 100644
--- a/src/styles/vendors/bootstrap/_close.scss
+++ b/src/styles/vendors/bootstrap/_close.scss
@@ -1,5 +1,3 @@
-@import '../../theme-variables-collection';
-@import '../../themes';
 
 .close {
   float: right;
diff --git a/src/styles/vendors/bootstrap/_dropdown.scss b/src/styles/vendors/bootstrap/_dropdown.scss
index e2f1f79ea..9e7a5d910 100644
--- a/src/styles/vendors/bootstrap/_dropdown.scss
+++ b/src/styles/vendors/bootstrap/_dropdown.scss
@@ -1,8 +1,5 @@
 // The dropdown wrapper (`<div>`)
 
-@import '../../theme-variables-collection';
-@import '../../themes';
-
 .dropup,
 .dropdown {
   position: relative;
diff --git a/src/styles/vendors/bootstrap/_forms.scss b/src/styles/vendors/bootstrap/_forms.scss
index 0f9166260..66b72efae 100644
--- a/src/styles/vendors/bootstrap/_forms.scss
+++ b/src/styles/vendors/bootstrap/_forms.scss
@@ -1,6 +1,4 @@
 // scss-lint:disable QualifyingElement
-@import '../../theme-variables-collection';
-@import '../../themes';
 //
 // Textual form controls
 //
diff --git a/src/styles/vendors/bootstrap/_reboot.scss b/src/styles/vendors/bootstrap/_reboot.scss
index d90bf9a33..c6bcae24f 100644
--- a/src/styles/vendors/bootstrap/_reboot.scss
+++ b/src/styles/vendors/bootstrap/_reboot.scss
@@ -1,6 +1,4 @@
 // scss-lint:disable QualifyingElement, DuplicateProperty
-@import '../../theme-variables-collection';
-@import '../../themes';
 // Reboot
 //
 // Global resets to common HTML elements and more for easier usage by Bootstrap.
diff --git a/src/styles/vendors/bootstrap/mixins/_alert.scss b/src/styles/vendors/bootstrap/mixins/_alert.scss
index f658aa3ee..a01bf6717 100644
--- a/src/styles/vendors/bootstrap/mixins/_alert.scss
+++ b/src/styles/vendors/bootstrap/mixins/_alert.scss
@@ -1,6 +1,4 @@
 // Alerts
-@import '../../../theme-variables-collection';
-@import '../../../themes';
 
 @mixin alert-variant($background, $border, $body-color) {
   background-color: $background;

From ab2aaee018d0aa3dba2e097777070a55a18db6b5 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 13:18:08 -0400
Subject: [PATCH 17/33] fixed draft breaks original attachment issue

---
 .../mail/mail-sidebar/compose-mail/compose-mail.component.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
index bf8e33580..85bfb3aed 100644
--- a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
+++ b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.ts
@@ -815,7 +815,7 @@ export class ComposeMailComponent implements OnInit, AfterViewInit, OnChanges, O
         this.draftMail && this.draftMail.attachments
           ? this.draftMail.attachments.map(attachment => {
               attachment.progress = 100;
-              attachment.name = this.filenamePipe.transform(attachment.document);
+              attachment.name = attachment.name ? attachment.name : this.filenamePipe.transform(attachment.document);
               attachment.draftId = this.draftId;
               attachment.attachmentId = performance.now() + Math.floor(Math.random() * 1000);
               return attachment;

From af175b0bb1093b9422e26ce8ca1c946c18659dea Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Fri, 29 Jan 2021 22:28:40 +0200
Subject: [PATCH 18/33] Hotfix type in attachments limit

---
 .../components/pricing-plans/pricing-plans.component.html       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/pricing-plans/pricing-plans.component.html b/src/app/shared/components/pricing-plans/pricing-plans.component.html
index c088a3cfa..fc10d80f7 100644
--- a/src/app/shared/components/pricing-plans/pricing-plans.component.html
+++ b/src/app/shared/components/pricing-plans/pricing-plans.component.html
@@ -80,7 +80,7 @@ <h3 class="heading mt-4 position-relative">
                 <a *ngIf="plan.name === planType.PRIME" class="switch-payment-type" (click)="togglePaymentType()"> Click here to switch to {{ selectedPaymentType === paymentTypeEnum.ANNUALLY ? 'monthly' : 'yearly' }} </a>
               </h3>
               <div class="px-2 py-3 plan-sub-item">{{ plan.messages_per_day }}<label *ngIf="plan.name !== planType.CHAMPION">/day</label></div>
-              <div class="px-2 py-3 plan-sub-item">{{ plan.attachment_upload_limit }}/MB</div>
+              <div class="px-2 py-3 plan-sub-item">{{ plan.attachment_upload_limit }}MB</div>
               <div class="px-2 py-3 plan-sub-item">{{ plan.gb }}GB</div>
               <div class="px-2 py-3 plan-sub-item">{{ plan.aliases }}</div>
               <div class="px-2 py-3 plan-sub-item">{{ plan.custom_domains }}</div>

From 22b673aa5670cb8619aa68a8263cd0bbc22a3983 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 18:00:18 -0400
Subject: [PATCH 19/33] Added Drag&Drop for folder reordering

---
 package-lock.json                             | 39 ++++++++++++++++---
 package.json                                  |  2 +-
 .../folders/folders.component.html            |  7 +++-
 .../folders/folders.component.scss            | 29 ++++++++++++++
 .../folders/folders.component.ts              |  8 ++++
 src/app/mail/mail.module.ts                   |  2 +
 6 files changed, 79 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf0eef725..d83ef41df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ctemplar",
-  "version": "2.5.11",
+  "version": "2.5.12",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -352,12 +352,19 @@
       "integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
     },
     "@angular/cdk": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.2.3.tgz",
-      "integrity": "sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.1.tgz",
+      "integrity": "sha512-rIog+eqv6RtpSWKM+iHQ5oHyOALMxRXkeTiJyvPfBCYQ2hzPN16+eNxP/JOR+C4y7pMaJyPur0pC572IZEnCsw==",
       "requires": {
         "parse5": "^5.0.0",
-        "tslib": "^1.7.1"
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
       }
     },
     "@angular/cli": {
@@ -18378,6 +18385,28 @@
             "extend": "^3.0.2",
             "parchment": "^1.1.4",
             "quill-delta": "^3.6.2"
+          },
+          "dependencies": {
+            "fast-diff": {
+              "version": "1.1.2",
+              "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+              "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+            },
+            "parchment": {
+              "version": "1.1.4",
+              "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+              "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+            },
+            "quill-delta": {
+              "version": "3.6.3",
+              "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+              "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+              "requires": {
+                "deep-equal": "^1.0.1",
+                "extend": "^3.0.2",
+                "fast-diff": "1.1.2"
+              }
+            }
           }
         },
         "quill-delta": {
diff --git a/package.json b/package.json
index 81c32946b..ffe54c89c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^9.1.12",
-    "@angular/cdk": "^8.2.3",
+    "@angular/cdk": "^11.1.1",
     "@angular/common": "^9.1.12",
     "@angular/compiler": "^9.1.12",
     "@angular/core": "^9.1.12",
diff --git a/src/app/mail/mail-settings/folders/folders.component.html b/src/app/mail/mail-settings/folders/folders.component.html
index 287abe9c3..90551209c 100644
--- a/src/app/mail/mail-settings/folders/folders.component.html
+++ b/src/app/mail/mail-settings/folders/folders.component.html
@@ -21,10 +21,13 @@ <h5 class="ui-header-subtitle text-dark mb-0">
       </button>
       <app-loading-spinner class="float-right" [showSpinner]="reorderInProgress && !reorder"></app-loading-spinner>
       <ng-container *ngTemplateOutlet="reorderButtons"></ng-container>
-      <ul class="ui-list ui-list-styled list-styled folders-list">
-        <li *ngFor="let folder of folders; let i = index" class="ui-list-item ui-list-item-xs-full">
+      <ul cdkDropList class="ui-list ui-list-styled list-styled folders-list" (cdkDropListDropped)="onFolderDrop($event)">
+        <li *ngFor="let folder of folders; let i = index" class="ui-list-item ui-list-item-xs-full" cdkDrag>
           <div class="row row-xs align-items-center folder-item">
             <div class="col-10 col-sm-8 show-ellipses">
+              <div class="drag-drop-handle" cdkDragHandle *ngIf="reorder">
+                <i class="fas fa-arrows-alt-v"></i>
+              </div>
               <span>
                 <i class="folder-color-box icon" [style.background]="folder.color"></i>
               </span>
diff --git a/src/app/mail/mail-settings/folders/folders.component.scss b/src/app/mail/mail-settings/folders/folders.component.scss
index 4874c0f52..54b101410 100644
--- a/src/app/mail/mail-settings/folders/folders.component.scss
+++ b/src/app/mail/mail-settings/folders/folders.component.scss
@@ -31,3 +31,32 @@
   min-width: 40px;
   margin: 0 10px;
 }
+
+.drag-drop-handle {
+  width: 22px;
+  height: 22px;
+  margin-right: 5px;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: move;
+}
+
+// TODO
+// Should be updated for dark mode
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging :not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/app/mail/mail-settings/folders/folders.component.ts b/src/app/mail/mail-settings/folders/folders.component.ts
index 1bbfcae7f..2b7417c2a 100644
--- a/src/app/mail/mail-settings/folders/folders.component.ts
+++ b/src/app/mail/mail-settings/folders/folders.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Store } from '@ngrx/store';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -178,5 +179,12 @@ export class FoldersComponent implements OnInit, OnDestroy {
     this.saveOrder();
   }
 
+  onFolderDrop(event: CdkDragDrop<Folder[]>) {
+    moveItemInArray(this.folders, event.previousIndex, event.currentIndex);
+    this.folders.forEach((folder: Folder, index) => {
+      folder.sort_order = index + 1;
+    });
+  }
+
   ngOnDestroy(): void {}
 }
diff --git a/src/app/mail/mail.module.ts b/src/app/mail/mail.module.ts
index 3a2098af3..554b5da5e 100644
--- a/src/app/mail/mail.module.ts
+++ b/src/app/mail/mail.module.ts
@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatStepperModule } from '@angular/material/stepper';
 import { NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { QuillModule } from 'ngx-quill';
 
 import { SharedModule } from '../shared/shared.module';
@@ -78,6 +79,7 @@ import { MailRoutingModule } from './mail-routing.module';
     MatStepperModule,
     NgbModalModule,
     NgbModule,
+    DragDropModule,
     QuillModule.forRoot(),
     ReactiveFormsModule,
     SharedModule,

From 994053d5b8fdf1d87cb1c37774feb2d88a817f30 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 18:05:25 -0400
Subject: [PATCH 20/33] Removed comment

---
 src/app/mail/mail-settings/folders/folders.component.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/mail/mail-settings/folders/folders.component.scss b/src/app/mail/mail-settings/folders/folders.component.scss
index 3df9f860f..3b8a4f081 100644
--- a/src/app/mail/mail-settings/folders/folders.component.scss
+++ b/src/app/mail/mail-settings/folders/folders.component.scss
@@ -43,8 +43,6 @@
   cursor: move;
 }
 
-// TODO
-// Should be updated for dark mode
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;

From f0ba8ab84cdf654d0778678ccaaf28f329de4519 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 19:02:46 -0400
Subject: [PATCH 21/33] Roll Back angular cdk

---
 package-lock.json | 15 ++++-----------
 package.json      |  2 +-
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d83ef41df..114e86fc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -352,19 +352,12 @@
       "integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
     },
     "@angular/cdk": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.1.tgz",
-      "integrity": "sha512-rIog+eqv6RtpSWKM+iHQ5oHyOALMxRXkeTiJyvPfBCYQ2hzPN16+eNxP/JOR+C4y7pMaJyPur0pC572IZEnCsw==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.2.3.tgz",
+      "integrity": "sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA==",
       "requires": {
         "parse5": "^5.0.0",
-        "tslib": "^2.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
-        }
+        "tslib": "^1.7.1"
       }
     },
     "@angular/cli": {
diff --git a/package.json b/package.json
index ffe54c89c..81c32946b 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^9.1.12",
-    "@angular/cdk": "^11.1.1",
+    "@angular/cdk": "^8.2.3",
     "@angular/common": "^9.1.12",
     "@angular/compiler": "^9.1.12",
     "@angular/core": "^9.1.12",

From eeaff47006bed3502fffa347d424fd059c400d7f Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Fri, 29 Jan 2021 23:14:45 -0400
Subject: [PATCH 22/33] removed static SRI

---
 src/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index bb97ed93a..a15e53908 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,8 @@
   </head>
 
   <body class="theme-light">
-    <script type="text/javascript" integrity="sha384-jeMare1Tag4YJDru+W5NJpF9ma+9ARdnJ+RNjR+dr9SU2PkQCpSQ4m/gW2uXmlQ2" src="assets/js/browser-compatibility.js"></script>
+    <script type="text/javascript" src="assets/js/browser-compatibility.js"></script>
+
     <noscript>
       <header class="nav-fixed" role="banner">
         <a class="navbar-brand" routerLink="/">

From 6f84976c582ab89783fd8420366ee52f636a0830 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Sat, 30 Jan 2021 00:13:02 -0400
Subject: [PATCH 23/33] hotfix the issue dark mode

---
 src/app/mail/mail.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index 6d797c96f..70eb616bc 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -922,7 +922,7 @@
   border-bottom: 1px solid var(--mail-row-border-bottom-color);
   font-size: 0.75rem;
   line-height: 1;
-  background-color: #fafaf9;
+  background-color: var(--mail-row-background);
   cursor: pointer;
 
   @include media('>=ipad') {

From 5ad8fa5afb8275db9e22c74dfa7c02c69dac5af1 Mon Sep 17 00:00:00 2001
From: The-Hidden-Hand <45569116+The-Hidden-Hand@users.noreply.github.com>
Date: Mon, 1 Feb 2021 15:32:27 +0000
Subject: [PATCH 24/33] Increase version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 81c32946b..6c5da5785 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ctemplar",
-  "version": "2.5.12",
+  "version": "2.5.13",
   "license": "Apache",
   "main": "electron-main.js",
   "description": "Angular webclient (with Linux, macOS and Windows desktop clients) for CTemplar's encrypted email service.",

From b8104587aa4ef5d054025375d6ed4c9b9d5643bb Mon Sep 17 00:00:00 2001
From: The-Hidden-Hand <45569116+The-Hidden-Hand@users.noreply.github.com>
Date: Tue, 2 Feb 2021 10:31:43 +0000
Subject: [PATCH 25/33] Fixes CTemplar/support#14

---
 .../dialogs/use-cache-dialog/use-cache-dialog.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/users/dialogs/use-cache-dialog/use-cache-dialog.component.html b/src/app/users/dialogs/use-cache-dialog/use-cache-dialog.component.html
index 5c50de793..d8ed27cb8 100644
--- a/src/app/users/dialogs/use-cache-dialog/use-cache-dialog.component.html
+++ b/src/app/users/dialogs/use-cache-dialog/use-cache-dialog.component.html
@@ -7,7 +7,7 @@ <h3 class="modal-title w-100 text-dark">
   <div class="modal-body bg-faded">
     <div class="mail-actions-form-holder modal-mail-actions-form-holder">
       <div class="form-group">
-        We provide a feature to temporary store some decrypted data on your local storage for improved speed. If you trust your device, you can safely enable this feature.
+        We provide a feature to temporarily store some decrypted data on your local storage for improved speed. If you trust your device, you can safely enable this feature.
         <a href="https://ctemplar.com/help/answer/temporary-store-decrypted-data/" rel="noopener noreferrer" target="_blank">Learn more</a>.
       </div>
       <div class="form-group text-right mb-0">

From e22161819ddc79af8109bd62eecbf895c8f81372 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Thu, 4 Feb 2021 12:32:56 +0200
Subject: [PATCH 26/33] Fix delete permanently issue

---
 .../mail-folder/generic-folder/generic-folder.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html b/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html
index 542f6f638..c6fca87c6 100644
--- a/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html
+++ b/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html
@@ -143,7 +143,7 @@
         </li>
         <!-- Delete all messages permanently -->
         <li *ngIf="(mailFolder === mailFolderTypes.TRASH || mailFolder === mailFolderTypes.SPAM) && mails?.length > 0">
-          <a (click)="openUseCacheConfirmDialog()" class="btn btn-sm delete-permanently-btn" placement="top" [ngbTooltip]="'mail_list.delete_messages' | translate">
+          <a (click)="confirmDeleteAll()" class="btn btn-sm delete-permanently-btn" placement="top" [ngbTooltip]="'mail_list.delete_messages' | translate">
             <i class="icon icon-garbage position-left"></i>
             <span [translate]="'mail_list.delete_all'"> Delete all permanently</span>
           </a>

From 36f53cef429d103f98e2803a0c8717cb80881c97 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Thu, 4 Feb 2021 21:49:18 +0200
Subject: [PATCH 27/33] Change style of aside bar with lower screen

---
 src/app/mail/mail-sidebar/mail-sidebar.component.html | 2 +-
 src/app/mail/mail-sidebar/mail-sidebar.component.ts   | 8 +++++++-
 src/app/mail/mail.component.scss                      | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.html b/src/app/mail/mail-sidebar/mail-sidebar.component.html
index 59142e67a..6c5eae6f5 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.html
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.html
@@ -1,4 +1,4 @@
-<aside id="mailbox-sidebar" (clickOutside)="toggleMenu($event)" class="mailbox-sidebar is-sidebar-expandedx" role="complementary" [ngClass]="{ 'is-sidebar-expanded': isSidebarOpened }">
+<aside id="mailbox-sidebar" (clickOutside)="toggleMenu($event)" class="mailbox-sidebar is-sidebar-expandedx" role="complementary" [ngClass]="{ 'is-sidebar-expanded': isSidebarOpened }" (mouseover)="changeAsideExpand($event)" (mouseout)="changeAsideExpand($event)">
   <div class="mailbox-sidebar-inner" [class.sidebar-opened]="isSidebarOpened">
     <!-- CTemplar Logo Section -->
     <div class="mailbox-brand">
diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.ts b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
index 872d5f68b..9e5e64753 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.ts
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
@@ -318,7 +318,7 @@ export class MailSidebarComponent implements OnInit, AfterViewInit, OnDestroy {
       if (this.document.body.classList.contains('menu-open')) {
         this.isMenuOpened = true;
       }
-    } else if (this.breakpointsService.isSM() || this.breakpointsService.isMD()) {
+    } else if (this.breakpointsService.isMD()) {
       if (event) {
         this.isSidebarOpened = false;
       } else {
@@ -327,6 +327,12 @@ export class MailSidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  changeAsideExpand(event) {
+    if (this.breakpointsService.isSM()) {
+      this.isSidebarOpened = event.type === 'mouseover' ? true : false;
+    }
+  }
+
   showNotification(mail: Mail, folder: string) {
     const title = mail.sender_display_name ? mail.sender_display_name : mail.sender_display.name;
     const options = new PushNotificationOptions();
diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index 70eb616bc..349a77d9a 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -945,7 +945,7 @@
 
   &.is-selected,
   &.is-selected:hover {
-    background: var(--mail-row-background-selected)!important;
+    background: var(--mail-row-background-selected) !important;
   }
 
   &.is-active {
@@ -953,7 +953,7 @@
     color: $brand-white !important;
   }
   &:hover {
-    background: var(--mail-row-background-active)!important;
+    background: var(--mail-row-background-active) !important;
   }
 }
 

From 968e7535e9b2c465841875e2bd5d58c31a872d73 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Mon, 8 Feb 2021 21:10:45 +0200
Subject: [PATCH 28/33] go back to mail list after delete

---
 .../mail/mail-detail/mail-detail.component.ts   | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/app/mail/mail-detail/mail-detail.component.ts b/src/app/mail/mail-detail/mail-detail.component.ts
index 8aecd9e2d..e1adebd8e 100644
--- a/src/app/mail/mail-detail/mail-detail.component.ts
+++ b/src/app/mail/mail-detail/mail-detail.component.ts
@@ -772,7 +772,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
         this.mail.children &&
         !this.mail.children.filter(child => child.id !== mail.id).some(child => child.folder === MailFolderType.TRASH)
       ) {
-        this.changeMailAfterDelete(this.currentMailIndex + 1);
+        this.goBackAfterDelete(this.currentMailIndex + 1);
       }
     } else {
       this.store.dispatch(
@@ -804,19 +804,14 @@ export class MailDetailComponent implements OnInit, OnDestroy {
         this.mail.folder === MailFolderType.TRASH) ||
       (mail.id === this.mail.id && this.mail.folder === MailFolderType.TRASH)
     ) {
-      this.changeMailAfterDelete(this.currentMailIndex + 1);
+      this.goBackAfterDelete(this.currentMailIndex + 1);
     }
   }
 
-  changeMailAfterDelete(index: number) {
-    if (index < 0 || index >= this.mails.length) {
-      this.goBack(500);
-    }
+  goBackAfterDelete(index: number) {
+    this.goBack(500);
     this.mail = null;
-    setTimeout(() => {
-      this.markedAsRead = false;
-      this.router.navigateByUrl(`/mail/${this.mailFolder}/page/${this.page}/message/${this.mails[index].id}`);
-    }, 500);
+    this.markedAsRead = false;
   }
 
   onDeleteForAll(mail: Mail) {
@@ -825,7 +820,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
       this.mail.children = this.mail.children.filter(child => child.id !== mail.id);
     }
     if (mail.id === this.mail.id) {
-      this.changeMailAfterDelete(this.currentMailIndex + 1);
+      this.goBackAfterDelete(this.currentMailIndex + 1);
     }
   }
 

From 52f1c70934f1c444eabfa51a93dfec0c783e37e2 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Tue, 9 Feb 2021 02:50:54 +0200
Subject: [PATCH 29/33] Delete unused code

---
 src/app/mail/mail-detail/mail-detail.component.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/mail/mail-detail/mail-detail.component.ts b/src/app/mail/mail-detail/mail-detail.component.ts
index e1adebd8e..bcdde53d4 100644
--- a/src/app/mail/mail-detail/mail-detail.component.ts
+++ b/src/app/mail/mail-detail/mail-detail.component.ts
@@ -772,7 +772,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
         this.mail.children &&
         !this.mail.children.filter(child => child.id !== mail.id).some(child => child.folder === MailFolderType.TRASH)
       ) {
-        this.goBackAfterDelete(this.currentMailIndex + 1);
+        this.goBackAfterDelete();
       }
     } else {
       this.store.dispatch(
@@ -804,11 +804,11 @@ export class MailDetailComponent implements OnInit, OnDestroy {
         this.mail.folder === MailFolderType.TRASH) ||
       (mail.id === this.mail.id && this.mail.folder === MailFolderType.TRASH)
     ) {
-      this.goBackAfterDelete(this.currentMailIndex + 1);
+      this.goBackAfterDelete();
     }
   }
 
-  goBackAfterDelete(index: number) {
+  goBackAfterDelete() {
     this.goBack(500);
     this.mail = null;
     this.markedAsRead = false;
@@ -820,7 +820,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
       this.mail.children = this.mail.children.filter(child => child.id !== mail.id);
     }
     if (mail.id === this.mail.id) {
-      this.goBackAfterDelete(this.currentMailIndex + 1);
+      this.goBackAfterDelete();
     }
   }
 

From a813ebd36ef93227697cfdb698e06f658aff679b Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Mon, 8 Feb 2021 23:30:20 -0400
Subject: [PATCH 30/33] removed old darkmode implementation

---
 .../mail-sidebar/mail-sidebar.component.ts    |  12 +-
 src/app/shared/config.ts                      |   3 -
 src/assets/css/dark-mode.css                  | 207 ------------------
 3 files changed, 1 insertion(+), 221 deletions(-)
 delete mode 100644 src/assets/css/dark-mode.css

diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.ts b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
index 9e5e64753..184fefe51 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.ts
+++ b/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,7 +229,6 @@ 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);
       }
     });
@@ -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;
   }
diff --git a/src/app/shared/config.ts b/src/app/shared/config.ts
index 3b2d72eda..1ba665b34 100644
--- a/src/app/shared/config.ts
+++ b/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;}';
diff --git a/src/assets/css/dark-mode.css b/src/assets/css/dark-mode.css
deleted file mode 100644
index 5e9b30914..000000000
--- a/src/assets/css/dark-mode.css
+++ /dev/null
@@ -1,207 +0,0 @@
-.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;
-}
\ No newline at end of file

From 7ce51aac5ee4e19d6a75254bb8fd660bde95ecf3 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Mon, 8 Feb 2021 23:55:57 -0400
Subject: [PATCH 31/33] fixed force light mode

---
 src/app/mail/mail-sidebar/mail-sidebar.component.ts | 2 +-
 src/app/shared/services/theme-toggle-service.ts     | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/mail/mail-sidebar/mail-sidebar.component.ts b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
index 184fefe51..8e69d186c 100644
--- a/src/app/mail/mail-sidebar/mail-sidebar.component.ts
+++ b/src/app/mail/mail-sidebar/mail-sidebar.component.ts
@@ -229,7 +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.themeToggleService.forceUpdateTheme(false);
+        this.themeToggleService.forceLightModeTheme();
       }
     });
   }
diff --git a/src/app/shared/services/theme-toggle-service.ts b/src/app/shared/services/theme-toggle-service.ts
index 92f3a954a..ef9848fa1 100644
--- a/src/app/shared/services/theme-toggle-service.ts
+++ b/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 {}

From 4ec291543eea56887b43f036aa50ac652daefdc7 Mon Sep 17 00:00:00 2001
From: Kostya Yelskiy <super.dev0714@gmail.com>
Date: Tue, 9 Feb 2021 13:09:57 -0400
Subject: [PATCH 32/33] done missed dark mode

---
 .../custom-domains.component.ts               |  2 +-
 .../mail-settings.component.scss              |  2 +-
 .../compose-mail/compose-mail.component.scss  |  6 +++--
 src/app/mail/mail.component.scss              |  3 ++-
 .../bootstrap-overrides/_dropdown.scss        |  2 +-
 .../modules/mail-composer/_mail-composer.scss | 27 ++++++++++++++++++-
 6 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/app/mail/mail-settings/custom-domains/custom-domains.component.ts b/src/app/mail/mail-settings/custom-domains/custom-domains.component.ts
index 7f6d0a030..7cfe1ef7d 100644
--- a/src/app/mail/mail-settings/custom-domains/custom-domains.component.ts
+++ b/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');
   }
 }
diff --git a/src/app/mail/mail-settings/mail-settings.component.scss b/src/app/mail/mail-settings/mail-settings.component.scss
index 0c1fdcf43..3ccd78490 100644
--- a/src/app/mail/mail-settings/mail-settings.component.scss
+++ b/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;
   }
 }
diff --git a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss b/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss
index c86826c92..f93b04987 100644
--- a/src/app/mail/mail-sidebar/compose-mail/compose-mail.component.scss
+++ b/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;
diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index 349a77d9a..fa8c2b143 100644
--- a/src/app/mail/mail.component.scss
+++ b/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;
diff --git a/src/styles/modules/bootstrap-overrides/_dropdown.scss b/src/styles/modules/bootstrap-overrides/_dropdown.scss
index f072fac49..b71540d42 100644
--- a/src/styles/modules/bootstrap-overrides/_dropdown.scss
+++ b/src/styles/modules/bootstrap-overrides/_dropdown.scss
@@ -31,7 +31,7 @@
 
   button:disabled {
     a {
-      color: grey !important;
+      color: var(--brand-gray) !important;
     }
   }
 }
diff --git a/src/styles/modules/mail-composer/_mail-composer.scss b/src/styles/modules/mail-composer/_mail-composer.scss
index 05a441a31..e732e5953 100644
--- a/src/styles/modules/mail-composer/_mail-composer.scss
+++ b/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;
+    }
+  }
+}

From 94e94ee4110f23fab7829dd87423d5b10948bb95 Mon Sep 17 00:00:00 2001
From: happyman125 <boffice933@gmail.com>
Date: Tue, 9 Feb 2021 21:47:21 +0200
Subject: [PATCH 33/33] move message from Inbox to sent

---
 .../mail-folder/generic-folder/generic-folder.component.html | 4 ++++
 src/app/mail/mail.component.scss                             | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html b/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html
index c6fca87c6..b583eb93d 100644
--- a/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html
+++ b/src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html
@@ -115,6 +115,10 @@
                 <i class="icon icon-inbox"></i>
                 <span [translate]="'mail_sidebar.inbox'">Inbox</span>
               </a>
+              <a class="dropdown-item" (click)="moveToFolder(mailFolderTypes.SENT)" *ngIf="mailFolder === mailFolderTypes.INBOX">
+                <i class="icon icon-paper-plane"></i>
+                <span [translate]="'mail_sidebar.sent'">Sent</span>
+              </a>
               <ng-container *ngFor="let folder of customFolders; let i = index">
                 <a class="dropdown-item" *ngIf="mailFolder !== folder.name" (click)="moveToFolder(folder.name)">
                   <i class="folder-color-box icon" [style.background]="folder.color"></i>
diff --git a/src/app/mail/mail.component.scss b/src/app/mail/mail.component.scss
index 349a77d9a..fb9f57f5e 100644
--- a/src/app/mail/mail.component.scss
+++ b/src/app/mail/mail.component.scss
@@ -1520,6 +1520,11 @@
 .folder-dropdown {
   max-height: 430px;
   overflow-y: auto;
+
+  a {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .last-action {