Merge pull request #1272 from threefoldtech/development_313_enhancements

Development 313 enhancements

packages/playground/src/App.vue

@@ -6,7 +6,6 @@
         :permanent="permanent"
         :model-value="hasActiveProfile && openSidebar"
         @update:model-value="openSidebar = $event"
-        theme="dark"
       >
         <div :style="{ paddingTop: '64px' }">
           <div
@@ -19,14 +18,16 @@
               <template v-for="route in routes" :key="route.title">
                 <v-list-group v-if="route.items.length > 1" :value="route.title">
                   <template v-slot:activator="{ props }">
-                    <v-list-item v-bind="props" :prepend-icon="route.icon" :title="route.title"></v-list-item>
+                    <v-list-item style="font-weight: 500" v-bind="props" :prepend-icon="route.icon">
+                      <v-list-item-title class="font-weight-bold">{{ route.title }}</v-list-item-title>
+                    </v-list-item>
                   </template>
                   <v-list-item
                     v-for="item in route.items"
                     :key="item.route"
                     :value="item.route"
                     @click="clickHandler(item)"
-                    color="secondary"
+                    :color="theme.name.value === AppThemeSelection.light ? 'info' : 'primary'"
                     :active="$route.path === item.route"
                   >
                     <template v-slot:prepend v-if="item.icon">
@@ -40,7 +41,7 @@
                       <v-icon v-else width="26">{{ item.icon }}</v-icon>
                     </template>
 
-                    <v-list-item-title>{{ item.title }}</v-list-item-title>
+                    <v-list-item-title class="font-weight-bold">{{ item.title }}</v-list-item-title>
                   </v-list-item>
                 </v-list-group>
                 <v-list-item
@@ -49,8 +50,8 @@
                   :key="item.route"
                   :value="item.route"
                   @click="clickHandler(item)"
-                  color="secondary"
                   :active="$route.path === item.route"
+                  :color="theme.name.value === AppThemeSelection.light ? 'info' : 'primary'"
                 >
                   <template v-slot:prepend v-if="item.icon">
                     <v-img
@@ -63,7 +64,7 @@
                     <v-icon v-else width="26">{{ item.icon }}</v-icon>
                   </template>
 
-                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                  <v-list-item-title class="font-weight-bold">{{ item.title }}</v-list-item-title>
                 </v-list-item>
               </template>
             </v-list>
@@ -80,14 +81,16 @@
       </v-navigation-drawer>
 
       <v-main :style="{ paddingTop: '70px' }">
-        <v-toolbar
-          color="rgb(49, 49, 49)"
-          class="position-fixed pr-2"
-          theme="dark"
-          :style="{ zIndex: 1005, top: 0, left: 0, right: 0 }"
-        >
+        <v-toolbar class="border position-fixed pr-2" :style="{ zIndex: 1005, top: 0, left: 0, right: 0 }">
           <v-toolbar-title class="custom-toolbar-title">
-            <v-img :src="baseUrl + 'images/logoTF.png'" width="160px" />
+            <v-img
+              :src="`${
+                theme.name.value === AppThemeSelection.light
+                  ? baseUrl + 'images/logoTF_dark.png'
+                  : baseUrl + 'images/logoTF_light.png'
+              }`"
+              width="160px"
+            />
           </v-toolbar-title>
 
           <v-spacer>
@@ -141,6 +144,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useTheme } from "vuetify";
 
 import { useProfileManager } from "./stores/profile_manager";
 
@@ -151,6 +155,8 @@ const network = process.env.NETWORK || (window as any).env.NETWORK;
 
 const openProfile = ref(true);
 const hasActiveProfile = computed(() => !!profileManager.profile);
+const theme = useTheme();
+
 watch(
   () => $route.meta,
   meta => (document.title = "TF Playground" + (meta && "title" in meta ? ` | ${meta.title}` : ``)),
@@ -215,7 +221,7 @@ const routes: AppRoute[] = [
   },
   {
     title: "Playground",
-    items: [{ title: "Solutions", icon: "vm.png", route: "/solutions" }],
+    items: [{ title: "Solutions", icon: "mdi-lightbulb-on-outline", route: "/solutions" }],
   },
   {
     title: "My Account",
@@ -319,6 +325,8 @@ $router.beforeEach((to, from, next) => {
 </script>
 
 <script lang="ts">
+import { AppThemeSelection } from "@/utils/app_theme";
+
 import AppInfo from "./components/app_info.vue";
 import AppTheme from "./components/app_theme.vue";
 import ConnectWalletLanding from "./components/connect_wallet_landing.vue";
@@ -404,10 +412,14 @@ export default {
 }
 
 .v-tooltip > .v-overlay__content {
-  opacity: 10;
-  color: white;
+  // background: var(--v-theme-surface);
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  border-width: thin !important;
+  border-style: solid !important;
+  z-index: 99;
+  background-color: rgb(var(--v-theme-background));
+  color: var(--v-theme-text);
   font-weight: 900;
-  background-color: rgb(71, 70, 70);
 }
 
 a {

packages/playground/src/plugins/vuetify.ts

@@ -31,7 +31,7 @@ const vuetify = createVuetify({
       light: {
         dark: false,
         colors: {
-          background: "#E5E5E5",
+          background: "#f6f6f6",
           primary: "#1AA18F",
           info: "#1AA18F",
           secondary: "#14A1B8",

packages/playground/src/portal/components/reserve_action_btn.vue

@@ -22,7 +22,7 @@
       :loading="loadingReserveNode"
       :disabled="disableButton"
       v-if="node.rentedByTwinId === 0"
-      style="background: #1aa18f"
+      color="primary"
       @click="reserveNode"
     >
       Reserve

packages/playground/src/utils/app_theme.ts

@@ -0,0 +1,4 @@
+export enum AppThemeSelection {
+  dark = "dark",
+  light = "light",
+}

packages/playground/src/weblets/profile_manager.vue

@@ -18,17 +18,22 @@
           </p>
           <template v-else-if="balance">
             <p>
-              Balance: <strong :style="{ color: '#76e2c8' }">{{ normalizeBalance(balance.free, true) }} TFT</strong>
+              Balance:
+              <strong :class="theme.name.value === AppThemeSelection.light ? 'text-primary' : 'text-info'">
+                {{ normalizeBalance(balance.free, true) }} TFT
+              </strong>
             </p>
             <p>
               Locked:
-              <strong :style="{ color: '#76e2c8' }">{{ normalizeBalance(balance.locked, true) || 0 }} TFT</strong>
+              <strong :class="theme.name.value === AppThemeSelection.light ? 'text-primary' : 'text-info'">
+                {{ normalizeBalance(balance.locked, true) || 0 }} TFT
+              </strong>
               <v-tooltip text="Locked balance documentation" location="bottom right">
                 <template #activator="{ props }">
                   <v-btn
                     @click.stop
                     v-bind="props"
-                    color="white"
+                    :color="theme.name.value === AppThemeSelection.light ? 'black' : 'white'"
                     icon="mdi-information-outline"
                     height="24px"
                     width="24px"
@@ -366,8 +371,11 @@ import Cryptr from "cryptr";
 import md5 from "md5";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 import { nextTick } from "vue";
+import { useTheme } from "vuetify";
 import { generateKeyPair } from "web-ssh-keygen";
 
+import { AppThemeSelection } from "@/utils/app_theme";
+
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useInputRef } from "../hooks/input_validator";
 import { useProfileManager } from "../stores";
@@ -388,6 +396,8 @@ interface Credentials {
   mnemonicHash?: string;
 }
 
+const theme = useTheme();
+
 const props = defineProps({
   modelValue: {
     required: false,