From c11e858da86955b4052439bc9a7583240d81e2ad Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:26:39 +0000
Subject: [PATCH] improved view tabs

- added an icon
- added an underline
- curved the radius to sit better with the action buttons
- improved added button
---
 .../bbui/src/ActionButton/ActionButton.svelte |  8 ++--
 .../buttons/TableFilterButton.svelte          |  2 +-
 .../buttons/grid/GridAutomationsButton.svelte |  2 +-
 .../grid/GridColumnsSettingButton.svelte      |  2 +-
 .../buttons/grid/GridRowActionsButton.svelte  |  2 +-
 .../buttons/grid/GridScreensButton.svelte     |  2 +-
 .../[tableId]/_components/ViewNavBar.svelte   | 47 ++++++++++++++++---
 7 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 2401354fbb..36d32de9c3 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -24,8 +24,8 @@
       return ""
     }
     let style = ""
-    style += `--accent-bg-color:${hexToRGBA(color, 0.15)};`
-    style += `--accent-border-color:${hexToRGBA(color, 0.35)};`
+    style += `--accent-bg-color:${hexToRGBA(color, 0.1)};`
+    style += `--accent-border-color:${hexToRGBA(color, 0.3)};`
     return style
   }
 </script>
@@ -116,8 +116,10 @@
   }
   .accent.is-selected,
   .accent:active {
-    border: 1px solid var(--accent-border-color);
     background: var(--accent-bg-color);
+    border-radius: 10px;
+    height: 28px;
+    border: 1px dashed var(--accent-border-color);
   }
   .accent:hover {
     filter: brightness(1.2);
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index c6103b1697..6ddf378ec4 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -55,7 +55,7 @@
       {disabled}
       on:click={openPopover}
       selected={open || filterCount > 0}
-      accentColor="#004EA6"
+      accentColor="#ff5c00"
     >
       {filterCount ? `Filter: ${filterCount}` : "Filter"}
     </ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
index b2448eeaf3..86694adbed 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
@@ -44,7 +44,7 @@
       icon="JourneyVoyager"
       selected={open || automationCount}
       quiet
-      accentColor="#5610AD"
+      accentColor="#ff5c00"
     >
       Automations{automationCount ? `: ${automationCount}` : ""}
     </ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
index 801abeaf9f..f13d892511 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
@@ -39,7 +39,7 @@
       on:click={popover?.open}
       selected={open || anyRestricted}
       disabled={!$tableColumns.length}
-      accentColor="#674D00"
+      accentColor="#ff5c00"
     >
       {text}
     </ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
index f61e19c19d..67e5effb03 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
@@ -73,7 +73,7 @@
       icon="Engagement"
       selected={open || actionCount}
       quiet
-      accentColor="#A24400"
+      accentColor="#ff5c00"
     >
       Row actions{actionCount ? `: ${actionCount}` : ""}
     </ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
index db446b3c9e..000b8c80ea 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
@@ -32,7 +32,7 @@
       icon="WebPage"
       selected={open || screenCount}
       quiet
-      accentColor="#364800"
+      accentColor="#ff5c00"
     >
       Screens{screenCount ? `: ${screenCount}` : ""}
     </ActionButton>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
index bf3d073f60..8009413d30 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
@@ -181,6 +181,7 @@
 
 <div class="nav">
   <a
+    class="datasource-icon"
     href={`/builder/app/${$appStore.appId}/data/datasource/${datasource?._id}`}
   >
     <IntegrationIcon
@@ -247,6 +248,19 @@
           on:contextmenu={e => openViewContextMenu(e, view)}
           data-id={view.id}
         >
+          <svg
+            class="spectrum-Icon spectrum-Icon--sizeM"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            focusable="false"
+            aria-label="Table"
+          >
+            <path
+              d="M15.75,2H4.25c-1.24072,0-2.25,1.00977-2.25,2.25v11.5c0,1.24023,1.00928,2.25,2.25,2.25h11.5c1.24072,0,2.25-1.00977,2.25-2.25V4.25c0-1.24023-1.00928-2.25-2.25-2.25ZM3.5,9h3v3h-3v-3ZM8,9h8.5v3h-8.5v-3ZM3.5,4.25c0-.41309.33643-.75.75-.75h11.5c.41357,0,.75.33691.75.75v3.25H3.5v-3.25ZM3.5,15.75v-2.25h3v3h-2.25c-.41357,0-.75-.33691-.75-.75ZM16.5,15.75c0,.41309-.33643.75-.75.75h-7.75v-3h8.5v2.25Z"
+              fill="var(--iconFill, currentColor)"
+              stroke-width="0"
+            />
+          </svg>
           <div class="nav-item__title">
             {view.name}
           </div>
@@ -325,7 +339,7 @@
 <style>
   /* Main containers */
   .nav {
-    height: 50px;
+    height: 48px;
     border-bottom: var(--border-light);
     display: flex;
     flex-direction: row;
@@ -336,37 +350,55 @@
     background: var(--background);
   }
   .nav__views {
+    height: 48px;
     flex: 0 1 auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
     overflow: hidden;
+    align-items: center;
     gap: 8px;
+    transform: translateZ(0);
   }
 
   /* Table and view items */
   .nav-item {
     padding: 0 8px;
-    height: 32px;
-    border-radius: 4px;
+    height: 28px;
+    border-radius: 8px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-m);
+    gap: var(--spacing-s);
     transition: background 130ms ease-out, color 130ms ease-out;
     color: var(--spectrum-global-color-gray-600);
+    position: relative;
+    font-size: 15px;
   }
   .nav-item.hidden {
     visibility: hidden;
   }
   .nav-item.active,
   .nav-item:hover {
-    background: var(--spectrum-global-color-gray-300);
+    background: var(--spectrum-global-color-gray-200);
     cursor: pointer;
     color: var(--spectrum-global-color-gray-900);
+    box-shadow: var(--spectrum-global-color-gray-300) 0px 0px 0px 1px inset;
   }
+  .nav-item.active::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    border-radius: 2px;
+    background: var(--spectrum-global-color-gray-800);
+    position: absolute;
+    bottom: -10px;
+    left: 0px;
+    z-index: 2;
+  }
+
   .nav-item:not(.active) :global(.icon) {
     display: none;
   }
@@ -381,4 +413,7 @@
   .nav-overflow-item:not(.active) :global(> .spectrum-Menu-item > .icon) {
     visibility: hidden;
   }
+  .datasource-icon {
+    height: 24px;
+  }
 </style>