+
@@ -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',