From d7963791193bca72c1b00cbbc35d7ba0576feac7 Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Fri, 11 Oct 2024 11:56:12 -0300
Subject: [PATCH] Fix tokenSelector styles

---
 src/components/SearchComponent.vue             | 18 +++++++++---------
 .../SellerSteps/WantSellComponent.vue          |  9 +++++++--
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index fee3063..5cc6885 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -163,7 +163,7 @@ watch(walletAddress, (): void => {
         <div class="flex justify-between sm:w-full items-center">
           <input
             type="number"
-            class="border-none outline-none text-lg text-gray-900 w-3/4"
+            class="border-none outline-none text-lg text-gray-900"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,
@@ -174,23 +174,23 @@ watch(walletAddress, (): void => {
           />
           <div class="relative">
             <button
-              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
               ref="tokenDropdownRef"
+              class="flex flex-row items-center p-2 bg-gray-300 rounded-3xl min-w-fit gap-2"
               @click="openTokenSelection()"
             >
-              <img
-                class="text-gray-900"
-                alt="Chevron Down"
-                src="@/assets/chevronDownBlack.svg"
-              />
               <img
                 alt="Token image"
                 class="sm:w-fit w-4"
                 :src="getTokenImage(selectedToken)"
               />
-              <span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
+              <span class="text-gray-900 sm:text-lg text-md font-medium" id="token">{{
                 selectedToken
-              }}</span>
+              }}</span>              
+              <img
+                class="text-gray-900"
+                alt="Chevron Down"
+                src="@/assets/chevronDownBlack.svg"
+              />
             </button>
             <div
               v-if="selectTokenToggle"
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index f6f28f9..29980a2 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -117,7 +117,7 @@ const handleButtonClick = async (
           <div class="relative">
             <button
               ref="tokenDropdownRef"
-              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+              class="flex flex-row items-center p-2 bg-gray-300 rounded-3xl min-w-fit gap-2"
               @click="openTokenSelection()"
             >
               <img
@@ -125,9 +125,14 @@ const handleButtonClick = async (
                 class="sm:w-fit w-4"
                 :src="getTokenImage(selectedToken)"
               />
-              <span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
+              <span class="text-gray-900 sm:text-lg text-md font-medium" id="token">{{
                 selectedToken
               }}</span>
+              <img
+                class="text-gray-900 pr-4 sm:pr-0"
+                alt="Chevron Down"
+                src="@/assets/chevronDownBlack.svg"
+              />
             </button>
             <div
               v-if="selectTokenToggle"