From 3a76d1309728ef8613b378a1c8242871fd790254 Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Tue, 22 Jul 2025 16:48:11 +0100 Subject: [PATCH] use rem styling, make navbar scrollable on overflow, extrapolate styling to be re-usable and remove redundant nav item colors, rely on tailwind theme instead --- frontend/index.html | 1 - frontend/package-lock.json | 7 ++ frontend/package.json | 1 + .../src/components/shared/QuickAccessBar.css | 42 +++++-- .../src/components/shared/QuickAccessBar.tsx | 106 ++++++++---------- frontend/src/index.css | 6 + 6 files changed, 94 insertions(+), 69 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index c8f825666..0fc165c66 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,6 @@ - void; } +const actionIconStyle = { + backgroundColor: 'var(--icon-user-bg)', + color: 'var(--icon-user-color)', + borderRadius: '50%', + width: '1.5rem', + height: '1.5rem', +}; + function NavHeader() { return ( <> -
+
- + - +
@@ -72,7 +66,7 @@ function NavHeader() { @@ -98,8 +92,8 @@ const QuickAccessBar = ({ name: 'All Tools', icon: , tooltip: 'View all available tools', - color: '#1E88E5', size: 'lg', + isRound: false, onClick: () => { setActiveButton('tools'); onReaderToggle(); @@ -111,8 +105,8 @@ const QuickAccessBar = ({ name: 'Read', icon: , tooltip: 'Read documents', - color: '#4CAF50', size: 'lg', + isRound: false, onClick: () => { setActiveButton('read'); onReaderToggle(); @@ -122,12 +116,12 @@ const QuickAccessBar = ({ id: 'sign', name: 'Sign', icon: - + signature , tooltip: 'Sign your document', - color: '#3BA99C', size: 'lg', + isRound: false, onClick: () => setActiveButton('sign') }, { @@ -135,8 +129,8 @@ const QuickAccessBar = ({ name: 'Automate', icon: , tooltip: 'Automate workflows', - color: '#A576E3', size: 'lg', + isRound: false, onClick: () => setActiveButton('automate') }, { @@ -144,34 +138,18 @@ const QuickAccessBar = ({ name: 'Files', icon: , tooltip: 'Manage files', - color: '', // the round icons are blue always, this logic lives in getButtonStyle isRound: true, size: 'lg', onClick: () => setActiveButton('files') }, - /* Access isn't going to be available yet */ - - /* - { - id: 'access', - name: 'Access', - icon: , - tooltip: 'Manage access and permissions', - color: '#00BCD4', - isRound: true, - size: 'lg', - onClick: () => setActiveButton('access') - }, - */ { id: 'activity', name: 'Activity', icon: - + vital_signs , tooltip: 'View activity and analytics', - color: '', isRound: true, size: 'lg', onClick: () => setActiveButton('activity') @@ -181,7 +159,6 @@ const QuickAccessBar = ({ name: 'Config', icon: , tooltip: 'Configure settings', - color: '#9CA3AF', size: 'lg', onClick: () => { setConfigModalOpen(true); @@ -189,6 +166,13 @@ const QuickAccessBar = ({ } ]; + const ROUND_BORDER_RADIUS = '50%'; + const NOT_ROUND_BORDER_RADIUS = '8px'; + + const getBorderRadius = (config: ButtonConfig): string => { + return config.isRound ? ROUND_BORDER_RADIUS : NOT_ROUND_BORDER_RADIUS; + }; + const getButtonStyle = (config: ButtonConfig) => { const isActive = activeButton === config.id; @@ -199,7 +183,7 @@ const QuickAccessBar = ({ backgroundColor: 'var(--icon-tools-bg)', color: 'var(--icon-tools-color)', border: 'none', - borderRadius: config.isRound ? '50%' : '8px', + borderRadius: getBorderRadius(config), }; } if (config.id === 'read') { @@ -207,7 +191,7 @@ const QuickAccessBar = ({ backgroundColor: 'var(--icon-read-bg)', color: 'var(--icon-read-color)', border: 'none', - borderRadius: config.isRound ? '50%' : '8px', + borderRadius: getBorderRadius(config), }; } if (config.id === 'sign') { @@ -215,7 +199,7 @@ const QuickAccessBar = ({ backgroundColor: 'var(--icon-sign-bg)', color: 'var(--icon-sign-color)', border: 'none', - borderRadius: config.isRound ? '50%' : '8px', + borderRadius: getBorderRadius(config), }; } if (config.id === 'automate') { @@ -223,21 +207,21 @@ const QuickAccessBar = ({ backgroundColor: 'var(--icon-automate-bg)', color: 'var(--icon-automate-color)', border: 'none', - borderRadius: config.isRound ? '50%' : '8px', + borderRadius: getBorderRadius(config), }; } if (config.id === 'files') { return { backgroundColor: 'var(--icon-files-bg)', color: 'var(--icon-files-color)', - borderRadius: '50%', + borderRadius: ROUND_BORDER_RADIUS, }; } if (config.id === 'activity') { return { backgroundColor: 'var(--icon-activity-bg)', color: 'var(--icon-activity-color)', - borderRadius: '50%', + borderRadius: ROUND_BORDER_RADIUS, }; } if (config.id === 'config') { @@ -245,7 +229,7 @@ const QuickAccessBar = ({ backgroundColor: 'var(--icon-config-bg)', color: 'var(--icon-config-color)', border: 'none', - borderRadius: config.isRound ? '50%' : '8px', + borderRadius: getBorderRadius(config), }; } } @@ -255,15 +239,15 @@ const QuickAccessBar = ({ backgroundColor: 'var(--icon-inactive-bg)', color: 'var(--icon-inactive-color)', border: 'none', - borderRadius: config.isRound ? '50%' : '8px', + borderRadius: getBorderRadius(config), }; }; const getTextStyle = (config: ButtonConfig) => { const isActive = activeButton === config.id; return { - marginTop: '12px', - fontSize: '12px', + marginTop: '0.75rem', + fontSize: '0.75rem', color: isActive ? 'var(--text-primary)' : 'var(--color-gray-700)', fontWeight: isActive ? 'bold' : 'normal', textRendering: 'optimizeLegibility' as const, @@ -273,13 +257,19 @@ const QuickAccessBar = ({ return (
{ + // Prevent the wheel event from bubbling up to parent containers + e.stopPropagation(); }} > @@ -310,7 +300,7 @@ const QuickAccessBar = ({ diff --git a/frontend/src/index.css b/frontend/src/index.css index ec2585e8c..f7e5e0865 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,3 +1,9 @@ +@import 'material-symbols/rounded.css'; + +.material-symbols-rounded { + font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',