From 9533ae90374d858ae738783628980e2745247db2 Mon Sep 17 00:00:00 2001 From: Another Date: Fri, 19 Jan 2024 11:57:48 -0500 Subject: [PATCH 01/11] feat: add branded blue --- src/components/_global/BalBtn/BalBtn.vue | 5 ++++- src/components/_global/BalTable/BalTable.vue | 4 ++-- src/components/_global/BalTabs/BalTabs.vue | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/_global/BalBtn/BalBtn.vue b/src/components/_global/BalBtn/BalBtn.vue index 986e81d6a..88cdc175d 100644 --- a/src/components/_global/BalBtn/BalBtn.vue +++ b/src/components/_global/BalBtn/BalBtn.vue @@ -112,7 +112,7 @@ const bgGradientClasses = computed(() => { fromColor = 'pink'; toColor = 'yellow'; } else if (props.color === 'gradient-blue-light') { - return 'bg-gradient-to-tr from-refi-text to-light-blue hover:from-blue-600 hover:to-blue-400'; + return 'transition-colors bg-gradient-to-tr from-refi-text to-light-blue hover:from-refi-text hover:to-light-blue '; } if (props.disabled) { return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`; @@ -120,6 +120,9 @@ const bgGradientClasses = computed(() => { if (props.loading) { return `bg-gradient-to-tr ${loadingFrom(fromColor)} ${loadingTo(toColor)}`; } + if (props.color === 'gradient') + return 'transition-colors bg-gradient-to-tr from-refi-text to-light-blue hover:from-refi-text hover:via-light-blue hover:to-light-blue'; + return ` bg-gradient-to-tr ${gradientFrom(fromColor)} ${gradientTo( toColor )} ${hoverFrom(fromColor)} ${hoverTo(toColor)} transition-colors`; diff --git a/src/components/_global/BalTable/BalTable.vue b/src/components/_global/BalTable/BalTable.vue index 41859557d..4482f26fa 100644 --- a/src/components/_global/BalTable/BalTable.vue +++ b/src/components/_global/BalTable/BalTable.vue @@ -249,10 +249,10 @@ watch([() => props.data, () => props.isLoading], ([newData]) => { ? 'cursor-pointer' : '', column.sortKey && currentSortColumn !== column.id - ? 'text-gray-800 hover:text-purple-600 focus:text-blue-500 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors' + ? 'text-gray-800 hover:text-purple-600 focus:text-refi-text dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors' : '', currentSortColumn === column.id && currentSortDirection - ? 'text-blue-600 hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-blue-600 transition-colors' + ? 'text-refi-text hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-refi-text transition-colors' : '', !square ? 'rounded-t-lg' : '', ]" diff --git a/src/components/_global/BalTabs/BalTabs.vue b/src/components/_global/BalTabs/BalTabs.vue index ebaad3d21..427c17bc8 100644 --- a/src/components/_global/BalTabs/BalTabs.vue +++ b/src/components/_global/BalTabs/BalTabs.vue @@ -34,7 +34,7 @@ const containerClasses = computed(() => { function stateClasses(tab: Tab): Record { return { - 'border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:border-blue-500 font-semibold': + 'border-b-2 border-blue-600 dark:border-blue-400 text-refi-text dark:text-refi-text hover:text-blue-500 dark:border-blue-500 font-semibold': isActiveTab(tab), 'hover:text-purple-600 dark:hover:text-yellow-500 dark:border-gray-700 transition-colors': !isActiveTab(tab), From ee365c3f31d562fee76f4ba3b8dd042a7bb9cbec Mon Sep 17 00:00:00 2001 From: Another Date: Fri, 19 Jan 2024 12:37:48 -0500 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20hover=20colors=20and=20p=C3=ADlls?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/_global/BalTable/BalTable.vue | 4 ++-- .../tables/PoolsTable/TokenPills/StableTokenPill.vue | 4 ++-- .../tables/PoolsTable/TokenPills/WeightedTokenPill.vue | 2 +- tailwind.config.js | 2 ++ 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/_global/BalTable/BalTable.vue b/src/components/_global/BalTable/BalTable.vue index 4482f26fa..dc31ce206 100644 --- a/src/components/_global/BalTable/BalTable.vue +++ b/src/components/_global/BalTable/BalTable.vue @@ -249,10 +249,10 @@ watch([() => props.data, () => props.isLoading], ([newData]) => { ? 'cursor-pointer' : '', column.sortKey && currentSortColumn !== column.id - ? 'text-gray-800 hover:text-purple-600 focus:text-refi-text dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors' + ? 'text-gray-800 hover:text-accent-refi focus:text-refi-text dark:text-gray-100 dark:hover:text-accent-refi dark:focus:text-yellow-500 transition-colors' : '', currentSortColumn === column.id && currentSortDirection - ? 'text-refi-text hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-refi-text transition-colors' + ? 'text-refi-text hover:text-blue-500 focus:text-accent-refi dark:text-blue-400 dark:hover:text-refi-text dark:focus:text-refi-text-dark transition-colors' : '', !square ? 'rounded-t-lg' : '', ]" diff --git a/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue b/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue index ae31a2582..8a8b8f5e9 100644 --- a/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue +++ b/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue @@ -63,7 +63,7 @@ withDefaults(defineProps(), { .pill::before { @apply w-full h-full; @apply absolute; - @apply bg-gray-100 dark:bg-gray-700; + @apply bg-pill-ligth dark:bg-gray-700; content: ''; transform: skew(-16deg); @@ -105,6 +105,6 @@ withDefaults(defineProps(), { .pill-hoverable:hover::before, .pill-hoverable:focus::before { - @apply bg-gray-200 dark:bg-gray-900; + @apply bg-pill-ligth dark:bg-gray-900; } diff --git a/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue b/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue index bf2978112..e4fcf7e8b 100644 --- a/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue +++ b/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue @@ -69,7 +69,7 @@ withDefaults(defineProps(), { From fba8849c6010418dae2df8268229914e69fd82ce Mon Sep 17 00:00:00 2001 From: Fabian Scherer <48454910+fabianschu@users.noreply.github.com> Date: Mon, 22 Jan 2024 11:27:28 +0700 Subject: [PATCH 09/11] Update src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue --- src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue b/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue index 3e598d464..872908a8a 100644 --- a/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue +++ b/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue @@ -63,7 +63,7 @@ withDefaults(defineProps(), { .pill::before { @apply w-full h-full; @apply absolute; - @apply bg-pill-ligth dark:bg-gray-700; + @apply bg-pill-light dark:bg-gray-700; content: ''; transform: skew(-16deg); From 37af06dd0c122e932f48103556ca4149d1122ab0 Mon Sep 17 00:00:00 2001 From: Fabian Scherer <48454910+fabianschu@users.noreply.github.com> Date: Mon, 22 Jan 2024 11:44:28 +0700 Subject: [PATCH 10/11] fix: typo custom class --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 5ee706edd..4f70e0187 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -191,7 +191,7 @@ module.exports = { disabled: '#9F9F9F', complementary: '#7B7B7B', 'complementary-b': '#B6C7D6', - 'pill-ligth': '#E7F4FF', + 'pill-light': '#E7F4FF', }, }, }, From 1f308db2f128087b2d369b83bf923dec45668618 Mon Sep 17 00:00:00 2001 From: Fabian Scherer <48454910+fabianschu@users.noreply.github.com> Date: Mon, 22 Jan 2024 11:49:06 +0700 Subject: [PATCH 11/11] fix: typo II --- .../tables/PoolsTable/TokenPills/WeightedTokenPill.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue b/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue index e4fcf7e8b..0bbb8875a 100644 --- a/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue +++ b/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue @@ -69,7 +69,7 @@ withDefaults(defineProps(), {