Merge remote-tracking branch 'upstream/master'

integritee-network · Oct 30, 2024 · 9b97d41 · 9b97d41
2 parents 9b2d904 + aaa64f7
commit 9b97d41
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 48 deletions.
diff --git 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
@@ -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,23 +29,22 @@
       @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>
 
     <!-- USDC Box -->
     <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>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -9,26 +9,13 @@
         <div class="flex items-center gap-4">
           <!-- gap-4 steuert den Abstand zwischen den Elementen -->
           <!-- Network health text and health indicator -->
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 ml-1 mr-1">
             <!-- gap-2 für den Abstand zwischen Network Health und Indikator -->
             <HealthIndicator />
           </div>
 
           <!-- SVG icon -->
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
-            />
-          </svg>
+          <div v-if="accountStore.getAddress !== 'none'"></div>
 
           <!-- Address and Connect Wallet button -->
           <div
@@ -43,11 +30,25 @@
                 Connect Wallet
               </button>
             </div>
-            <div v-else>
-              <span class="hidden md:inline">{{
+            <div v-else class="flex">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
+                />
+              </svg>
+              <span class="hidden md:inline ml-1 mt-0.5">{{
                 accountStore.getAddress
               }}</span>
-              <span class="inline md:hidden">{{
+              <span class="inline md:hidden ml-1 mt-0.5">{{
                 accountStore.getShortAddress
               }}</span>
             </div>

diff --git a/pages/gtn.vue b/pages/gtn.vue
@@ -42,7 +42,7 @@
         </p>
         <!-- Countdown Timer -->
         <div
-          class="flex flex-wrap justify-between border-gray-700 pt-2 sm:grid sm:grid-cols-4"
+          class="flex flex-wrap justify-between border-gray-700 pt-2 sm:grid sm:grid-cols-4 lg:mb-20"
         >
           <div class="flex flex-col items-center">
             <dt class="text-sm font-semibold leading-6 text-gray-400">Days</dt>

diff --git a/pages/index.vue b/pages/index.vue
@@ -59,7 +59,7 @@
             class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
           >
             <div
-              class="flex flex-col items-center text-center"
+              class="flex flex-col items-center text-center cursor-pointer"
               @click="openShieldOverlay"
             >
               <svg
@@ -79,7 +79,7 @@
               <p class="text-xs">Shield</p>
             </div>
             <div
-              class="flex flex-col items-center text-center"
+              class="flex flex-col items-center text-center cursor-pointer"
               @click="openFaucetOverlay"
               v-if="faucetUrl"
             >
@@ -100,7 +100,7 @@
               <p class="text-xs">Faucet</p>
             </div>
             <div
-              class="flex flex-col items-center text-center"
+              class="flex flex-col items-center text-center cursor-pointer"
               @click="openObtainTokenOverlay"
               v-else
             >
@@ -126,8 +126,9 @@
       <div v-else>
         <!-- Private Balance Content -->
         <div class="text-white mb-6 text-center">
-          <h3 class="text-sm mb-3" @click="openPrivacyInfo">
-            Private Balance ⓘ
+          <h3 class="text-sm mb-3">
+            Private Balance
+            <span @click="openPrivacyInfo" class="cursor-pointer">ⓘ</span>
           </h3>
           <div v-if="isFetchingIncogniteeBalance" class="spinner"></div>
           <div v-if="disableGetter">
@@ -149,7 +150,7 @@
             class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
           >
             <div
-              class="flex flex-col items-center text-center"
+              class="flex flex-col items-center text-center cursor-pointer"
               @click="openPrivateSendOverlay"
             >
               <svg
@@ -170,7 +171,7 @@
             </div>
 
             <div
-              class="flex flex-col items-center text-center"
+              class="flex flex-col items-center text-center cursor-pointer"
               @click="openReceiveOverlay"
             >
               <svg
@@ -191,7 +192,7 @@
             </div>
 
             <div
-              class="flex flex-col items-center text-center"
+              class="flex flex-col items-center text-center cursor-pointer"
               @click="openUnshieldOverlay"
             >
               <svg
@@ -770,15 +771,16 @@
             class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-3"
           >
             <dl class="flex flex-wrap">
+              <!-- round info -->
               <div class="w-full flex justify-between px-6 pt-3">
                 <div class="flex-auto text-left mb-4 md:mb-0">
                   <dt
                     class="text-sm text-left font-semibold leading-6 text-gray-300"
                   >
-                    Winnings
+                    Prize
                   </dt>
                   <dd
-                    class="mt-1 text-left text-base font-semibold leading-6 text-white"
+                    class="mt-1 text-left text-base font-semibold leading-6 text-white mr-1"
                   >
                     {{
                       formatDecimalBalance(
@@ -801,7 +803,9 @@
                   </dd>
                 </div>
               </div>
+              <!-- last round lucky number -->
               <div
+                v-if="guessTheNumberInfo?.maybe_last_lucky_number.isSome"
                 class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
               >
                 <div class="flex-auto text-left mb-4 md:mb-0">
@@ -831,11 +835,11 @@
                   </dd>
                 </div>
               </div>
-
+              <!-- last round winners -->
               <div
+                v-if="guessTheNumberInfo?.maybe_last_lucky_number.isSome"
                 class="mt-3 flex flex-col w-full flex-none gap-y-4 border-t border-gray-700 px-6 pt-3"
               >
-                <!-- Last weeks lucky number -->
                 <div class="text-sm font-semibold leading-6 text-gray-300">
                   Last lucky winners
                 </div>
@@ -886,14 +890,6 @@
               style="border-color: #24ad7c"
               placeholder="guess"
             />
-
-            <!-- Fee description below input, right-aligned -->
-            <div class="text-left right-0">
-              <span class="text-xs text-gray-400"
-                >Fee: {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }}
-                {{ accountStore.getSymbol }} for Incognitee</span
-              >
-            </div>
           </div>
 
           <!-- Submit Button -->
@@ -907,6 +903,13 @@
             </button>
           </div>
         </div>
+        <!-- Fee description below input, right-aligned -->
+        <div class="text-left right-0 mb-0">
+          <span class="text-xs text-gray-400"
+            >Fee: {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }}
+            {{ accountStore.getSymbol }} for Incognitee</span
+          >
+        </div>
       </form>
     </div>
     <div v-else>