style: account + connect wallet component UX improvements

ignite-hq · Jun 9, 2022 · b20116e · b20116e
1 parent 50767d3
commit b20116e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/src/components/wallet/IgniteAccount.vue b/src/components/wallet/IgniteAccount.vue
@@ -38,6 +38,7 @@ const { spn, signIn, signOut } = useSpn()
 
 // variables
 const initialState = {
+  showConnectWallet: false,
   modalPage: ModalPage.Connecting,
   isConnectWalletModalOpen: false
 }
@@ -91,6 +92,7 @@ async function tryToConnectToKeplr() {
 
   const onKeplrError = (): void => {
     state.modalPage = ModalPage.Error
+    state.showConnectWallet = true
   }
 
   try {
@@ -109,6 +111,7 @@ async function tryToConnectToKeplr() {
     })
   } catch (e) {
     state.modalPage = ModalPage.Error
+    state.showConnectWallet = true
   }
 }
 
@@ -131,17 +134,19 @@ watchEffect(() => {
 </script>
 
 <template>
-  <IgniteAccountMenu v-if="address" />
-
-  <IgniteButton
-    v-else
-    variant="primary"
-    color="primary"
-    class="!px-5 !py-[10px] !text-2"
-    @click="onOpenModal"
-  >
-    Connect Wallet
-  </IgniteButton>
+  <div class="min-h-[42px]">
+    <IgniteAccountMenu v-if="address" />
+
+    <IgniteButton
+      v-else-if="state.showConnectWallet"
+      variant="primary"
+      color="primary"
+      class="!px-5 !py-[10px] !text-2"
+      @click="onOpenModal"
+    >
+      Connect Wallet
+    </IgniteButton>
+  </div>
 
   <IgniteModal
     size="sm"

diff --git a/src/components/wallet/IgniteAccountMenu.vue b/src/components/wallet/IgniteAccountMenu.vue
@@ -48,12 +48,12 @@ const mainCoinBalance = computed(() => {
     <MenuButton class="flex items-center space-x-4">
       <IgniteProfileIcon :address="address" />
 
-      <div class="text-left">
+      <div class="min-w-[100px] text-left">
         <IgniteHeading class="text-3 font-semibold">
           {{ account?.name }}
         </IgniteHeading>
 
-        <IgniteLoader v-if="isFetchingBalances" class="mt-2 h-5" />
+        <IgniteLoader v-if="isFetchingBalances" class="mt-1 h-5" />
         <IgniteText v-else-if="mainCoinBalance" class="text-2 text-muted">
           <IgniteNumber :number="mainCoinBalance.amount?.toUpperCase()" />
           {{ mainCoinBalance.denom?.toUpperCase() }}