Merge pull request #807 from telosnetwork/801-enable-dark-mode-on-wal…

…let-using-colors-from-teloscan #801 | dark mode
telosnetwork · May 8, 2024 · 2fbe266 · 2fbe266
2 parents 2226e3e + 1e6ef1e
commit 2fbe266
Show file tree

Hide file tree

Showing 15 changed files with 315 additions and 41 deletions.
diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
@@ -90,7 +90,7 @@ function setTooltipVisibility(enable: boolean) {
         height: 14px;
 
         path {
-            fill: var(--accent-color);
+            fill: var(--q-accent);
         }
 
         &--warning {
@@ -122,6 +122,6 @@ function setTooltipVisibility(enable: boolean) {
 .q-tooltip {
     // equivalent to --site-gradient (with some alpha), defined here because the quasar tooltip component
     // moves the tooltip element to be a sibling of <body>, where our CSS vars are defined
-    background: linear-gradient(0.4turn, rgba(#071033, 0.85), rgba(#6039A4, 0.85));
+    background: var(--toolbar-background-color);
 }
 </style>
diff --git a/src/components/evm/AppNav.vue b/src/components/evm/AppNav.vue
@@ -88,6 +88,16 @@ export default defineComponent({
             }
         },
     },
+    beforeMount() {
+        const storedDarkMode = localStorage.getItem('darkModeEnabled');
+        if (storedDarkMode !== null) {
+            this.$q.dark.set(storedDarkMode === 'true');
+        } else {
+            // Use system preferences if there is no preference saved
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            this.$q.dark.set(prefersDark);
+        }
+    },
     methods: {
         openMenu() {
             this.menuIsOpen = true;
@@ -109,6 +119,7 @@ export default defineComponent({
             this.menuIsOpen = false;
 
             if (accountStore.loggedAccount) {
+                this.$q.dark.set(false);
                 accountStore.logout();
             } else {
                 this.showWalletOptions = true;
@@ -155,6 +166,10 @@ export default defineComponent({
             const network = this.loggedAccount.network;
             window.open(chainStore.getBridgeUrl(network), '_blank');
         },
+        toggleDarkMode() {
+            this.$q.dark.toggle();
+            localStorage.setItem('darkModeEnabled', this.$q.dark.isActive.toString());
+        },
     },
 });
 </script>
@@ -180,7 +195,6 @@ export default defineComponent({
             round
             dense
             icon="menu"
-            color="black"
             aria-haspopup="menu"
             :aria-label="$t('nav.open_menu')"
             :tabindex="menuIsOpen ? '-1' : '0'"
@@ -204,6 +218,16 @@ export default defineComponent({
             v-if="showUserInfo"
             :account="loggedAccount"
         />
+
+        <q-btn
+            v-if="showUserInfo"
+            class="c-app-nav__theme-toggle"
+            flat
+            dense
+            :icon="$q.dark.isActive ? 'light_mode' : 'dark_mode'"
+            @click="toggleDarkMode"
+        />
+
     </div>
 
     <div
@@ -475,6 +499,10 @@ export default defineComponent({
         }
     }
 
+    &__theme-toggle {
+        color: var(--text-default-contrast);
+    }
+
     &__menu-container {
         position: fixed;
         top: 0;
@@ -504,9 +532,10 @@ export default defineComponent({
         left: 0;
         display: flex;
         justify-content: space-between;
-        color: var(--header-text-color);
         padding: 16px 24px;
-        background-color: var(--accent-color-5);
+        color: var(--text-color);
+        background: var(--header-background-color);
+        // border-bottom: 1px solid var(--border-color);
         z-index: $z-index--header-toolbar;
 
         @include md-and-up {
@@ -559,7 +588,7 @@ export default defineComponent({
     &__apy-box {
         @include text--small;
         background-color: rgba(255, 255, 255, 0.1);
-        color: var(--bg-color);
+        color: $white;
         padding: 4px 8px;
         border-radius: 4px;
         display: inline-block;

diff --git a/src/components/evm/AppPage.vue b/src/components/evm/AppPage.vue
@@ -43,6 +43,12 @@ export default defineComponent({
 <template>
 <q-page class="c-app-page">
     <div class="c-app-page__header">
+
+        <div class="c-app-page__header-background-top">
+            <div class="c-app-page__header-background-circle c-app-page__header-background-circle--1"></div>
+            <div class="c-app-page__header-background-circle c-app-page__header-background-circle--2"></div>
+        </div>
+
         <div class="c-app-page__header-content">
             <slot name="header"></slot>
         </div>
@@ -99,19 +105,107 @@ export default defineComponent({
     flex-direction: column;
 
     &__tab-panels {
+        background: var(--bg-color);
+        color: var(--text-high-contrast);
         margin-top: 24px;
         flex-grow: 1;
     }
 
     &__header {
-        color: var(--header-text-color);
-        background: var(--accent-color-5);
+        color: var(--text-color);
+        background: var(--header-background-color);
 
         padding-top: 24px;
         position: relative;
+
+        &-background-top {
+            display: var(--display-telos-branding-bg);
+            z-index: 0;
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-position: center center;
+            background-size: 100% auto;
+            background-repeat: no-repeat;
+        }
+
+        &-background-top {
+            overflow: hidden;
+            background-image:
+            radial-gradient(circle at 0% 170%, var(--q-secondary), transparent 45%),
+                radial-gradient(circle at 100% 130%, var(--q-secondary), transparent 30%),
+                radial-gradient(circle at 100% 0%, var(--q-primary), transparent 30%),
+                radial-gradient(circle at 50% 20%, var(--q-accent), transparent 70%);
+
+            @media screen and (min-width: $breakpoint-sm-min) {
+                background-image:
+                radial-gradient(circle at 0% 170%, var(--q-secondary), transparent 45%),
+                radial-gradient(circle at 100% 130%, var(--q-secondary), transparent 30%),
+                radial-gradient(circle at 100% 0%, var(--q-primary), transparent 30%),
+                radial-gradient(circle at 50% 20%, var(--q-accent), transparent 70%)
+            }
+
+            @media screen and (min-width: $breakpoint-md-min) {
+                background-image:
+                radial-gradient(circle at 0% 170%, var(--q-secondary), transparent 45%),
+                radial-gradient(circle at 100% 130%, var(--q-secondary), transparent 30%),
+                radial-gradient(circle at 100% 0%, var(--q-primary), transparent 30%),
+                radial-gradient(circle at 50% 20%, var(--q-accent), transparent 70%)
+            }
+
+            @media screen and (min-width: $breakpoint-lg-min) {
+                background-image:
+                    radial-gradient(circle at 0% 170%, var(--q-secondary), transparent 40%),
+                    radial-gradient(circle at 100% 140%, var(--q-secondary), transparent 20%),
+                    radial-gradient(circle at 100% 0%, var(--q-primary), transparent 20%),
+                    radial-gradient(circle at 50% 20%, var(--q-accent), transparent 90%)
+            }
+        }
+
+        &-background-circle {
+            position: absolute;
+            content: "";
+            border-radius: 100%;
+            border: 32px solid var(--faint-circle-color);
+
+            &--1 {
+                top: -11vh;
+                right: -26vh;
+                width: 45vh;
+                height: 45vh;
+
+                @media screen and (min-width: $breakpoint-lg-min) {
+                    top: -12vh;
+                    right: -16vh;
+                    width: 45vh;
+                    height: 45vh;
+                }
+
+            }
+
+            &--2 {
+                display: none;
+
+                @media screen and (min-width: $breakpoint-lg-min) {
+                    display: block;
+                    top: -75%;
+                    right: 0;
+                    left: 0;
+                    width: 45vh;
+                    height: 45vh;
+                    margin: 0 auto;
+                }
+            }
+        }
+
     }
 
     &__header-content {
+        z-index: 1;
+        position: relative;
         display: flex;
         justify-content: center;
         padding: 0 24px 24px;
@@ -122,6 +216,8 @@ export default defineComponent({
     }
 
     &__tabs {
+        z-index: 1;
+        position: relative;
         flex-grow: 1;
         color: var(--header-text-color);
 

diff --git a/src/components/evm/CollapsibleAside.vue b/src/components/evm/CollapsibleAside.vue
@@ -69,7 +69,7 @@ function handleExpansionItemUpdate() {
 
     &__expansion-item {
         border-radius: 4px;
-        border: 2px solid var(--accent-color-5);
+        border: 2px solid var(--border-color);
         margin-bottom: 8px;
         height: fit-content;
 

diff --git a/src/components/evm/ScrollableInfoCards.vue b/src/components/evm/ScrollableInfoCards.vue
@@ -90,7 +90,7 @@ const props = defineProps<{
 
 
     &__card {
-        background-color: var(--bg-color);
+        background-color: var(--card-background-color);
         padding: 12px;
         border-radius: 4px;
         border: 2px solid var(--header-item-outline-color);

diff --git a/src/css/components/_inputs.scss b/src/css/components/_inputs.scss
@@ -75,5 +75,6 @@
         outline: none;
         background: none;
         width: 98%;
+        color: var(--text-color);
     }
 }
diff --git a/src/css/components/_notification.scss b/src/css/components/_notification.scss
@@ -1,4 +1,6 @@
 .c-notify {
+    --bg-color: #FFF;
+    --text-color: #000;
     width: 100%;
     max-width: 400px;
     margin: 1rem;