Branding update: logo, favicon, gradient, staking icon

quasar.conf.js

@@ -52,7 +52,8 @@ module.exports = function(/* ctx */) {
 
         // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
         build: {
-            vueRouterMode: 'history', // available values: 'hash', 'history'
+            vueRouterMode: 'hash', // 'hash' for GitHub Pages compatibility
+            publicPath: process.env.GH_PAGES ? '/telos-wallet-OG/' : '/',
             env,
             chainWebpack (chain) {
                 chain

src/components/evm/AppNav.vue

@@ -30,10 +30,11 @@ export default defineComponent({
         },
         prettyPrintApy() {
             const apy = chainStore.currentEvmChain?.apy;
-            if (apy) {
+            if (apy && apy !== '') {
                 return apy + '%';
             } else {
-                return '';
+                // Fallback APY if API doesn't return a value
+                return '~5%';
             }
         },
         showMenuIcon() {
@@ -56,8 +57,8 @@ export default defineComponent({
             return '0';
         },
         isProduction() {
-            // only enable demo route for staging & development
-            return window.location.origin.includes('telos.net');
+            // Hide demos in production - only show on localhost
+            return !window.location.origin.includes('localhost');
         },
         accountActionText() {
             if (this.loggedAccount) {
@@ -93,9 +94,8 @@ export default defineComponent({
         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);
+            // Default to dark mode
+            this.$q.dark.set(true);
         }
     },
     methods: {
@@ -239,7 +239,7 @@ export default defineComponent({
         <div class="flex justify-between">
             <img
                 ref="logo-image"
-                src="branding/telos-wallet-light.png"
+                src="branding/telos-wallet-light.svg"
                 :alt="$t('home.wallet_logo_alt')"
                 tabindex="0"
                 role="link"
@@ -266,7 +266,10 @@ export default defineComponent({
 
         <ul class="c-app-nav__menu-items">
             <li
-                class="c-app-nav__menu-item"
+                :class="{
+                    'c-app-nav__menu-item': true,
+                    'c-app-nav__menu-item--active': $route.name === 'evm-wallet',
+                }"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
                 @click="goTo('evm-wallet')"
@@ -286,15 +289,18 @@ export default defineComponent({
             </li>
 
             <li
-                class="c-app-nav__menu-item"
+                :class="{
+                    'c-app-nav__menu-item': true,
+                    'c-app-nav__menu-item--active': $route.name === 'evm-staking',
+                }"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
                 @click="goTo('evm-staking')"
                 @keypress.space.enter="goTo('evm-staking')"
             >
 
                 <img
-                    src="/branding/stlos.png"
+                    src="branding/stlos-active.svg"
                     :class="{
                         'c-app-nav__icon': true,
                         'c-app-nav__icon--acorn': true,
@@ -316,7 +322,10 @@ export default defineComponent({
             </li>
 
             <li
-                class="c-app-nav__menu-item"
+                :class="{
+                    'c-app-nav__menu-item': true,
+                    'c-app-nav__menu-item--active': $route.name === 'evm-nft-inventory',
+                }"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
                 @click="goTo('evm-nft-inventory')"
@@ -336,7 +345,10 @@ export default defineComponent({
             </li>
 
             <li
-                class="c-app-nav__menu-item"
+                :class="{
+                    'c-app-nav__menu-item': true,
+                    'c-app-nav__menu-item--active': $route.name === 'evm-wrap',
+                }"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
                 @click="goTo('evm-wrap')"
@@ -356,7 +368,10 @@ export default defineComponent({
             </li>
 
             <li
-                class="c-app-nav__menu-item"
+                :class="{
+                    'c-app-nav__menu-item': true,
+                    'c-app-nav__menu-item--active': $route.name === 'evm-allowances',
+                }"
                 role="menuitem"
                 :tabindex="menuItemTabIndex"
                 @click="goTo('evm-allowances')"
@@ -550,6 +565,11 @@ export default defineComponent({
         margin-left: 48px;
         margin-right: 48px;
         cursor: pointer;
+
+        // Make logo white on gradient sidebar (light mode)
+        body.body--light & {
+            filter: brightness(0) invert(1);
+        }
     }
 
     &__menu-items {
@@ -562,6 +582,11 @@ export default defineComponent({
 
         cursor: pointer;
         display: flex;
+
+        // Active state - white text for visibility on gradient sidebar
+        &--active {
+            color: var(--sidebar-active-color);
+        }
         align-items: center;
         gap: 16px;
         margin-bottom: 32px;
@@ -600,9 +625,9 @@ export default defineComponent({
     }
 
     &__icon {
-        // svg color overrides
+        // svg color overrides - use sidebar-active-color for visibility on gradient bg
         &--current-route:not(#{$this}__icon--acorn) path {
-            fill: var(--link-color);
+            fill: var(--sidebar-active-color);
         }
 
         &--current-route#{$this}__icon--acorn {

src/components/evm/AppPage.vue

@@ -134,34 +134,31 @@ export default defineComponent({
 
         &-background-top {
             overflow: hidden;
+            // Brand gradient: Cyan -> Blue -> Purple (subtle opacity for dark mode)
             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%);
+                radial-gradient(circle at 100% 0%, rgba(#00F2FE, 0.15), transparent 40%),
+                radial-gradient(circle at 0% 100%, rgba(#4FACFE, 0.1), transparent 50%),
+                radial-gradient(circle at 50% 50%, rgba(#C471F5, 0.08), transparent 60%);
 
             @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%)
+                    radial-gradient(circle at 100% 0%, rgba(#00F2FE, 0.2), transparent 35%),
+                    radial-gradient(circle at 0% 100%, rgba(#4FACFE, 0.12), transparent 45%),
+                    radial-gradient(circle at 50% 50%, rgba(#C471F5, 0.08), transparent 55%);
             }
 
             @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%)
+                    radial-gradient(circle at 100% 0%, rgba(#00F2FE, 0.2), transparent 30%),
+                    radial-gradient(circle at 0% 100%, rgba(#4FACFE, 0.15), transparent 40%),
+                    radial-gradient(circle at 50% 50%, rgba(#C471F5, 0.1), transparent 50%);
             }
 
             @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%)
+                    radial-gradient(circle at 100% 0%, rgba(#00F2FE, 0.25), transparent 25%),
+                    radial-gradient(circle at 0% 100%, rgba(#4FACFE, 0.15), transparent 35%),
+                    radial-gradient(circle at 50% 50%, rgba(#C471F5, 0.1), transparent 45%);
             }
         }
 

src/components/native/NavBar.vue

@@ -128,7 +128,7 @@ export default {
 <template>
 <div>
     <nav class="leftNavBar">
-        <img src="/branding/telos-wallet-light.png" class="telosLogo" >
+        <img src="/branding/telos-wallet-light.svg" class="telosLogo" >
         <ul>
             <li>
                 <a @click="switchTab('coins')"> <img :src="srcWallet" >{{$t('navbar.wallet')}} </a>
@@ -222,7 +222,7 @@ a img {
 .bottomNavBar {
   position: fixed;
   z-index: 1;
-  background: linear-gradient(to top, #3a246b, #00000042 100%);
+  background: linear-gradient(to top, #1B1B1D, #00000042 100%);
   left: 0;
   bottom: 0;
   height: 65px;
@@ -255,7 +255,7 @@ a img {
   .leftNavBar {
     transform: translateX(0);
     border-radius: unset;
-    background: linear-gradient(to bottom, #291a4c, #00000000 80%);
+    background: #1B1B1D;  // Solid Telos Off-Black
     top: 0;
     height: 100vh;
     width: 250px;