From f0e2c31f5d1511675b68efd2f90441928c3e7527 Mon Sep 17 00:00:00 2001 From: HenryDavidThoreau Date: Thu, 14 Dec 2023 08:08:28 +0100 Subject: [PATCH 01/17] Add colors-dark.scss --- fittrackee_client/src/scss/colors-dark.scss | 63 +++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 fittrackee_client/src/scss/colors-dark.scss diff --git a/fittrackee_client/src/scss/colors-dark.scss b/fittrackee_client/src/scss/colors-dark.scss new file mode 100644 index 00000000..ab951f3e --- /dev/null +++ b/fittrackee_client/src/scss/colors-dark.scss @@ -0,0 +1,63 @@ +:root { + --app-background-color: #090909; + --app-color: #ffffff; + --app-color-light: #6f7070; + --app-a-color: #ffffff; + --app-shadow-color: lightgrey; + --app-loading-color: #f3f3f3; + --app-loading-top-color: var(--app-color); + --button-hover-color: #090909; + --button-cancel-bg-color: #090909; + --button-cancel-color: var(--app-color); + --button-confirm-bg-color: #090909; + --button-confirm-color: var(--app-color); + --button-danger-bg-color: #090909; + --button-danger-color: #dc3545; + --button-danger-hover-bg-color: #dc3545; + --button-danger-hover-color: #090909; + --card-border-color: #c4c7cf; + --input-border-color: #9da3af; + --input-bg-color: #8c8c8c; + --input-error-color: #dc3545; + --dropdown-hover-color: #cacaca; + --custom-checkbox-border-color: #ffffff; + --custom-checkbox-checked-bg-color: #ffffff; + --custom-checkbox-checked-color: #090909; + --calendar-border-color: #c4c7cf; + --calendar-week-end-color: #f5f5f5; + --calendar-today-color: #bec6ce; + --modal-background-color: rgba(0, 0, 0, 0.3); + --nav-bar-background-color: #090909; + --nav-bar-link-active: #ffffff; + --nav-border-color: #c5ccdb; + --mobile-menu-selected-color: #090909; + --mobile-menu-selected-bgcolor: #9da3af; + --footer-background-color: #090909; + --footer-border-color: #ebeef3; + --footer-color: #6f7070; + --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; + --disabled-background-color: #e0e0e0; + --disabled-color: #727272; + --disabled-sport-color: #616161; + --scroll-button-bg-color: rgba(255, 255, 255, 0.7); + --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; + --cell-heading-bg-color: #eeeeee; + --cell-heading-color: #696969; + --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; + --scroll-thumb-color: #949697; +} From 861c3d7af386e9733d3296245af9959fc32efc79 Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 16 Dec 2023 18:52:22 +0100 Subject: [PATCH 02/17] Client - lint fix + add spaces in colors-dark.scss --- fittrackee_client/src/scss/colors-dark.scss | 139 +++++++++++--------- 1 file changed, 78 insertions(+), 61 deletions(-) diff --git a/fittrackee_client/src/scss/colors-dark.scss b/fittrackee_client/src/scss/colors-dark.scss index ab951f3e..58043b6a 100644 --- a/fittrackee_client/src/scss/colors-dark.scss +++ b/fittrackee_client/src/scss/colors-dark.scss @@ -1,63 +1,80 @@ :root { - --app-background-color: #090909; - --app-color: #ffffff; - --app-color-light: #6f7070; - --app-a-color: #ffffff; - --app-shadow-color: lightgrey; - --app-loading-color: #f3f3f3; - --app-loading-top-color: var(--app-color); - --button-hover-color: #090909; - --button-cancel-bg-color: #090909; - --button-cancel-color: var(--app-color); - --button-confirm-bg-color: #090909; - --button-confirm-color: var(--app-color); - --button-danger-bg-color: #090909; - --button-danger-color: #dc3545; - --button-danger-hover-bg-color: #dc3545; - --button-danger-hover-color: #090909; - --card-border-color: #c4c7cf; - --input-border-color: #9da3af; - --input-bg-color: #8c8c8c; - --input-error-color: #dc3545; - --dropdown-hover-color: #cacaca; - --custom-checkbox-border-color: #ffffff; - --custom-checkbox-checked-bg-color: #ffffff; - --custom-checkbox-checked-color: #090909; - --calendar-border-color: #c4c7cf; - --calendar-week-end-color: #f5f5f5; - --calendar-today-color: #bec6ce; - --modal-background-color: rgba(0, 0, 0, 0.3); - --nav-bar-background-color: #090909; - --nav-bar-link-active: #ffffff; - --nav-border-color: #c5ccdb; - --mobile-menu-selected-color: #090909; - --mobile-menu-selected-bgcolor: #9da3af; - --footer-background-color: #090909; - --footer-border-color: #ebeef3; - --footer-color: #6f7070; - --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; - --disabled-background-color: #e0e0e0; - --disabled-color: #727272; - --disabled-sport-color: #616161; - --scroll-button-bg-color: rgba(255, 255, 255, 0.7); - --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; - --cell-heading-bg-color: #eeeeee; - --cell-heading-color: #696969; - --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; - --scroll-thumb-color: #949697; + --app-background-color: #090909; + --app-color: #ffffff; + --app-color-light: #6f7070; + --app-a-color: #ffffff; + --app-shadow-color: lightgrey; + --app-loading-color: #f3f3f3; + --app-loading-top-color: var(--app-color); + + --button-hover-color: #090909; + --button-cancel-bg-color: #090909; + --button-cancel-color: var(--app-color); + --button-confirm-bg-color: #090909; + --button-confirm-color: var(--app-color); + --button-danger-bg-color: #090909; + --button-danger-color: #dc3545; + --button-danger-hover-bg-color: #dc3545; + --button-danger-hover-color: #090909; + + --card-border-color: #c4c7cf; + --input-border-color: #9da3af; + --input-bg-color: #8c8c8c; + --input-error-color: #dc3545; + --dropdown-hover-color: #cacaca; + + --custom-checkbox-border-color: #ffffff; + --custom-checkbox-checked-bg-color: #ffffff; + --custom-checkbox-checked-color: #090909; + + --calendar-border-color: #c4c7cf; + --calendar-week-end-color: #f5f5f5; + --calendar-today-color: #bec6ce; + + --modal-background-color: rgba(0, 0, 0, 0.3); + + --nav-bar-background-color: #090909; + --nav-bar-link-active: #ffffff; + --nav-border-color: #c5ccdb; + + --mobile-menu-selected-color: #090909; + --mobile-menu-selected-bgcolor: #9da3af; + + --footer-background-color: #090909; + --footer-border-color: #ebeef3; + --footer-color: #6f7070; + + --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; + + --disabled-background-color: #e0e0e0; + --disabled-color: #727272; + --disabled-sport-color: #616161; + + --scroll-button-bg-color: rgba(255, 255, 255, 0.7); + + --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; + + --cell-heading-bg-color: #eeeeee; + --cell-heading-color: #696969; + + --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; + + --scroll-thumb-color: #949697; } From 94fd50d4041844f430c9e7515d97221f9fba3e5c Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 16 Dec 2023 18:54:40 +0100 Subject: [PATCH 03/17] Client - add dark theme to base.scss & button in navbar to toggle theme --- fittrackee_client/src/components/NavBar.vue | 55 ++++++++++++++++----- fittrackee_client/src/locales/en/user.json | 1 + fittrackee_client/src/locales/fr/user.json | 1 + fittrackee_client/src/scss/base.scss | 1 + fittrackee_client/src/scss/colors-dark.scss | 2 +- 5 files changed, 48 insertions(+), 12 deletions(-) diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue index 5fbced34..23d31efd 100644 --- a/fittrackee_client/src/components/NavBar.vue +++ b/fittrackee_client/src/components/NavBar.vue @@ -60,12 +60,12 @@ {{ authUser.username }}