Updating branding/styles

src/components/evm/AppNav.vue

@@ -511,7 +511,7 @@ export default defineComponent({
         width: 100vw;
         transform: translateX(-100%);
         transition: 0.2s transform ease;
-        background: var(--site-gradient);
+        background: var(--menu-gradient);
         z-index: $z-index--menu;
 
         &--open {

src/css/global/_colors.scss

@@ -27,7 +27,7 @@ body.body--light {
     $accent-3: #DDD1FF;
     $accent-4: #A5A6F6;
     $accent-5: #F7F5FF;
-    $site-gradient: linear-gradient(0.4turn, #071033, #6039A4);
+    $site-gradient: linear-gradient(0.4turn, rgba(0, 242, 254, 0.4), rgba(196, 113, 245, 0.5));
     $tooltip-gradient: linear-gradient(0.2turn, rgba(#071033, 0.8), rgba(#6039A4, 0.8));
     $high-contrast-text-color: #282828;
     $default-contrast-text-color: #4D4D4D;
@@ -58,9 +58,10 @@ body.body--light {
 
     --bg-color: #{$canvas};
     --site-gradient: #{$site-gradient};
+    --menu-gradient: linear-gradient(0.4turn, #0891b2, #8b5cf6);
 
     --card-background-color: #{$canvas};
-    --header-background-color: #{$accent-5};
+    --header-background-color: #{$site-gradient};
     --display-telos-branding-bg: none;
 
     --q-primary: #{$primary} !important;
@@ -112,7 +113,7 @@ body.body--dark {
     $menu-text: #fff;
     $canvas: #111;
 
-    $site-gradient: linear-gradient(0.7turn, #1d1d1d, #1e2931);
+    $site-gradient: linear-gradient(0.7turn, #0a0a0b, #1a1625);
     $tooltip-gradient: linear-gradient(0.2turn, rgba(#232a30, 0.8), rgba(#173246, 0.8));
 
 
@@ -137,6 +138,7 @@ body.body--dark {
 
     --bg-color: #{$canvas};
     --site-gradient: #{$site-gradient};
+    --menu-gradient: #{$site-gradient};
 
     --card-background-color: #{$dark};
     --header-background-color: var(--card-background-color);

src/css/quasar.variables.sass

@@ -12,9 +12,9 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary     : #571aff
-$secondary   : #dfdfed
-$accent      : #505DCD
+$primary     : #0891b2
+$secondary   : #3b82f6
+$accent      : #8b5cf6
 
 $positive    : #255B00
 $negative    : #880000
@@ -23,9 +23,9 @@ $warning     : #AD6500
 
 $dark        : #1d1d1d
 
-$d-primary   : #348DCC
-$d-secondary : #8B3F98
-$d-accent    : #73C58F
+$d-primary   : #00F2FE
+$d-secondary : #4FACFE
+$d-accent    : #C471F5
 
 $d-positive  : #398f00
 $d-negative  : #CC0000

src/pages/home/HomePage.vue

@@ -170,7 +170,7 @@ watch(selectedNetwork, () => {
 <style lang="scss">
 .c-home {
     position: relative;
-    background: var(--site-gradient);
+    background: var(--menu-gradient);
     width: 100%;
     padding-top: 64px;