Fix account balance styling

anyone-protocol · Jul 12, 2024 · 06248a8 · 06248a8
1 parent 4d9c287
commit 06248a8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/components/DashboardHeader.vue b/components/DashboardHeader.vue
@@ -5,6 +5,7 @@ import ButtonConnect from './ui-kit/ButtonConnect.vue';
 import ButtonMobileMenu from './ui-kit/ButtonMobileMenu.vue';
 import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
 import TitleAndLogo from './ui-kit/TitleAndLogo.vue';
+import ReportIssueButton from '@/components/ui-kit/ReportIssueButton.vue';
 
 const menuStore = useMenuStore();
 </script>

diff --git a/components/UserBalance.vue b/components/UserBalance.vue
@@ -38,16 +38,14 @@ defineProps<{
 
 <template>
   <ClientOnly>
-    <div>
+    <div class="inline-flex items-baseline gap-2">
       <span class="text-4xl font-bold" v-if="isConnected">
         {{ parseFloat(tokenBalance.formatted).toFixed(2) }}
-        <Ticker v-if="showTicker" />
       </span>
-
       <span class="text-4xl font-bold" v-if="!isConnected">
         --
-        <Ticker v-if="showTicker" />
       </span>
+      <Ticker v-if="showTicker" />
       <slot></slot>
     </div>
     <p v-if="balanceUsdError" class="ml-1 mt-1 text-sm">

diff --git a/pages/index.vue b/pages/index.vue
@@ -9,31 +9,30 @@
             class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0"
           >
             <p class="mb-4 text-sm">
-              The connected wallet shows the following balance:
+              Current balance for the connected wallet:
             </p>
             <ReportIssueButton />
           </div>
 
           <div class="flex gap-5 lg:gap-32 flex-col lg:flex-row">
-            <div class="border-l-4 border-cyan-600 pl-3">
+            <div class="border-l-4 border-cyan-600 pl-3 my-4">
               <UserBalance
                 class="bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-6xl font-bold text-transparent drop-shadow-lg dark:from-gray-200 dark:to-gray-500"
-              >
-                <p class="ml-1 mt-2 text-sm"><Ticker /> Account balance</p>
-              </UserBalance>
+                showTicker="true"
+              />
             </div>
-            <div class="flex flex-col border-l-4 border-cyan-600 pl-3">
-              <h3>
-                <Icon name="material-symbols:lock" />
-                Locked
-              </h3>
+            <div class="flex flex-col border-l-4 border-cyan-600 pl-3 my-4">
               <div class="inline-flex items-baseline gap-2">
                 <span v-if="isConnected" class="text-4xl font-bold">
                   {{ formatEther(registratorStore.totalLockedTokens || '0') }}
                 </span>
                 <span v-if="!isConnected" class="text-4xl font-bold"> -- </span>
                 <Ticker />
               </div>
+              <h3>
+                <Icon name="material-symbols:lock" />
+                Locked
+              </h3>
             </div>
           </div>
         </Card>