From 96565841ffe3fd024086dfb5e4c0e8567f6b3ab1 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 4 Aug 2026 20:16:10 -0700
Subject: [PATCH] [eric] dock: rail actions go Apple-flat, one hairline lucide
 family on the rail material, pucks and gradients gone

---
 .../Dashboard/desktop/DockActionTiles.tsx     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/desktop/DockActionTiles.tsx b/frontend/src/app/pages/Dashboard/desktop/DockActionTiles.tsx
index c553a23d..cea69f8b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DockActionTiles.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DockActionTiles.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
-import LanguageIcon from '@mui/icons-material/Language';
-import EventRepeatIcon from '@mui/icons-material/EventRepeat';
-import SettingsIcon from '@mui/icons-material/Settings';
-import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
+import { Globe, CalendarClock, Settings, LayoutGrid } from 'lucide-react';
 import { useAppDispatch } from '@/shared/hooks';
 import { openSettingsCard, openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
 
@@ -18,21 +15,21 @@ interface DockActionTilesProps {
   onHoverAway: () => void;
 }
 
-/** The dock's fixed group: browser, workflows, then settings + applications under their own divider. */
+/** The dock's fixed group: browser, workflows, then settings + applications under their own divider. Action buttons are flat hairline glyphs resting on the rail material (running dock tiles above keep their colored tiles), so actions and running things read as different species. */
 function DockActionTiles({ tile, onAddBrowser, onApplications, onHoverAway }: DockActionTilesProps): React.ReactElement {
   const dispatch = useAppDispatch();
-  const actions: { label: string; icon: React.ReactNode; act: () => void; divider?: boolean; bg?: string }[] = [
-    { label: 'New browser', icon: <LanguageIcon sx={{ color: '#e8e8ee' }} />, act: onAddBrowser },
-    { label: 'Workflows', icon: <EventRepeatIcon sx={{ color: '#e8e8ee' }} />, act: () => dispatch(openWorkflowsApp()) },
-    { label: 'Settings', icon: <SettingsIcon sx={{ color: '#e8e8ee' }} />, act: () => dispatch(openSettingsCard()), divider: true },
-    { label: 'Applications', icon: <AppsRoundedIcon sx={{ color: '#e8e8ee' }} />, act: onApplications, bg: 'linear-gradient(135deg, #3d3d46, #232329)' },
+  const actions: { label: string; Icon: typeof Globe; act: () => void; divider?: boolean }[] = [
+    { label: 'New browser', Icon: Globe, act: onAddBrowser },
+    { label: 'Workflows', Icon: CalendarClock, act: () => dispatch(openWorkflowsApp()) },
+    { label: 'Settings', Icon: Settings, act: () => dispatch(openSettingsCard()), divider: true },
+    { label: 'Applications', Icon: LayoutGrid, act: onApplications },
   ];
 
   return (
     <>
       {actions.map((a) => (
         <React.Fragment key={a.label}>
-          {a.divider && <Box sx={{ width: tile - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />}
+          {a.divider && <Box sx={{ width: tile - 16, height: '1px', background: 'rgba(255,255,255,0.10)', alignSelf: 'center', flexShrink: 0 }} />}
           <Tooltip title={a.label} placement="right">
             <Box
               className="osw-dock-tile"
@@ -41,16 +38,19 @@ function DockActionTiles({ tile, onAddBrowser, onApplications, onHoverAway }: Do
               sx={{
                 width: tile,
                 height: tile,
-                borderRadius: '12px',
-                background: a.bg ?? 'linear-gradient(135deg, #5a5a62, #34343c)',
+                borderRadius: '10px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
                 flexShrink: 0,
+                color: 'rgba(235, 235, 240, 0.72)',
+                transition: 'background-color 0.15s ease, color 0.15s ease',
+                '&:hover': { backgroundColor: 'rgba(255,255,255,0.10)', color: '#ffffff' },
+                '&:active': { backgroundColor: 'rgba(255,255,255,0.16)' },
               }}
             >
-              {a.icon}
+              <a.Icon size={19} strokeWidth={1.5} />
             </Box>
           </Tooltip>
         </React.Fragment>