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

@@ -317,8 +317,7 @@ function handleClick(): void {
             background-color: #0059d0;
 
             &.transparent,
-            &.blue-white,
+            &.blue-white {
-            &.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;

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;
     }