fix: buttons ux improvements

matter-labs · Jun 3, 2023 · 1765cc2 · 1765cc2
1 parent d9c8dea
commit 1765cc2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/components/common/AmountInput.vue b/components/common/AmountInput.vue
@@ -10,7 +10,7 @@
       <div class="amount-input-token">
         <CommonContentLoader v-if="loading" :length="10" />
         <template v-else-if="selectedToken">
-          <div class="flex items-center">
+          <div class="flex items-center" @click="selectTokenModalOpened = true">
             <TokenImage class="-ml-0.5 h-5 w-5" v-bind="selectedToken" />
             <span class="ml-1 inline-block">{{ selectedToken.symbol }}</span>
           </div>
@@ -43,8 +43,9 @@
       </div>
       <div class="amount-input-select-asset">
         <CommonContentLoader v-if="loading" :length="35" />
-        <div
+        <button
           v-else
+          type="button"
           class="grid grid-cols-[1fr_calc(1rem_+_0.375rem)] items-center"
           @click.prevent="selectTokenModalOpened = true"
         >
@@ -58,7 +59,7 @@
           </template>
           <template v-else>Select token</template>
           <ChevronDownIcon class="ml-1.5 h-4 w-4" aria-hidden="true" />
-        </div>
+        </button>
       </div>
       <transition v-bind="TransitionOpacity()">
         <div v-if="amountError" class="amount-input-error">

diff --git a/components/common/BackButton.vue b/components/common/BackButton.vue
@@ -19,7 +19,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .back-button-container {
-  @apply block pt-5 text-black transition-colors hover:text-gray-600 md:pt-8;
+  @apply mt-5 block text-black transition-colors hover:text-gray-600 md:mt-8;
 
   .arrow-icon {
     @apply h-6 w-6;

diff --git a/components/transaction/FeeDetails.vue b/components/transaction/FeeDetails.vue
@@ -6,9 +6,11 @@
         <template v-if="loading">
           <CommonContentLoader :length="30" />
         </template>
-        <span
+        <component
+          type="button"
+          :is="canDisplayFeeAsFiat ? 'button' : 'span'"
           v-else-if="feeToken && feeAmount"
-          :title="canDisplayFeeAsFiat ? 'Click to toggle how fee is displayed' : ''"
+          v-tooltip="canDisplayFeeAsFiat ? 'Click to toggle how amount is displayed' : ''"
           class="flex items-center"
           :class="{ 'cursor-pointer': canDisplayFeeAsFiat }"
           @click="displayFeeAsFiat = !displayFeeAsFiat"
@@ -37,7 +39,7 @@
           </transition>
           <TokenImage class="ml-1 mr-0.5 h-5 w-5" v-bind="feeToken" />
           <span class="font-medium">{{ feeToken.symbol }}</span>
-        </span>
+        </component>
         <template v-else>Unknown fee</template>
         <CommonCircleLoader
           v-if="updateDuration"