From aaa64f79c13a6ec86f22115cd898afe5d6696541 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Wed, 30 Oct 2024 09:54:04 +0100
Subject: [PATCH] declutter network selector

---
 assets/scss/main.scss             |  1 +
 components/ui/NetworkSelector.vue | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 50f254c..c71275c 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -411,6 +411,7 @@ a {
   --integritee-blue: #1845b9;
   --integritee-green: #24ad7c;
   --integritee-red: #ff4d4d;
+  --integritee-gray: #696868;
 }
 
 .incognitee-bg {
diff --git a/components/ui/NetworkSelector.vue b/components/ui/NetworkSelector.vue
index a5562f7..38c21eb 100644
--- a/components/ui/NetworkSelector.vue
+++ b/components/ui/NetworkSelector.vue
@@ -12,13 +12,10 @@
       @mouseover="teerHover = true"
       @mouseleave="teerHover = false"
       @click="handleTeerClick"
+      title="Integritee Network"
     >
       <TEER class="w-[30px] h-[30px]" />
       <p class="text-xs">TEER</p>
-      <span
-        class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
-        >soon</span
-      >
       <div class="ribbon red"><span>beta</span></div>
     </div>
 
@@ -32,9 +29,10 @@
       @mouseover="pasHover = true"
       @mouseleave="pasHover = false"
       @click="handlePasClick"
+      title="Paseo Testnet"
     >
       <Paseo class="w-[30px] h-[30px]" />
-      <p class="text-xs">PAS<br />PASEO</p>
+      <p class="text-xs">PAS</p>
       <div class="ribbon blue"><span>test</span></div>
     </div>
 
@@ -42,13 +40,11 @@
     <div
       class="currency-box gap-2 p-3 basis-1/3 relative"
       @click="openAssetsInfo"
+      title="USDC on Asset Hub"
     >
       <USDC class="w-[30px] h-[30px]" />
       <p class="text-xs">USDC</p>
-      <span
-        class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
-        >soon</span
-      >
+      <div class="ribbon gray"><span>soon</span></div>
     </div>
   </div>
 </template>
@@ -146,4 +142,8 @@ const handlePasClick = () => {
 .ribbon.blue span {
   background-color: var(--integritee-blue);
 }
+
+.ribbon.gray span {
+  background-color: var(--integritee-gray);
+}
 </style>