From 617388d8e1fa109ab7d836f50e3c5d5b53f13f17 Mon Sep 17 00:00:00 2001
From: Filipe Soccol <filipe.soccol@gmail.com>
Date: Thu, 7 Nov 2024 13:15:08 -0300
Subject: [PATCH] Small tweaks on styles.

---
 .../SellerSteps/WantSellComponent.vue         |  4 +-
 src/components/TopBar/TopBar.vue              | 70 +++++++++----------
 2 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 34c2656..bd9d699 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -12,6 +12,8 @@ import { getTokenImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
 import { useOnboard } from "@web3-onboard/vue";
 
+import ChevronDown from "@/assets/chevron.svg";
+
 // html references
 const tokenDropdownRef = ref<any>(null);
 
@@ -136,7 +138,7 @@ const handleSellClick = async (
               >
                 {{ selectedToken }}
               </span>
-              <img
+              <ChevronDown
                 class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
                 :class="{ 'scale-y-[-1]': selectTokenToggle }"
                 alt="Chevron Down"
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 26f2328..599e021 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -166,43 +166,37 @@ onClickOutside(infoMenuRef, () => {
                   <hr class="w-4/5" />
                 </div>
                 <div
-                  class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
+                  class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md"
                 >
-                  <div class="redirect_button flex mr-4">
-                    <div class="mr-6">
-                      <a href="https://www.twitter.com/doiim">
-                        <img
-                          alt="Twitter"
-                          width="20"
-                          height="20"
-                          src="@/assets/twitterIcon.svg"
-                          class="cursor-pointer"
-                        />
-                      </a>
-                    </div>
-                    <div class="mr-6">
-                      <a href="https://www.linkedin.com/company/doiim/">
-                        <img
-                          alt="LinkedIn"
-                          width="20"
-                          height="20"
-                          src="@/assets/linkedinIcon.svg"
-                          class="cursor-pointer"
-                          href="https://www.linkedin.com/company/doiim/"
-                        />
-                      </a>
-                    </div>
-                    <div class="mr-6">
-                      <a href="https://www.github.com/doiim">
-                        <img
-                          alt="Github"
-                          width="20"
-                          height="20"
-                          src="@/assets/githubIcon.svg"
-                          class="cursor-pointer"
-                        />
-                      </a>
-                    </div>
+                  <div class="redirect_button flex justify-around">
+                    <a href="https://www.twitter.com/doiim">
+                      <img
+                        alt="Twitter"
+                        width="20"
+                        height="20"
+                        src="@/assets/twitterIcon.svg?url"
+                        class="cursor-pointer"
+                      />
+                    </a>
+                    <a href="https://www.linkedin.com/company/doiim/">
+                      <img
+                        alt="LinkedIn"
+                        width="20"
+                        height="20"
+                        src="@/assets/linkedinIcon.svg?url"
+                        class="cursor-pointer"
+                        href="https://www.linkedin.com/company/doiim/"
+                      />
+                    </a>
+                    <a href="https://www.github.com/doiim">
+                      <img
+                        alt="Github"
+                        width="20"
+                        height="20"
+                        src="@/assets/githubIcon.svg?url"
+                        class="cursor-pointer"
+                      />
+                    </a>
                   </div>
                 </div>
                 <div class="w-full flex justify-center">
@@ -257,7 +251,7 @@ onClickOutside(infoMenuRef, () => {
             width="24"
           />
           <span
-            class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
+            class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out whitespace-nowrap"
             :class="{ '!text-gray-900': currencyMenuOpenToggle }"
           >
             {{ Networks[etherStore.networkName].chainName }}
@@ -336,7 +330,7 @@ onClickOutside(infoMenuRef, () => {
               ]
             "
           >
-            <img alt="Account image" src="@/assets/account.svg" />
+            <img alt="Account image" src="@/assets/account.svg?url" />
             <span
               class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
               :class="{ '!text-gray-900': menuOpenToggle }"