fix: Connect wallet and active styles for account (#263)

* #246: Add button component for connect wallet

* #247: Add background on hover and active for account name

packages/vue/src/components/SpAcc/SpAcc.vue

@@ -3,6 +3,7 @@
     <div
       v-if="wallet"
       class="sp-nav-link selected account-dropdown-button"
+      :class="[state.accountDropdown ? 'active' : '']"
       style="display: flex; align-items: center"
       @click="state.accountDropdown = !state.accountDropdown"
     >
@@ -12,33 +13,32 @@
           {{ getAccName() }}
         </span>
       </div>
-      <SpChevronDownIcon />
     </div>
-    <div
+    <SpButton
       v-else
-      class="sp-nav-link"
-      style="display: flex; align-items: center"
+      aria-label="Connect wallet"
+      type="primary"
       @click="state.connectWalletModal = true"
     >
       Connect wallet
-    </div>
+    </SpButton>
     <SpAccDropdown
       v-if="state.accountDropdown"
       :wallet="wallet"
-      :accName="getAccName()"
+      :acc-name="getAccName()"
       @disconnect="disconnect"
       @close="state.accountDropdown = false"
     />
     <SpModal
       :visible="state.connectWalletModal"
-      :closeIcon="false"
-      :cancelButton="false"
-      :submitButton="false"
+      :close-icon="false"
+      :cancel-button="false"
+      :submit-button="false"
+      style="text-align: center"
       @close="state.connectWalletModal = false"
       @submit="state.connectWalletModal = false"
-      style="text-align: center"
     >
-      <template v-slot:header>
+      <template #header>
         <div v-if="state.modalPage === 'connect'">
           <SpKeplrIcon />
           <h3 v-if="isKeplrAvailable">Connect your wallet</h3>
@@ -53,7 +53,7 @@
           <h3>Keplr cannot launch</h3>
         </div>
       </template>
-      <template v-slot:body>
+      <template #body>
         <div style="max-width: 320px; text-align: center; margin: auto">
           <div v-if="state.modalPage === 'connect'">
             <p v-if="isKeplrAvailable">
@@ -72,8 +72,8 @@
             <SpButton
               aria-label="Cancel"
               type="secondary"
-              @click="state.modalPage = 'connect'"
               style="margin-top: 3rem"
+              @click="state.modalPage = 'connect'"
             >
               Cancel
             </SpButton>
@@ -89,7 +89,7 @@
           </div>
         </div>
       </template>
-      <template v-if="isKeplrAvailable" v-slot:footer>
+      <template v-if="isKeplrAvailable" #footer>
         <div v-if="state.modalPage === 'connect'">
           <SpButton
             aria-label="Connect Keplr"
@@ -124,27 +124,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, onMounted } from 'vue'
+import { computed, defineComponent, onMounted,reactive } from 'vue'
 import { useStore } from 'vuex'
 
-import SpModal from '../SpModal'
-import SpButton from '../SpButton'
+import useKeplr from '../../composables/useKeplr'
+import { Wallet } from '../../utils/interfaces'
 import SpAccDropdown from '../SpAccDropdown'
-import SpSpinner from '../SpSpinner'
-import SpProfileIcon from '../SpProfileIcon'
+import SpButton from '../SpButton'
+import SpChevronDownIcon from '../SpChevronDown'
+import SpExternalArrowIcon from '../SpExternalArrow'
 import SpKeplrIcon from '../SpKeplrIcon'
+import SpModal from '../SpModal'
+import SpProfileIcon from '../SpProfileIcon'
+import SpSpinner from '../SpSpinner'
 import SpWarningIcon from '../SpWarningIcon'
-import SpExternalArrowIcon from '../SpExternalArrow'
-import SpChevronDownIcon from '../SpChevronDown'
-
-import useKeplr from '../../composables/useKeplr'
-import { Wallet } from '../../utils/interfaces'
 
 export interface State {
   modalPage: string
   connectWalletModal: boolean
   accountDropdown: boolean
-  keplrParams: { name: String; bech32Address: String }
+  keplrParams: { name: string; bech32Address: string }
 }
 
 export let initialState: State = {
@@ -255,6 +254,32 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.account-dropdown-button {
+  position: relative;
+
+  > * {
+    position: relative;
+    z-index: 24;
+  }
+
+  &:after {
+    content: '';
+    display: none;
+    background: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    width: calc(100% + 5px);
+    height: 56px;
+    position: absolute;
+    z-index: 23;
+    left: -7px;
+  }
+
+  &:hover, &.active {
+    &:after {
+      display: block;
+    }
+  }
+}
 .navbar-wrapper {
   display: flex;
   justify-content: space-between;