From 426d0b750f92e63b43e89efac9f563bef4e76053 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Wed, 15 Feb 2023 12:53:17 -0300
Subject: [PATCH 1/3] Add icons to redirect to social media on topbar mobile

---
 src/assets/discordIcon.svg       |  3 +++
 src/assets/githubIcon.svg        |  3 +++
 src/assets/twitterIcon.svg       |  3 +++
 src/components/TopBar/TopBar.vue | 28 +++++++++++++++++++++++++++-
 4 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/discordIcon.svg
 create mode 100644 src/assets/githubIcon.svg
 create mode 100644 src/assets/twitterIcon.svg

diff --git a/src/assets/discordIcon.svg b/src/assets/discordIcon.svg
new file mode 100644
index 0000000..9ee2888
--- /dev/null
+++ b/src/assets/discordIcon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5501 1.03713C12.513 0.549805 11.4071 0.199929 10.2451 0C10.1014 0.256159 9.93891 0.599787 9.8202 0.874689C8.58939 0.687256 7.37107 0.687256 6.16525 0.874689C6.05279 0.599787 5.87785 0.256159 5.7404 0C4.58456 0.199929 3.47246 0.556053 2.43533 1.03713C0.348566 4.19226 -0.213734 7.27242 0.0674159 10.3088C1.45442 11.346 2.7977 11.9707 4.11598 12.3831C4.44086 11.9333 4.73451 11.4584 4.98442 10.9586C4.50959 10.7774 4.0535 10.5525 3.6224 10.2963C3.73486 10.2089 3.84732 10.1214 3.95978 10.0339C6.5901 11.2648 9.45158 11.2648 12.0507 10.0339C12.1631 10.1277 12.2693 10.2151 12.388 10.2963C11.9569 10.5588 11.4946 10.7837 11.0198 10.9649C11.2697 11.4647 11.5571 11.9458 11.8882 12.3894C13.2065 11.977 14.5498 11.3522 15.9368 10.3151C16.2554 6.79134 15.3557 3.74242 13.5501 1.03713ZM5.34054 8.44075C4.55332 8.44075 3.90355 7.70351 3.90355 6.80383C3.90355 5.90415 4.53458 5.16692 5.34054 5.16692C6.14651 5.16692 6.79003 5.90415 6.77753 6.80383C6.77753 7.70351 6.14026 8.44075 5.34054 8.44075ZM10.6512 8.44075C9.86394 8.44075 9.21417 7.70351 9.21417 6.80383C9.21417 5.90415 9.84519 5.16692 10.6512 5.16692C11.4571 5.16692 12.1006 5.90415 12.0881 6.80383C12.0881 7.70351 11.4571 8.44075 10.6512 8.44075Z" fill="#1F2937"/>
+</svg>
diff --git a/src/assets/githubIcon.svg b/src/assets/githubIcon.svg
new file mode 100644
index 0000000..8425052
--- /dev/null
+++ b/src/assets/githubIcon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00016 0.333496C3.31816 0.333496 0.333496 3.32283 0.333496 7.0115C0.333496 9.9615 2.2435 12.4648 4.89283 13.3475C5.22616 13.4088 5.3475 13.2028 5.3475 13.0255C5.3475 12.8675 5.34216 12.4468 5.33883 11.8902C3.48416 12.2935 3.09283 10.9948 3.09283 10.9948C2.79016 10.2228 2.35283 10.0175 2.35283 10.0175C1.7475 9.60416 2.39883 9.61216 2.39883 9.61216C3.0675 9.65883 3.4195 10.3002 3.4195 10.3002C4.01416 11.3202 4.98016 11.0255 5.3595 10.8548C5.42083 10.4235 5.59283 10.1295 5.7835 9.96283C4.3035 9.79416 2.74683 9.22083 2.74683 6.66216C2.74683 5.9335 3.00683 5.33683 3.43283 4.87016C3.36416 4.7015 3.1355 4.02216 3.49816 3.1035C3.49816 3.1035 4.05816 2.9235 5.3315 3.7875C5.87534 3.63917 6.43645 3.56362 7.00016 3.56283C7.56683 3.5655 8.13683 3.6395 8.6695 3.7875C9.94216 2.9235 10.5008 3.10283 10.5008 3.10283C10.8648 4.02216 10.6355 4.7015 10.5675 4.87016C10.9942 5.33683 11.2528 5.9335 11.2528 6.66216C11.2528 9.2275 9.6935 9.79216 8.20883 9.9575C8.44816 10.1635 8.66083 10.5708 8.66083 11.1942C8.66083 12.0862 8.65283 12.8068 8.65283 13.0255C8.65283 13.2042 8.77283 13.4122 9.1115 13.3468C10.439 12.9016 11.5931 12.0504 12.4105 10.9135C13.2279 9.77669 13.6674 8.41171 13.6668 7.0115C13.6668 3.32283 10.6815 0.333496 7.00016 0.333496Z" fill="#1F2937"/>
+</svg>
diff --git a/src/assets/twitterIcon.svg b/src/assets/twitterIcon.svg
new file mode 100644
index 0000000..228b5a9
--- /dev/null
+++ b/src/assets/twitterIcon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.52683 11.5021C9.55816 11.5021 12.3102 7.33344 12.3102 3.71877C12.3102 3.6001 12.3102 3.4821 12.3022 3.36544C12.8376 2.97779 13.2997 2.49784 13.6668 1.9481C13.1675 2.16944 12.6379 2.31461 12.0955 2.37877C12.6666 2.03681 13.094 1.499 13.2982 0.865436C12.7613 1.18403 12.174 1.40859 11.5615 1.52944C11.1491 1.09061 10.6035 0.799992 10.0092 0.702573C9.41498 0.605153 8.80517 0.706369 8.27424 0.990549C7.74331 1.27473 7.32088 1.72602 7.07236 2.27454C6.82383 2.82307 6.76307 3.43823 6.8995 4.02477C5.81189 3.97026 4.7479 3.68765 3.77659 3.19528C2.80529 2.70291 1.94838 2.01179 1.2615 1.16677C0.911708 1.7689 0.804555 2.48172 0.961853 3.16008C1.11915 3.83844 1.52907 4.43135 2.10816 4.8181C1.673 4.80551 1.24725 4.68844 0.866829 4.47677V4.51144C0.867089 5.14297 1.08576 5.75497 1.48576 6.24367C1.88576 6.73238 2.44247 7.06769 3.0615 7.19277C2.6587 7.30258 2.23609 7.31854 1.82616 7.23944C2.00094 7.78309 2.34128 8.2585 2.79958 8.59918C3.25788 8.93986 3.81121 9.12875 4.38216 9.13944C3.81491 9.58515 3.16535 9.91466 2.47065 10.1091C1.77594 10.3036 1.04971 10.3592 0.333496 10.2728C1.58457 11.0757 3.04029 11.5015 4.52683 11.4994" fill="#1F2937"/>
+</svg>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 8bf15c7..c3f20d0 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -333,9 +333,35 @@ onClickOutside(currencyRef, () => {
               Desconectar
             </RouterLink>
           </div>
-          <div class="w-full flex justify-center pb-20">
+          <div class="w-full flex justify-center">
             <hr class="w-4/5" />
           </div>
+          <div class="menu-button pb-10">
+            <div class="redirect_button flex">
+              <img
+                alt="Twitter"
+                width="20"
+                height="20"
+                src="@/assets/twitterIcon.svg"
+                class="mr-6"
+                onclick="location.href = 'https://www.twitter.com/doiim';"
+              />
+              <img
+                alt="Discord"
+                width="20"
+                height="20"
+                src="@/assets/discordIcon.svg"
+                class="mr-6"
+              />
+              <img
+                alt="Github"
+                width="20"
+                height="20"
+                src="@/assets/githubIcon.svg"
+                onclick="location.href = 'https://github.com/doiim';"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>

From 814b72e7b81bdf3d12d3a49c6951b90ba884e9d5 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Thu, 16 Feb 2023 11:29:24 -0300
Subject: [PATCH 2/3] Fix desktop view

---
 src/components/TopBar/TopBar.vue | 94 +++++++++++++++++++++++++++++++-
 1 file changed, 93 insertions(+), 1 deletion(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index c3f20d0..15ef7b9 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -16,8 +16,10 @@ const { walletAddress, sellerView } = storeToRefs(etherStore);
 const menuOpenToggle = ref<boolean>(false);
 const menuHoverToggle = ref<boolean>(false);
 
+const infoMenuOpenToggle = ref<boolean>(false);
 const currencyMenuOpenToggle = ref<boolean>(false);
 const currencyMenuHoverToggle = ref<boolean>(false);
+const infoMenuRef = ref<any>(null);
 const walletAddressRef = ref<any>(null);
 const currencyRef = ref<any>(null);
 
@@ -71,6 +73,10 @@ onClickOutside(currencyRef, () => {
   currencyMenuOpenToggle.value = false;
   currencyMenuHoverToggle.value = false;
 });
+
+onClickOutside(infoMenuRef, () => {
+  infoMenuOpenToggle.value = false;
+});
 </script>
 
 <template>
@@ -93,7 +99,91 @@ onClickOutside(currencyRef, () => {
     </RouterLink>
 
     <div class="flex sm:gap-4 gap-2 items-center">
-      <RouterLink :to="'/faq'" class="default-button lg-view"> FAQ </RouterLink>
+      <div class="flex flex-col">
+        <div
+          v-show="infoMenuOpenToggle"
+          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="menu-button gap-2 px-4 rounded-md cursor-pointer"
+              >
+                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                  Documentação
+                </span>
+              </div>
+              <div class="w-full flex justify-center">
+                <hr class="w-4/5" />
+              </div>
+              <RouterLink
+                :to="'/faq'"
+                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+              >
+                <span class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap">
+                  Perguntas frequentes
+                </span>
+              </RouterLink>
+              <div class="w-full flex justify-center">
+                <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 cursor-pointer float-right"
+              >
+                <div class="redirect_button flex mr-4">
+                  <img
+                    alt="Twitter"
+                    width="20"
+                    height="20"
+                    src="@/assets/twitterIcon.svg"
+                    class="mr-6"
+                    onclick="location.href = 'https://www.twitter.com/doiim';"
+                  />
+                  <img
+                    alt="Discord"
+                    width="20"
+                    height="20"
+                    src="@/assets/discordIcon.svg"
+                    class="mr-6"
+                  />
+                  <img
+                    alt="Github"
+                    width="20"
+                    height="20"
+                    src="@/assets/githubIcon.svg"
+                    onclick="location.href = 'https://github.com/doiim';"
+                  />
+                </div>
+              </div>
+              <div class="w-full flex justify-center">
+                <hr class="w-4/5" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+            ref="infoMenuRef"
+            class="default-button lg-view 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'"
         v-if="!walletAddress"
@@ -122,6 +212,7 @@ onClickOutside(currencyRef, () => {
             [
               (currencyMenuOpenToggle = !currencyMenuOpenToggle),
               (menuOpenToggle = false),
+              (infoMenuOpenToggle = false),
             ]
           "
           @mouseover="currencyMenuHoverToggle = true"
@@ -236,6 +327,7 @@ onClickOutside(currencyRef, () => {
               [
                 (menuOpenToggle = !menuOpenToggle),
                 (currencyMenuOpenToggle = false),
+                (infoMenuOpenToggle = false),
               ]
             "
             @mouseover="menuHoverToggle = true"

From 02a6176951ef64a81e4386d40d78db582956ec4b Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 17 Feb 2023 18:15:27 -0300
Subject: [PATCH 3/3] Apply fixes

---
 src/components/TopBar/TopBar.vue | 59 +++++++++++++++++---------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 15ef7b9..7897ce6 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -106,9 +106,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10 -left-32 w-52">
-              <div
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-              >
+              <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">
                   Documentação
                 </span>
@@ -128,29 +126,34 @@ 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 cursor-pointer float-right"
+                class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
               >
                 <div class="redirect_button flex mr-4">
-                  <img
-                    alt="Twitter"
-                    width="20"
-                    height="20"
-                    src="@/assets/twitterIcon.svg"
-                    class="mr-6"
-                    onclick="location.href = 'https://www.twitter.com/doiim';"
-                  />
-                  <img
-                    alt="Discord"
-                    width="20"
-                    height="20"
-                    src="@/assets/discordIcon.svg"
-                    class="mr-6"
-                  />
+                  <div class="mr-6">
+                    <img
+                      alt="Twitter"
+                      width="20"
+                      height="20"
+                      src="@/assets/twitterIcon.svg"
+                      class="cursor-pointer"
+                      onclick="location.href = 'https://www.twitter.com/doiim';"
+                    />
+                  </div>
+                  <div class="mr-6">
+                    <img
+                      alt="Discord"
+                      width="20"
+                      height="20"
+                      src="@/assets/discordIcon.svg"
+                      class="cursor-pointer"
+                    />
+                  </div>
                   <img
                     alt="Github"
                     width="20"
                     height="20"
                     src="@/assets/githubIcon.svg"
+                    class="cursor-pointer"
                     onclick="location.href = 'https://github.com/doiim';"
                   />
                 </div>
@@ -162,15 +165,15 @@ onClickOutside(infoMenuRef, () => {
           </div>
         </div>
         <div
-            ref="infoMenuRef"
-            class="default-button lg-view cursor-pointer"
-            @click="
-              [
-                (infoMenuOpenToggle = !infoMenuOpenToggle),
-                (menuOpenToggle = false),
-                (currencyMenuOpenToggle = false),
-              ]
-            "
+          ref="infoMenuRef"
+          class="default-button lg-view cursor-pointer"
+          @click="
+            [
+              (infoMenuOpenToggle = !infoMenuOpenToggle),
+              (menuOpenToggle = false),
+              (currencyMenuOpenToggle = false),
+            ]
+          "
         >
           <h1
             class="text-gray-50 font-semibold sm:text-base"