Merge branch 'standardised-action-button-active-colors' into icons-update

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

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>

packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte

@@ -44,7 +44,7 @@
       icon="prototyping"
       selected={open || automationCount}
       quiet
-      accentColor="#5610AD"
+      accentColor="#ff5c00"
     >
       Automations{automationCount ? `: ${automationCount}` : ""}
     </ActionButton>

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>

packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte

@@ -73,7 +73,7 @@
       icon="interaction"
       selected={open || actionCount}
       quiet
-      accentColor="#A24400"
+      accentColor="#ff5c00"
     >
       Row actions{actionCount ? `: ${actionCount}` : ""}
     </ActionButton>

packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte

@@ -32,7 +32,7 @@
       icon="web-page"
       selected={open || screenCount}
       quiet
-      accentColor="#364800"
+      accentColor="#ff5c00"
     >
       Screens{screenCount ? `: ${screenCount}` : ""}
     </ActionButton>

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte

@@ -181,7 +181,7 @@
 
 <div class="nav">
   <a
-    class="nav-icon"
+    class="datasource-icon"
     href={`/builder/app/${$appStore.appId}/data/datasource/${datasource?._id}`}
   >
     <IntegrationIcon
@@ -248,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>
@@ -330,7 +343,7 @@
 <style>
   /* Main containers */
   .nav {
-    height: 50px;
+    height: 48px;
     border-bottom: var(--border-light);
     display: flex;
     flex-direction: row;
@@ -344,37 +357,55 @@
     display: flex;
   }
   .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;
   }
@@ -389,4 +420,7 @@
   .nav-overflow-item:not(.active) :global(> .spectrum-Menu-item > .icon) {
     visibility: hidden;
   }
+  .datasource-icon {
+    height: 24px;
+  }
 </style>