Merge pull request kodadot#10897 from hassnian/issue-10896

fix: Button hover on active button
hassnian · Aug 28, 2024 · 63bf7e9 · 63bf7e9
2 parents 3a359b2 + d48781b
commit 63bf7e9
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 27 deletions.
diff --git a/components/navbar/ConnectedProfile.vue b/components/navbar/ConnectedProfile.vue
@@ -39,6 +39,7 @@
 </template>
 
 <script lang="ts" setup>
+import type { Prefix } from '@kodadot1/static'
 import { NeoButton, NeoSkeleton } from '@kodadot1/brick'
 import { useChainId } from '@wagmi/vue'
 
@@ -56,5 +57,5 @@ const label = computed(() => profile.value ? profile.value?.name : shortAddress(
 const chainIcon = computed(() => getChainIcon(execByVm({
   SUB: () => 'ahp',
   EVM: () => CHAIN_ID_TO_PREFIX[chainId.value] ?? '',
-}, { vm: getWalletVM.value })))
+}, { vm: getWalletVM.value }) as Prefix))
 </script>
diff --git a/components/profile/FilterButton.vue b/components/profile/FilterButton.vue
@@ -2,8 +2,6 @@
   <NeoButton
     :variant="variant"
     :active="model"
-    no-shadow
-    rounded
     :label="label"
     @click="model = !model"
   />
@@ -29,19 +27,3 @@ const model = computed({
   },
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.active {
-  @include ktheme() {
-    border-color: theme('background-color-inverse') !important;
-  }
-  &:hover {
-    @include ktheme() {
-      background-color: theme('background-color-inverse') !important;
-      color: theme('text-color-inverse') !important;
-    }
-  }
-}
-</style>
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
@@ -99,7 +99,6 @@
                 variant="outlined-rounded"
                 data-testid="profile-wallet-links-button"
                 :active="active"
-                dropdown
                 :icon-right="active ? 'chevron-up' : 'chevron-down'"
               >
                 {{ $t('profile.walletAndLinks') }}
@@ -194,7 +193,6 @@
               <NeoButton
                 variant="outlined-rounded"
                 icon="arrow-up-from-bracket"
-                dropdown
                 :active="active"
               />
             </template>

diff --git a/libs/ui/src/components/NeoButton/NeoButton.scss b/libs/ui/src/components/NeoButton/NeoButton.scss
@@ -22,7 +22,7 @@
 
     &:not(.pressing):active,
     &:not(.pressing).active {
-      @apply bg-background-color-inverse text-text-color-inverse;
+      @apply bg-background-color-inverse text-text-color-inverse border-border-color;
     }
   }
 
@@ -46,7 +46,7 @@
         @apply border-border-color #{!important};
       }
 
-      &:not(.dropdown.active):hover {
+      &:not(.active):hover {
         @apply bg-background-color text-text-color;
       }
 
@@ -116,7 +116,7 @@
     &--outlined-rounded {
       @apply w-min py-2 px-4 rounded-[3rem] shadow-none border border-card-border-color-light bg-background-color;
 
-      &:not(.dropdown.active):hover {
+      &:not(.active):hover {
         @apply bg-background-color border border-text-color text-text-color;
       }
 
@@ -131,7 +131,7 @@
     &--primary-rounded {
       @apply h-[40px] w-min rounded-3xl shadow-none border border-border-color bg-k-primary text-black;
 
-      &:not(.dropdown.active):hover {
+      &:not(.active):hover {
         @apply bg-background-color border border-text-color text-text-color;
       }
 

diff --git a/libs/ui/src/components/NeoButton/NeoButton.vue b/libs/ui/src/components/NeoButton/NeoButton.vue
@@ -7,7 +7,6 @@
       'no-shadow': noShadow,
       'loading-with-label': loadingWithLabel,
       'shiny': shiny,
-      'dropdown': dropdown,
       'pressing': pressing,
     }"
     :size="size"
@@ -48,7 +47,6 @@ const props = withDefaults(
     iconPack?: string
     label?: string
     active?: boolean
-    dropdown?: boolean
     fixedWidth?: boolean
     noShadow?: boolean
     variant?: NeoButtonVariant