From e6b5bc774837cddafd3e9f41f7a97776313a7e0c Mon Sep 17 00:00:00 2001 From: Vagner Date: Fri, 11 Oct 2024 16:36:04 -0300 Subject: [PATCH 01/15] Fix text displacement during interaction Topbar --- src/components/TopBar/TopBar.vue | 63 +++++++++++++++++++------------- 1 file changed, 37 insertions(+), 26 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 172f141..696f939 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -89,12 +89,34 @@ onClickOutside(infoMenuRef, () => {
+
-
+
Documentação @@ -162,28 +184,6 @@ onClickOutside(infoMenuRef, () => {
-
-

- Menu -

-
{ +
{{ sellerView ? "Quero comprar" : "Quero vender" }} +
+
{{ sellerView ? "Quero comprar" : "Quero vender" }} +
+
Date: Fri, 11 Oct 2024 17:53:12 -0300 Subject: [PATCH 02/15] Fix walletmenu using tailwind's and vue's best practices --- src/assets/chevron.svg | 3 ++ src/components/TopBar/TopBar.vue | 50 ++++++++++---------------------- 2 files changed, 18 insertions(+), 35 deletions(-) create mode 100644 src/assets/chevron.svg diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg new file mode 100644 index 0000000..d5b4633 --- /dev/null +++ b/src/assets/chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 696f939..3ab2524 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -314,7 +314,10 @@ onClickOutside(infoMenuRef, () => {
Account image {{ formatWalletAddress() }} - Chevron Down - Chevron Up - Chevron Down Black +
+ + + +
Date: Fri, 11 Oct 2024 18:39:51 -0300 Subject: [PATCH 03/15] Fix currencymenu using tailwind's and vue's best practices --- src/components/TopBar/TopBar.vue | 50 ++++++++++---------------------- 1 file changed, 15 insertions(+), 35 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 3ab2524..4c5cd85 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -213,7 +213,10 @@ onClickOutside(infoMenuRef, () => {
Choosed network image { width="24" /> {{ Networks[etherStore.networkName].chainName }} - Chevron Down - Chevron Up - Chevron Down Black +
+ + + +
+ \ No newline at end of file From 61032e3d925a4173c610c48500d4c9264fef6f1f Mon Sep 17 00:00:00 2001 From: Vagner Date: Fri, 11 Oct 2024 19:09:51 -0300 Subject: [PATCH 04/15] Fix currency dropdown text and icon alignment --- src/components/TopBar/TopBar.vue | 44 ++++++++++++++++---------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 4c5cd85..4ed43ab 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -210,7 +210,7 @@ onClickOutside(infoMenuRef, () => {
-
+
{
-
-
-
- - - {{ chainData.chainName }} - -
-
-
-
+
+
+ + + {{ chainData.chainName }} + + +
+
+
From bdf4e370187acb8bf44cc46b1efac51ed5093aea Mon Sep 17 00:00:00 2001 From: Vagner Date: Sat, 12 Oct 2024 12:41:40 -0300 Subject: [PATCH 05/15] Fix background hover overflowing on dropdowns --- src/components/TopBar/TopBar.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 4ed43ab..200f3a3 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -250,7 +250,7 @@ onClickOutside(infoMenuRef, () => { v-show="currencyMenuOpenToggle" class="mt-10 absolute text-gray-900 lg-view min-w-max left-0" > -
+
{ class="mt-10 absolute w-full text-gray-900 lg-view" >
-
+
Gerenciar Ofertas From 1287a0e9a7c8c2306ee8d2795ad21a2f5394bc70 Mon Sep 17 00:00:00 2001 From: Vagner Date: Sat, 12 Oct 2024 12:55:55 -0300 Subject: [PATCH 06/15] Add dropdown transitions --- src/assets/transitions.css | 11 +++++++++++ src/main.ts | 1 + 2 files changed, 12 insertions(+) create mode 100644 src/assets/transitions.css diff --git a/src/assets/transitions.css b/src/assets/transitions.css new file mode 100644 index 0000000..79c21ff --- /dev/null +++ b/src/assets/transitions.css @@ -0,0 +1,11 @@ + +.dropdown-enter-active, +.dropdown-leave-active { + transition: all 0.3s ease; +} + +.dropdown-enter-from, +.dropdown-leave-to { + opacity: 0; + transform: translateY(-10px); +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 1fa42f8..54e2868 100644 --- 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); From 149f0e47671889d6876670ae609ff7aac7664113 Mon Sep 17 00:00:00 2001 From: Vagner Date: Sat, 12 Oct 2024 13:09:34 -0300 Subject: [PATCH 07/15] Apply transitions to all dropdowns --- src/components/SearchComponent.vue | 50 ++-- .../SellerSteps/WantSellComponent.vue | 50 ++-- src/components/TopBar/TopBar.vue | 226 +++++++++--------- 3 files changed, 168 insertions(+), 158 deletions(-) diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue index 43abcd2..4adb054 100644 --- a/src/components/SearchComponent.vue +++ b/src/components/SearchComponent.vue @@ -193,33 +193,35 @@ watch(walletAddress, (): void => { src="@/assets/chevronDownBlack.svg" /> -
-
-
- - +
+
+
- {{ token }} - -
-
-
+ + + {{ token }} + +
+
+
+
-
+
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue index deff145..cae3af4 100644 --- a/src/components/SellerSteps/WantSellComponent.vue +++ b/src/components/SellerSteps/WantSellComponent.vue @@ -135,33 +135,35 @@ const handleButtonClick = async ( src="@/assets/chevronDownBlack.svg" /> -
-
-
- - +
+
+
- {{ token }} - -
-
-
+ + + {{ token }} + +
+
+
+
-
+
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 200f3a3..0f72662 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -111,79 +111,81 @@ onClickOutside(infoMenuRef, () => { Menu -
-
-
-
- - Documentação - -
-
-
-
- - +
+
+
+
+ + Documentação + +
+
+
+
+ - Perguntas frequentes - - -
-
-
-
-
-
- - Twitter - -
-
- - LinkedIn - -
-
- - Github - + + Perguntas frequentes + + +
+
+
+
+
+
+ + Twitter + +
+
+ + LinkedIn + +
+
+ + Github + +
-
-
-
+
+
+
-
+
{
-
-
-
- - - {{ chainData.chainName }} - + +
+
+
+ + + {{ chainData.chainName }} + -
-
-
+
+
+
+
-
+
-
-
-
-
- - Gerenciar Ofertas - -
-
-
-
-
- - Desconectar - + +
+
+
+
+ + Gerenciar Ofertas + +
+
+
+
+
+ + Desconectar + +
-
+
From fc8fac4b48373df429dcfa78b6320f8ebd7ad03c Mon Sep 17 00:00:00 2001 From: Vagner Date: Sat, 12 Oct 2024 13:10:45 -0300 Subject: [PATCH 08/15] Fix glitchy behaviour of token selector structure --- src/components/SearchComponent.vue | 4 ++-- src/components/SellerSteps/WantSellComponent.vue | 13 +++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue index 4adb054..d91c508 100644 --- a/src/components/SearchComponent.vue +++ b/src/components/SearchComponent.vue @@ -172,7 +172,7 @@ watch(walletAddress, (): void => { placeholder="0 " step=".01" /> -
+