From 3653239022dc99535f8ccaa6f1b25a82f1535aa5 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 16 Dec 2023 20:14:05 +0100
Subject: [PATCH] Client - add missing color variables and update dark mode
 theme

---
 fittrackee_client/src/App.vue                 |  2 +-
 .../src/components/Common/Dropdown.vue        |  6 +-
 .../src/components/Common/StaticMap.vue       |  2 +-
 .../Dashboard/UserCalendar/CalendarDays.vue   |  2 +-
 .../UserCalendar/CalendarWorkoutsChart.vue    |  6 +-
 fittrackee_client/src/components/NavBar.vue   | 25 +++--
 .../UserPrivacyPolicyValidation.vue           |  2 +-
 .../WorkoutDetail/WorkoutMap/index.vue        |  6 +-
 .../src/components/Workouts/WorkoutsList.vue  |  2 +-
 fittrackee_client/src/scss/base.scss          | 15 ++-
 fittrackee_client/src/scss/colors-dark.scss   | 91 ++++++++++++-------
 fittrackee_client/src/scss/colors.scss        | 18 ++++
 fittrackee_client/src/views/AdminView.vue     |  4 +-
 13 files changed, 117 insertions(+), 64 deletions(-)

diff --git a/fittrackee_client/src/App.vue b/fittrackee_client/src/App.vue
index a6877f41..22fb9549 100644
--- a/fittrackee_client/src/App.vue
+++ b/fittrackee_client/src/App.vue
@@ -123,7 +123,7 @@
     .scroll-button {
       background-color: var(--scroll-button-bg-color);
       border-radius: $border-radius;
-      box-shadow: 1px 1px 3px lightgrey;
+      box-shadow: 1px 1px 3px var(--app-shadow-color);
       display: none;
       padding: 0 $default-padding;
 
diff --git a/fittrackee_client/src/components/Common/Dropdown.vue b/fittrackee_client/src/components/Common/Dropdown.vue
index 3af33dfd..61f53530 100644
--- a/fittrackee_client/src/components/Common/Dropdown.vue
+++ b/fittrackee_client/src/components/Common/Dropdown.vue
@@ -70,14 +70,14 @@
 
     .dropdown-list {
       list-style-type: none;
-      background-color: #ffffff;
+      background-color: var(--dropdown-background-color);
       padding: 0 !important;
       margin-top: 5px;
       margin-left: -20px !important;
       position: absolute;
       text-align: left;
-      border: solid 1px lightgrey;
-      box-shadow: 2px 2px 5px lightgrey;
+      border: solid 1px var(--dropdown-border-color);
+      box-shadow: 2px 2px 5px var(--app-shadow-color);
       width: auto !important;
 
       .dropdown-item {
diff --git a/fittrackee_client/src/components/Common/StaticMap.vue b/fittrackee_client/src/components/Common/StaticMap.vue
index dfcdd690..1ac60c5d 100644
--- a/fittrackee_client/src/components/Common/StaticMap.vue
+++ b/fittrackee_client/src/components/Common/StaticMap.vue
@@ -69,7 +69,7 @@
     }
 
     .map-attribution-text {
-      background-color: rgba(255, 255, 255, 0.7);
+      background-color: var(--map-attribution-text);
     }
   }
 </style>
diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue
index 3512cbb0..13e8687f 100644
--- a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue
+++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue
@@ -34,7 +34,7 @@
       padding: $default-padding * 0.5;
       text-align: center;
       text-transform: uppercase;
-      color: var(--app-color-light);
+      color: var(--calendar-day-color);
     }
   }
 </style>
diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue
index b3e1947e..1337b1dc 100644
--- a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue
+++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue
@@ -88,11 +88,11 @@
       padding-left: 40px;
 
       .more-workouts {
-        background: whitesmoke;
+        background: var(--calendar-workouts-color);
         border-radius: 4px;
         box-shadow:
-          0 4px 8px 0 rgba(0, 0, 0, 0.2),
-          0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          0 4px 8px 0 var(--calendar-workouts-box-shadow-0),
+          0 6px 20px 0 var(--calendar-workouts-box-shadow-1);
         position: absolute;
         top: 52px;
         left: 0;
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 23d31efd..4b351b74 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -76,14 +76,20 @@
               {{ $t('user.REGISTER') }}
             </router-link>
           </div>
-          <button
-            class="nav-button transparent"
-            @click="toggleTheme"
-            :title="$t('user.TOGGLE_THEME')"
-          >
-            <i class="fa nav-button-fa" :class="themeIcon" aria-hidden="true" />
-            <span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
-          </button>
+          <div class="theme-button">
+            <button
+              class="nav-button transparent"
+              @click="toggleTheme"
+              :title="$t('user.TOGGLE_THEME')"
+            >
+              <i
+                class="fa nav-button-fa"
+                :class="themeIcon"
+                aria-hidden="true"
+              />
+              <span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
+            </button>
+          </div>
           <Dropdown
             v-if="availableLanguages && language"
             class="nav-item"
@@ -394,6 +400,9 @@
           padding: 0;
         }
       }
