From 14beb9ad858f106f515a541a59f8a4437cc501b3 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 27 Jun 2023 14:05:50 +0000
Subject: [PATCH] web/satellite: update button hover state to match the figma

This change updates the buttons same as the "New Folder" button to
have hover state consistent with the design in the figma.

It also fixes an issue where table view will be shown by default even
if the user has less than 8 projects.

Issue: https://github.com/storj/storj/issues/5971

Change-Id: Ic8b99496e1990550a9ea1550c3c2bd80bf997aa9
---
 web/satellite/src/components/common/VButton.vue | 17 +++++++++++++++--
 .../all-dashboard/components/MyProjects.vue     |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/satellite/src/components/common/VButton.vue b/web/satellite/src/components/common/VButton.vue
index a14e8949e..0f7313bd7 100644
--- a/web/satellite/src/components/common/VButton.vue
+++ b/web/satellite/src/components/common/VButton.vue
@@ -317,8 +317,7 @@ function handleClick(): void {
             background-color: #0059d0;
 
             &.transparent,
-            &.blue-white,
-            &.white {
+            &.blue-white {
                 box-shadow: none !important;
                 background-color: #2683ff !important;
                 border: 1px solid #2683ff !important;
@@ -333,6 +332,20 @@ function handleClick(): void {
                 }
             }
 
+            &.white {
+                box-shadow: none !important;
+                border: 1px solid var(--c-blue-3) !important;
+
+                :deep(path),
+                :deep(rect) {
+                    fill: var(--c-blue-3) !important;
+                }
+
+                .label {
+                    color: var(--c-blue-3) !important;
+                }
+            }
+
             &.grey-blue {
                 background-color: #2683ff !important;
                 border-color: #2683ff !important;
diff --git a/web/satellite/src/views/all-dashboard/components/MyProjects.vue b/web/satellite/src/views/all-dashboard/components/MyProjects.vue
index bdbb747d1..c17e2d451 100644
--- a/web/satellite/src/views/all-dashboard/components/MyProjects.vue
+++ b/web/satellite/src/views/all-dashboard/components/MyProjects.vue
@@ -121,7 +121,7 @@ const hasProjectTableViewConfigured = ref(appStore.hasProjectTableViewConfigured
  * Whether to use the table view.
  */
 const isTableViewSelected = computed((): boolean => {
-    if (!hasProjectTableViewConfigured.value && projects.value.length > 1) {
+    if (!hasProjectTableViewConfigured.value && projects.value.length > 8) {
         // show the table by default if the user has more than 8 projects.
         return true;
     }