Merge commit 'b61dfb2de05e494b66ffd1f99da8f8594782764c' into fix-token-dropdowns

2024-11-07 12:06:28 -03:00 · 2024-11-07 12:06:28 -03:00 · 9ddc843c01
commit 9ddc843c01
parent 659db5ef04 b61dfb2de0
19 changed files with 439 additions and 371 deletions
--- a/src/App.vue
+++ b/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>
--- a/src/assets/chevron.svg
+++ b/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>
--- a/src/assets/main.css
+++ b/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;
+}
--- a/src/assets/transitions.css
+++ b/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);
+}
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/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;
--- a/src/components/CustomModal/CustomModal.vue
+++ b/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>
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/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;
 }
--- a/src/components/LoadingComponent/LoadingComponent.vue
+++ b/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;
 }
--- a/src/components/QrCodeComponent.vue
+++ b/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"
      >
--- a/src/components/SearchComponent.vue
+++ b/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;
 }
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/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;
 }
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/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;
 }
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/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="{
-              'font-semibold': offer != undefined,
-              'text-xl': offer != undefined,
+            :class="{
+              '!font-medium': offer !== undefined && offer !== '',
+              '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
-                class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
+                {{ selectedToken }}
+              </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;
--- a/src/components/TopBar/TopBar.vue
+++ b/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">
-                  <a
-                    href="https://www.twitter.com/doiim"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <TwitterIcon
+                  <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>
-                  <a
-                    href="https://www.linkedin.com/company/doiim/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <LinkedinIcon
+                    </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>
-                  <a
-                    href="https://www.github.com/doiim"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <GithubIcon
+                    </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>
+                </div>
                <div class="w-full flex justify-center">
                  <hr class="w-4/5" />
                </div>
              </div>
            </div>
          </div>
-        <div
-          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>
+        </transition>
      </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
-            class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
+          <div
+            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 gap-2 px-4 rounded-md cursor-pointer"
+                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"
                @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" />
-            <span class="default-text">
+            <img alt="Account image" src="@/assets/account.svg" />
+            <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
-              class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
+            <div
+              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">
-                <RouterLink
-                  onclick="closeMenu()"
-                  to="/manage_bids"
-                  class="redirect_button menu-button"
+                <div
+                  class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                >
+                  <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
-                  onclick="disconnectUser()"
-                  class="redirect_button menu-button"
-                >
+                  <div class="menu-button" @click="disconnectUser">
+                    <RouterLink to="/" class="redirect_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>
--- a/src/main.ts
+++ b/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);

--- a/src/views/FaqView.vue
+++ b/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>
--- a/src/views/HomeView.vue
+++ b/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>
--- a/src/views/ManageBidsView.vue
+++ b/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>
--- a/src/views/SellerView.vue
+++ b/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>