+      .theme-button {
+        margin-left: $default-padding * 2;
+      }
     }
   }
 </style>
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserPrivacyPolicyValidation.vue b/fittrackee_client/src/components/User/ProfileEdition/UserPrivacyPolicyValidation.vue
index 936c6fde..d725d638 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPrivacyPolicyValidation.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPrivacyPolicyValidation.vue
@@ -92,7 +92,7 @@
 
       .policy-content {
         height: 500px;
-        border: 1px solid #ccc;
+        border: 1px solid var(--policy-border-color);
         overflow: auto;
         margin: $default-margin;
         border-radius: $border-radius;
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
index 4a48ff27..27d54c9b 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
@@ -214,11 +214,11 @@
       line-height: 400px;
     }
     .map-control {
-      background: #ffffff;
+      background: var(--map-control-bg-color);
       padding: 5px 10px;
-      border: 2px solid #bfc0ab;
+      border: 2px solid var(--map-control-border-color);
       border-radius: 3px;
-      color: #000000;
+      color: var(--map-control-color);
     }
     ::v-deep(.fullscreen) {
       display: flex;
diff --git a/fittrackee_client/src/components/Workouts/WorkoutsList.vue b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
index 807f0234..38e0e4c6 100644
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
@@ -354,7 +354,7 @@
           }
           .static-map {
             display: none;
-            box-shadow: 3px 3px 3px 1px lightgrey;
+            box-shadow: 3px 3px 3px 1px var(--app-shadow-color);
           }
         }
         .workout-title:hover .static-map {
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index a1f133b7..c4414dfe 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -3,6 +3,10 @@
 @import 'fonts';
 @import 'vars';
 
+html [data-theme='dark'] {
+    color-scheme: dark;
+}
+
 body {
   margin: 0;
   overflow-y: scroll;
@@ -56,6 +60,7 @@ select {
   background-color: var(--input-bg-color);
   border-radius: $border-radius;
   border: solid 1px var(--input-border-color);
+  color: var(--input-color);
   padding: $default-padding;
 
   &:disabled {
@@ -103,13 +108,13 @@ button {
 
     &:disabled,
     &.confirm:disabled {
-      border-color: transparent;
+      border-color: var(--disabled-border-color);
       color: var(--disabled-color);
     }
   }
 
   &:hover {
-    background: var(--app-color);
+    background: var( --button-transparent-hover-color);
     color: var(--button-hover-color);
   }
 
@@ -129,7 +134,7 @@ button {
     background: var(--button-cancel-bg-color);
     color: var(--button-cancel-color);
     &:hover {
-      background: var(--app-color);
+      background: var( --button-transparent-hover-color);
       color: var(--button-hover-color);
     }
   }
@@ -138,7 +143,7 @@ button {
     background: var(--button-confirm-bg-color);
     color: var(--button-confirm-color);
     &:hover {
-      background: var(--app-color);
+      background: var( --button-transparent-hover-color);
       color: var(--button-hover-color);
     }
   }
@@ -195,7 +200,7 @@ button {
 }
 
 .form-info {
-  color: var(--alert-color);
+  color: var(--form-info);
   font-size: 0.8em;
   margin-top: -0.2 * $default-margin;
   padding: 0 $default-padding * 1.5;
diff --git a/fittrackee_client/src/scss/colors-dark.scss b/fittrackee_client/src/scss/colors-dark.scss
index 497e8aa4..1985116a 100644
--- a/fittrackee_client/src/scss/colors-dark.scss
+++ b/fittrackee_client/src/scss/colors-dark.scss
@@ -1,69 +1,90 @@
 :root [data-theme='dark'] {
-  --app-background-color: #090909;
-  --app-color: #ffffff;
+  --dark-blue: #181a1b;
+  --light-blue: #aec2d3;
+
+  --app-background-color: var(--dark-blue);
+  --app-color: var(--light-blue);
   --app-color-light: #6f7070;
-  --app-a-color: #ffffff;
-  --app-shadow-color: lightgrey;
+  --app-a-color: var(--light-blue);
+  --app-shadow-color: #383d3f;
   --app-loading-color: #f3f3f3;
   --app-loading-top-color: var(--app-color);
 
-  --button-hover-color: #090909;
-  --button-cancel-bg-color: #090909;
+  --button-hover-color: var(--app-color);
+  --button-transparent-hover-color: #233240;
+  --button-cancel-bg-color: var(--dark-blue);
   --button-cancel-color: var(--app-color);
-  --button-confirm-bg-color: #090909;
+  --button-confirm-bg-color: var(--dark-blue);
   --button-confirm-color: var(--app-color);
-  --button-danger-bg-color: #090909;
+  --button-danger-bg-color: var(--dark-blue);
   --button-danger-color: #dc3545;
   --button-danger-hover-bg-color: #dc3545;
-  --button-danger-hover-color: #090909;
+  --button-danger-hover-color: var(--dark-blue);
 
-  --card-border-color: #c4c7cf;
-  --input-border-color: #9da3af;
-  --input-bg-color: #8c8c8c;
+  --card-border-color: #494f52;
+  --input-border-color: #494f52;
+  --input-bg-color: var(--dark-blue);
+  --input-color: var(--app-color);
   --input-error-color: #dc3545;
-  --dropdown-hover-color: #cacaca;
+  --dropdown-hover-color: #233240;
+  --dropdown-background-color: var(--dark-blue);
+  --dropdown-border-color: var(--input-border-color);
+  --policy-border-color: #ccc;
+  --box-shadow-color: lightgrey;
+  --admin-disabled-input-color: var(--dark-blue);
 
-  --custom-checkbox-border-color: #ffffff;
-  --custom-checkbox-checked-bg-color: #ffffff;
-  --custom-checkbox-checked-color: #090909;
+  --custom-checkbox-border-color: #665f54;
+  --custom-checkbox-checked-bg-color: #575e62;
+  --custom-checkbox-checked-color: #e8e6e3;
 
-  --calendar-border-color: #c4c7cf;
-  --calendar-week-end-color: #f5f5f5;
-  --calendar-today-color: #bec6ce;
+  --calendar-border-color: var(--input-border-color);
+  --calendar-week-end-color: #1e2021;
+  --calendar-day-color: var(--app-color);
+  --calendar-today-color: #202324;
+  --calendar-workouts-color: #233240;
+  --calendar-workouts-box-shadow-0: rgba(0, 0, 0, 0.2);
+  --calendar-workouts-box-shadow-1: rgba(0, 0, 0, 0.19);
 
   --modal-background-color: rgba(0, 0, 0, 0.3);
 
-  --nav-bar-background-color: #090909;
+  --nav-bar-background-color: var(--dark-blue);
   --nav-bar-link-active: #ffffff;
-  --nav-border-color: #c5ccdb;
+  --nav-border-color: var(--input-border-color);
 
-  --mobile-menu-selected-color: #090909;
+  --mobile-menu-selected-color: var(--dark-blue);
   --mobile-menu-selected-bgcolor: #9da3af;
 
-  --footer-background-color: #090909;
-  --footer-border-color: #ebeef3;
-  --footer-color: #6f7070;
+  --footer-background-color: var(--dark-blue);
+  --footer-border-color: var(--input-border-color);
+  --footer-color: #9f968a;
+
+  --form-info: var(--app-color);
 
   --alert-background-color: #d6dde3;
   --alert-color: #3f3f3f;
   --info-background-color: #33353a;
   --info-color: var(--app-color);
-  --error-background-color: #ffd2d2;
-  --error-color: #db1924;
-  --success-background-color: #d9ecd9;
-  --success-color: #306430;
+  --error-background-color: #4e0000;
+  --error-color: #ea464f;
+  --success-background-color: #24391c;
+  --success-color: #97cd97;
 
-  --disabled-background-color: #e0e0e0;
+  --disabled-background-color: var(--dark-blue);
+  --disabled-border-color: transparent;
   --disabled-color: #727272;
   --disabled-sport-color: #616161;
 
-  --scroll-button-bg-color: rgba(255, 255, 255, 0.7);
+  --scroll-button-bg-color: var(--dark-blue);
 
   --workout-trophy-color: #daa520;
   --workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg)
     brightness(97%) contrast(96%);
   --workout-no-map-bg-color: #eaeaea;
   --workout-no-map-color: #585959;
+  --map-control-color: #000000;
+  --map-control-bg-color: #ffffff;
+  --map-control-border-color: #bfc0ab;
+  --map-attribution-text: rgba(255, 255, 255, 0.7);
 
   --cell-heading-bg-color: #eeeeee;
   --cell-heading-color: #696969;
@@ -71,10 +92,10 @@
   --svg-filter: drop-shadow(10px 10px 10px var(--app-shadow-color));
 
   --password-bg-color: #d7dadf;
-  --password-color-weak: #e46d6e;
-  --password-color-medium: #f8bc4a;
-  --password-color-good: #acc578;
-  --password-color-strong: #57c255;
+  --password-color-weak: #831819;
+  --password-color-medium: #9e6906;
+  --password-color-good: #4b5826;
+  --password-color-strong: #4a8c32;
 
   --scroll-thumb-color: #949697;
 }
diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss
index 70c386ec..09332a1a 100644
--- a/fittrackee_client/src/scss/colors.scss
+++ b/fittrackee_client/src/scss/colors.scss
@@ -8,6 +8,7 @@
   --app-loading-top-color: var(--app-color);
 
   --button-hover-color: #ffffff;
+  --button-transparent-hover-color: var(--app-color);
   --button-cancel-bg-color: #ffffff;
   --button-cancel-color: var(--app-color);
   --button-confirm-bg-color: #ffffff;
@@ -20,8 +21,14 @@
   --card-border-color: #c4c7cf;
   --input-border-color: #9da3af;
   --input-bg-color: #ffffff;
+  --input-color: var(--app-color);
   --input-error-color: #dc3545;
   --dropdown-hover-color: #eff0f5;
+  --dropdown-background-color: #ffffff;
+  --dropdown-border-color: lightgrey;
+  --policy-border-color: #ccc;
+  --box-shadow-color: lightgrey;
+  --admin-disabled-input-color: #ffffff;
 
   --custom-checkbox-border-color: #6d797a;
   --custom-checkbox-checked-bg-color: #6d797a;
@@ -29,7 +36,11 @@
 
   --calendar-border-color: #c4c7cf;
   --calendar-week-end-color: #f5f5f5;
+  --calendar-day-color: var(--app-color-light);
   --calendar-today-color: #eff1f3;
+  --calendar-workouts-color: whitesmoke;
+  --calendar-workouts-box-shadow-0: rgba(0, 0, 0, 0.2);
+  --calendar-workouts-box-shadow-1: rgba(0, 0, 0, 0.19);
 
   --modal-background-color: rgba(0, 0, 0, 0.3);
 
@@ -44,6 +55,8 @@
   --footer-border-color: #ebeef3;
   --footer-color: #6f7070;
 
+  --form-info: var(--alert-color);
+
   --alert-background-color: #d6dde3;
   --alert-color: #3f3f3f;
   --info-background-color: #e5e7ea;
@@ -54,6 +67,7 @@
   --success-color: #306430;
 
   --disabled-background-color: #e0e0e0;
+  --disabled-border-color: transparent;
   --disabled-color: #727272;
   --disabled-sport-color: #616161;
 
@@ -64,6 +78,10 @@
     brightness(97%) contrast(96%);
   --workout-no-map-bg-color: #eaeaea;
   --workout-no-map-color: #585959;
+  --map-control-color: #000000;
+  --map-control-bg-color: #ffffff;
+  --map-control-border-color: #bfc0ab;
+  --map-attribution-text: rgba(255, 255, 255, 0.7);
 
   --cell-heading-bg-color: #eeeeee;
   --cell-heading-color: #696969;
diff --git a/fittrackee_client/src/views/AdminView.vue b/fittrackee_client/src/views/AdminView.vue
index 16604506..29e02ef9 100644
--- a/fittrackee_client/src/views/AdminView.vue
+++ b/fittrackee_client/src/views/AdminView.vue
@@ -72,8 +72,8 @@
               &:disabled {
                 -webkit-appearance: none;
                 -moz-appearance: textfield;
-                background-color: white;
-                border-color: white;
+                background-color: var(--admin-disabled-input-color);
+                border-color: var(--admin-disabled-input-color);
                 color: var(--app-color);
               }
             }