From ba6e52363bfb875276d9af593767a02b16fb24e4 Mon Sep 17 00:00:00 2001
From: Gabriel Masclef <gabrielmasclef@hotmail.com>
Date: Mon, 2 Mar 2020 17:13:08 -0300
Subject: [PATCH] Smooth transitions - navigation bar

---
 package.json             |  3 ++-
 src/providers/app/app.ts |  1 -
 src/theme/dark.scss      | 15 +++++++++++++++
 src/theme/light.scss     | 37 +++++++++++++++++++++++++++++++++++--
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index d392079d16e..522d1e61bcf 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
     "cordova-plugin-globalization": "1.0.9",
     "cordova-plugin-inappbrowser": "3.1.0",
     "cordova-plugin-ionic-keyboard": "2.1.3",
+    "cordova-plugin-navigationbar-color": "0.0.9",
     "cordova-plugin-qrscanner": "3.0.1",
     "cordova-plugin-screen-orientation": "3.0.2",
     "cordova-plugin-spinner-dialog": "1.3.1",
@@ -265,4 +266,4 @@
   "prettier": {
     "singleQuote": true
   }
-}
+}
\ No newline at end of file
diff --git a/src/providers/app/app.ts b/src/providers/app/app.ts
index 916c2baa033..a86d7abd1cb 100644
--- a/src/providers/app/app.ts
+++ b/src/providers/app/app.ts
@@ -84,7 +84,6 @@ export class AppProvider {
     this.persistence.load();
     await this.config.load();
     await this.persistence.getAppTheme().then(value => {
-      if (!value) this.persistence.setAppTheme('light-theme');
       this.appTheme = new BehaviorSubject(value);
     });
     this.language.load();
diff --git a/src/theme/dark.scss b/src/theme/dark.scss
index d86f1c3bfaf..a2617698c65 100644
--- a/src/theme/dark.scss
+++ b/src/theme/dark.scss
@@ -12,6 +12,10 @@
   // Home Messages
   $message-background-dark-theme: #121212;
 
+  @mixin transition {
+    transition: background-color, color, 250ms cubic-bezier(0, 0, 0.3, 0.3) !important;
+  }
+
   // General -----
   ion-content {
     background-color: $background-color-dark-theme;
@@ -31,19 +35,23 @@
   .toolbar-background-md {
     background: $background-color-dark-theme;
     color: $text-color-dark-theme;
+    @include transition();
   }
 
   .toolbar-title {
     color: $text-color-dark-theme;
+    @include transition();
   }
 
   .header .toolbar-background {
     background-color: $background-color-dark-theme;
+    @include transition();
   }
   .tabs-md,
   .tabs-ios {
     .tabbar {
       background: $background-color-dark-theme;
+      @include transition();
     }
   }
   .swiper-pagination-bullet-active {
@@ -53,6 +61,11 @@
     background-color: #4f4f4e;
   }
 
+  button.item.activated,
+  .item-md.activated {
+    background-color: #4f4f4e;
+  }
+
   ion-searchbar {
     .searchbar-input-container {
       input.searchbar-input {
@@ -64,6 +77,7 @@
       }
     }
   }
+
   // Lists -----
   .bp-list {
     .item {
@@ -72,6 +86,7 @@
         border: 0;
         background-color: $background-color-dark-theme;
         color: $text-color-dark-theme;
+        @include transition();
       }
     }
     .main-label {
diff --git a/src/theme/light.scss b/src/theme/light.scss
index 2c6fd637272..350fdec86f1 100644
--- a/src/theme/light.scss
+++ b/src/theme/light.scss
@@ -1,2 +1,35 @@
-// .light-theme {
-// }
+.light-theme {
+  // Uses default values. This is just to make a smooth transition between themes
+  @mixin transition {
+    transition: background-color, color, 250ms cubic-bezier(0, 0, 0.3, 0.3) !important;
+  }
+
+  // General -----
+  .toolbar-background-md {
+    @include transition();
+  }
+
+  .toolbar-title {
+    @include transition();
+  }
+
+  .header .toolbar-background {
+    @include transition();
+  }
+  .tabs-md,
+  .tabs-ios {
+    .tabbar {
+      @include transition();
+    }
+  }
+
+  // Lists -----
+  .bp-list {
+    .item {
+      &.item-ios,
+      &.item-md {
+        @include transition();
+      }
+    }
+  }
+}