Merge commit 'b61dfb2de05e494b66ffd1f99da8f8594782764c' into fix-token-dropdowns

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
@@ -6,6 +7,7 @@ import injectedModule from "@web3-onboard/injected-wallets";
 import { Networks } from "./model/Networks";
 import { NetworkEnum } from "./model/NetworkEnum";
 
+const route = useRoute();
 const injected = injectedModule();
 
 const web3Onboard = init({
@@ -33,18 +35,25 @@ if (!connectedWallet) {
 </script>
 
 <template>
+  <div class="p-3 sm:p-4 md:p-8">
     <TopBar />
     <RouterView v-slot="{ Component }">
       <template v-if="Component">
+        <Transition name="page" mode="out-in" appear>
+          <div :key="route.fullPath">
             <Suspense>
-        <component :is="Component"></component>
+              <template #default>
+                <component :is="Component" />
+              </template>
               <template #fallback>
-          <appkit-button />
                 <div class="flex w-full h-full justify-center items-center">
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+                  <SpinnerComponent :width="'16'" :height="'16'" />
                 </div>
               </template>
             </Suspense>
+          </div>
+        </Transition>
       </template>
     </RouterView>
+  </div>
 </template>

src/assets/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="chevronDown" fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="currentColor"/>
+</svg>

src/assets/main.css

@@ -6,7 +6,6 @@
 #app {
   width: 100%;
   margin: 0 auto;
-  padding: 2rem;
   height: fit-content;
   min-height: 100vh;
   background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
@@ -25,3 +24,7 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
+
+.main-container {
+  @apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
+}

src/assets/transitions.css

@@ -0,0 +1,21 @@
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.3s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -86,7 +86,7 @@ onMounted(async () => {
         para a sua carteira!
       </span>
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -145,13 +145,6 @@ p {
 .text {
   @apply text-white text-center;
 }
-.blur-container-row {
-  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
-}
-
-.blur-container {
-  @apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
-}
 
 .last-release-info {
   @apply font-medium text-base text-gray-900;

src/components/CustomModal/CustomModal.vue

@@ -17,6 +17,7 @@ if (props.isRedirectModal) {
 </script>
 
 <template>
+  <div>
     <div
       class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
       v-if="!isRedirectModal"
@@ -64,6 +65,7 @@ if (props.isRedirectModal) {
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>

src/components/ListingComponent/ListingComponent.vue

@@ -162,10 +162,10 @@ showInitialItems();
 </script>
 
 <template>
-  <div class="blur-container" v-if="loadingWalletTransactions">
+  <div class="main-container !w-full !max-w-full" v-if="loadingWalletTransactions">
     <SpinnerComponent width="8" height="8"></SpinnerComponent>
   </div>
-  <div class="blur-container" v-if="!loadingWalletTransactions">
+  <div class="main-container !w-full !max-w-full" v-if="!loadingWalletTransactions">
     <div
       class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-if="props.validDeposits.length > 0"
@@ -389,10 +389,6 @@ p {
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
-}
-
 .grid-container {
   @apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
 }

src/components/LoadingComponent/LoadingComponent.vue

@@ -15,7 +15,7 @@ const props = defineProps({
         {{ props.title ? props.title : "Confirme em sua carteira" }}
       </span>
     </div>
-    <div class="blur-container sm:w-[26rem] w-[20rem]">
+    <div class="main-container !sm:w-[26rem] !w-[20rem]">
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
       >
@@ -60,10 +60,6 @@ const props = defineProps({
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }

src/components/QrCodeComponent.vue

@@ -97,7 +97,7 @@ onUnmounted(() => {
         autenticação para enviar a transação para a rede.
       </span>
     </div>
-    <div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
+    <div class="main-container sm:max-w-[28rem] max-w-[20rem] text-black">
       <div
         class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
       >

src/components/SearchComponent.vue

@@ -126,7 +126,7 @@ const enableOrDisableConfirmButton = (): void => {
     enableConfirmButton.value = true;
   else if (
     selectedRootstockDeposit.value &&
-    networkName.value == NetworkEnum.polygon
+    networkName.value != NetworkEnum.rootstock
   )
     enableConfirmButton.value = true;
   else enableConfirmButton.value = false;
@@ -155,7 +155,7 @@ watch(walletAddress, (): void => {
         tokens após realizar o Pix</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div class="backdrop-blur -z-10 w-full h-full"></div>
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -172,7 +172,7 @@ watch(walletAddress, (): void => {
             placeholder="0  "
             step=".01"
           />
-          <div class="relative">
+          <div class="relative overflow-visible">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -194,9 +194,10 @@ watch(walletAddress, (): void => {
                 alt="Chevron Down"
               />
             </button>
+            <transition name="dropdown">
               <div
                 v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 absolute"
+                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
               >
                 <div
                   class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
@@ -223,6 +224,7 @@ watch(walletAddress, (): void => {
                   </div>
                 </div>
               </div>
+            </transition>
           </div>
         </div>
         <div class="custom-divide py-2 mb-2"></div>
@@ -315,10 +317,6 @@ watch(walletAddress, (): void => {
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }

src/components/SellerSteps/SellerSearchComponent.vue

@@ -54,7 +54,7 @@ const handleInputEvent = (event: any): void => {
         tokens após realizar o Pix</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -153,10 +153,6 @@ const handleInputEvent = (event: any): void => {
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }

src/components/SellerSteps/SendNetwork.vue

@@ -26,7 +26,7 @@ const props = defineProps({
         os tokens de volta.</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container sm:w-1/3">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -75,10 +75,6 @@ p {
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
-}
-
 .last-deposit-info {
   @apply font-medium text-base;
 }

src/components/SellerSteps/WantSellComponent.vue

@@ -101,7 +101,7 @@ const handleSellClick = async (
         envio da transação e confirme sua oferta.</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div class="backdrop-blur -z-10 w-full h-full"></div>
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -111,15 +111,15 @@ const handleSellClick = async (
             type="number"
             v-model="offer"
             class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
-            v-bind:class="{
+            :class="{
-              'font-semibold': offer != undefined,
+              '!font-medium': offer !== undefined && offer !== '',
-              'text-xl': offer != undefined,
+              'text-xl': offer !== undefined && offer !== '',
             }"
             @input="debounce(handleInputEvent, 500)($event)"
             placeholder="Digite sua oferta"
             step=".01"
           />
-          <div class="relative">
+          <div class="relative overflow-visible">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -133,17 +133,19 @@ const handleSellClick = async (
               <span
                 class="text-gray-900 sm:text-lg text-md font-medium"
                 id="token"
-                >{{ selectedToken }}</span
               >
-              <ChevronDown
+                {{ selectedToken }}
-                class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
+              </span>
+              <img
+                class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
                 :class="{ 'scale-y-[-1]': selectTokenToggle }"
                 alt="Chevron Down"
               />
             </button>
+            <transition name="dropdown">
               <div
                 v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 absolute"
+                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
               >
                 <div
                   class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
@@ -166,11 +168,9 @@ const handleSellClick = async (
                       {{ token }}
                     </span>
                   </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
                 </div>
               </div>
+            </transition>
           </div>
         </div>
 
@@ -194,6 +194,10 @@ const handleSellClick = async (
             type="text"
             v-model="pixKey"
             class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
+            :class="{
+              '!font-medium': pixKey !== undefined && pixKey !== '',
+              'text-xl': pixKey !== undefined && pixKey !== '',
+            }"
             placeholder="Digite a chave Pix"
           />
         </div>
@@ -241,10 +245,6 @@ const handleSellClick = async (
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;

src/components/TopBar/TopBar.vue

@@ -113,14 +113,39 @@ onClickOutside(infoMenuRef, () => {
 
     <div class="flex sm:gap-4 gap-2 items-center">
       <div class="flex flex-col">
+        <button
+          ref="infoMenuRef"
+          class="default-button hidden md:inline-block cursor-pointer"
+          @click="
+            [
+              (infoMenuOpenToggle = !infoMenuOpenToggle),
+              (menuOpenToggle = false),
+              (currencyMenuOpenToggle = false),
+            ]
+          "
+        >
+          <h1
+            class="topbar-text topbar-link"
+            :style="{
+              'border-bottom': infoMenuOpenToggle
+                ? '2px solid white'
+                : '2px solid transparent',
+            }"
+          >
+            Menu
+          </h1>
+        </button>
+        <transition name="dropdown">
           <div
             v-show="infoMenuOpenToggle"
-          class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
+            class="mt-10 absolute w-full text-gray-900 lg-view"
           >
             <div class="mt-2">
-            <div class="bg-white rounded-md z-10 -left-32 w-52">
+              <div class="bg-white rounded-md z-10 -left-36 w-52">
                 <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
                     Documentação
                   </span>
                 </div>
@@ -143,73 +168,50 @@ onClickOutside(infoMenuRef, () => {
                 <div
                   class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
                 >
-                <div class="redirect_button">
+                  <div class="redirect_button flex mr-4">
-                  <a
+                    <div class="mr-6">
-                    href="https://www.twitter.com/doiim"
+                      <a href="https://www.twitter.com/doiim">
-                    target="_blank"
+                        <img
-                    rel="noreferrer"
-                  >
-                    <TwitterIcon
                           alt="Twitter"
                           width="20"
                           height="20"
+                          src="@/assets/twitterIcon.svg"
                           class="cursor-pointer"
                         />
                       </a>
-                  <a
+                    </div>
-                    href="https://www.linkedin.com/company/doiim/"
+                    <div class="mr-6">
-                    target="_blank"
+                      <a href="https://www.linkedin.com/company/doiim/">
-                    rel="noreferrer"
+                        <img
-                  >
-                    <LinkedinIcon
                           alt="LinkedIn"
                           width="20"
                           height="20"
+                          src="@/assets/linkedinIcon.svg"
                           class="cursor-pointer"
+                          href="https://www.linkedin.com/company/doiim/"
                         />
                       </a>
-                  <a
+                    </div>
-                    href="https://www.github.com/doiim"
+                    <div class="mr-6">
-                    target="_blank"
+                      <a href="https://www.github.com/doiim">
-                    rel="noreferrer"
+                        <img
-                  >
-                    <GithubIcon
                           alt="Github"
                           width="20"
                           height="20"
+                          src="@/assets/githubIcon.svg"
                           class="cursor-pointer"
                         />
                       </a>
                     </div>
                   </div>
+                </div>
                 <div class="w-full flex justify-center">
                   <hr class="w-4/5" />
                 </div>
               </div>
             </div>
           </div>
-        <div
+        </transition>
-          ref="infoMenuRef"
-          class="default-button hidden md:inline-block cursor-pointer"
-          @click="
-            [
-              (infoMenuOpenToggle = !infoMenuOpenToggle),
-              (menuOpenToggle = false),
-              (currencyMenuOpenToggle = false),
-            ]
-          "
-        >
-          <h1
-            class="text-gray-50 font-semibold sm:text-base"
-            :style="{
-              'border-bottom': infoMenuOpenToggle
-                ? '2px solid white'
-                : 'transparent',
-            }"
-          >
-            Menu
-          </h1>
-        </div>
       </div>
       <RouterLink
         :to="'/faq'"
@@ -220,21 +222,26 @@ onClickOutside(infoMenuRef, () => {
       </RouterLink>
       <RouterLink
         :to="sellerView ? '/' : '/seller'"
-        class="default-button sm:whitespace-normal whitespace-nowrap hidden md:inline-block"
+        class="default-button sm:whitespace-normal whitespace-nowrap lg-view w-40 sm:w-44 md:w-36"
       >
+        <div class="topbar-text topbar-link text-center mx-auto inline-block">
           {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        </div>
       </RouterLink>
       <RouterLink
         :to="sellerView ? '/' : '/seller'"
         v-if="!walletAddress"
-        class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden"
+        class="default-button sm:whitespace-normal whitespace-nowrap sm-view w-40 sm:w-44 md:w-36"
       >
+        <div class="topbar-text topbar-link text-center mx-auto inline-block">
           {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        </div>
       </RouterLink>
-      <div class="flex flex-col" v-if="walletAddress">
+      <div class="flex flex-col relative" v-if="walletAddress">
         <div
           ref="currencyRef"
-          class="group top-bar-info cursor-pointer h-10"
+          class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
+          :class="{ 'bg-gray-50': currencyMenuOpenToggle }"
           @click="
             [
               (currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -249,25 +256,36 @@ onClickOutside(infoMenuRef, () => {
             height="24"
             width="24"
           />
-          <span class="default-text hidden md:inline-block">
+          <span
+            class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
+            :class="{ '!text-gray-900': currencyMenuOpenToggle }"
+          >
             {{ Networks[etherStore.networkName].chainName }}
           </span>
-          <ChevronDown
+          <div
-            class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
+            class="transition-all duration-500 ease-in-out mt-1"
             :class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
-            alt="Chevron Down"
+          >
-          />
+            <svg
+              viewBox="0 0 16 16"
+              class="h-4 w-4 text-white group-hover:text-gray-900"
+              :class="{ '!text-gray-900': currencyMenuOpenToggle }"
+            >
+              <use href="@/assets/chevron.svg#chevronDown"></use>
+            </svg>
           </div>
+        </div>
+        <transition name="dropdown">
           <div
             v-show="currencyMenuOpenToggle"
-          class="mt-10 pl-3 absolute w-full text-gray-900 hidden md:inline-block"
+            class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
+          >
+            <div
+              class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
             >
-          <div class="mt-2">
-            <div class="bg-white rounded-md z-10">
               <div
                 v-for="(chainData, network) in Networks"
-                :key="network"
+                class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 @click="networkChange(network)"
               >
                 <img
@@ -275,8 +293,9 @@ onClickOutside(infoMenuRef, () => {
                   width="20"
                   height="20"
                   :src="getNetworkImage(NetworkEnum[network])"
+                  class="mr-2 ml-1"
                 />
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                <span class="text-gray-900 font-semibold text-sm">
                   {{ chainData.chainName }}
                 </span>
               </div>
@@ -285,7 +304,7 @@ onClickOutside(infoMenuRef, () => {
               </div>
             </div>
           </div>
-        </div>
+        </transition>
       </div>
       <button
         type="button"
@@ -304,10 +323,11 @@ onClickOutside(infoMenuRef, () => {
         Conectar
       </button>
       <div v-if="walletAddress" class="account-info">
-        <div class="flex flex-col">
+        <div class="flex flex-col relative">
           <div
             ref="walletAddressRef"
-            class="top-bar-info cursor-pointer h-10"
+            class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
+            :class="{ 'bg-gray-50': menuOpenToggle }"
             @click="
               [
                 (menuOpenToggle = !menuOpenToggle),
@@ -316,42 +336,53 @@ onClickOutside(infoMenuRef, () => {
               ]
             "
           >
-            <Account alt="Account image" />
+            <img alt="Account image" src="@/assets/account.svg" />
-            <span class="default-text">
+            <span
+              class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
+              :class="{ '!text-gray-900': menuOpenToggle }"
+            >
               {{ formatWalletAddress() }}
             </span>
-            <ChevronDown
+            <div
-              class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
+              class="transition-all duration-500 ease-in-out mt-1"
               :class="{ 'scale-y-[-1]': menuOpenToggle }"
-              alt="Chevron Down"
+            >
-            />
+              <svg
+                viewBox="0 0 16 16"
+                class="h-4 w-4 text-white group-hover:text-gray-900"
+                :class="{ '!text-gray-900': menuOpenToggle }"
+              >
+                <use href="@/assets/chevron.svg#chevronDown"></use>
+              </svg>
             </div>
+          </div>
+          <transition name="dropdown">
             <div
               v-show="menuOpenToggle"
-            class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
+              class="mt-10 absolute w-full text-gray-900 lg-view"
             >
               <div class="pl-4 mt-2">
-              <div class="bg-white rounded-md z-10">
+                <div
-                <RouterLink
+                  class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
-                  onclick="closeMenu()"
-                  to="/manage_bids"
-                  class="redirect_button menu-button"
                 >
+                  <div class="menu-button" @click="closeMenu()">
+                    <RouterLink to="/manage_bids" class="redirect_button">
                       Gerenciar Ofertas
                     </RouterLink>
+                  </div>
                   <div class="w-full flex justify-center">
                     <hr class="w-4/5" />
                   </div>
-                <button
+                  <div class="menu-button" @click="disconnectUser">
-                  onclick="disconnectUser()"
+                    <RouterLink to="/" class="redirect_button">
-                  class="redirect_button menu-button"
-                >
                       Desconectar
-                </button>
+                    </RouterLink>
                   </div>
                 </div>
               </div>
             </div>
+          </transition>
+        </div>
       </div>
     </div>
     <div
@@ -450,6 +481,13 @@ header {
   @apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
 }
 
+.topbar-text {
+  @apply text-gray-50 font-semibold sm:text-base mt-0.5 transition-all duration-500;
+}
+.topbar-link {
+  @apply mt-0.5 hover:border-b-2 border-b-2 border-transparent hover:!border-white;
+}
+
 .account-info {
   @apply flex items-center gap-6;
 }
@@ -459,7 +497,7 @@ header {
 }
 
 .top-bar-info {
-  @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
+  @apply flex justify-between items-center gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
 }
 
 .redirect_button {
@@ -474,9 +512,26 @@ a:hover {
   @apply bg-gray-200 rounded;
 }
 
+.lg-view {
+  display: inline-block;
+}
+.sm-view {
+  display: none;
+}
+
 .mobile-menu {
   margin-top: 1400px;
   bottom: 0px;
   height: auto;
 }
+
+@media screen and (max-width: 500px) {
+  .lg-view {
+    display: none;
+  }
+
+  .sm-view {
+    display: inline-block;
+  }
+}
 </style>

src/main.ts

@@ -4,6 +4,7 @@ import router from "./router";
 import { createPinia } from "pinia";
 
 import "./assets/main.css";
+import "./assets/transitions.css";
 
 const app = createApp(App);
 

src/views/FaqView.vue

@@ -134,11 +134,4 @@ h4 {
 .text {
   @apply text-white text-center;
 }
-.blur-container-row {
-  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
-}
-
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
-}
 </style>

src/views/HomeView.vue

@@ -120,6 +120,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <div>
     <SearchComponent
       v-if="flowStep == Step.Search"
       @token-buy="confirmBuyClick"
@@ -162,4 +163,5 @@ onMounted(async () => {
         :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
       />
     </div>
+  </div>
 </template>

src/views/ManageBidsView.vue

@@ -86,6 +86,7 @@ watch(networkName, async () => {
 </script>
 
 <template>
+  <div>
     <CustomAlert
       v-if="showAlert"
       :type="'withdraw'"
@@ -112,6 +113,7 @@ watch(networkName, async () => {
         />
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>

src/views/SellerView.vue

@@ -61,6 +61,7 @@ const sendNetwork = async () => {
 </script>
 
 <template>
+  <div>
     <div v-if="flowStep == Step.Sell">
       <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
       <LoadingComponent
@@ -86,4 +87,5 @@ const sendNetwork = async () => {
         :message="'A transação está sendo enviada para a rede.'"
       />
     </div>
+  </div>
 </template>