Small tweaks on styles.

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"

src/components/TopBar/TopBar.vue

@@ -166,45 +166,39 @@ 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="redirect_button flex justify-around">
-                    <div class="mr-6">
                     <a href="https://www.twitter.com/doiim">
                       <img
                         alt="Twitter"
                         width="20"
                         height="20"
-                          src="@/assets/twitterIcon.svg"
+                        src="@/assets/twitterIcon.svg?url"
                         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"
+                        src="@/assets/linkedinIcon.svg?url"
                         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"
+                        src="@/assets/githubIcon.svg?url"
                         class="cursor-pointer"
                       />
                     </a>
                   </div>
                 </div>
-                </div>
                 <div class="w-full flex justify-center">
                   <hr class="w-4/5" />
                 </div>
@@ -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 }"