saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-04 03:25:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

forgot to push

Browse Source
This commit is contained in:
EthanHealy01 2025-07-21 22:10:23 +01:00
parent a53cce80b6
commit 7d09bf9e45
4 changed files with 221 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/shared/QuickAccessBar.css
View File

@ -10,4 +10,18 @@
justify-content: center;
width: 32px;
height: 32px;
}
.fallbackDivider {
width: 60px;
height: 1px;
background-color: var(--color-gray-300);
margin: 8px 0;
border-radius: 1px;
}
.mantineDivider {
width: 60px;
margin: 8px 0;
border-color: var(--color-gray-300);
}

132
frontend/src/components/shared/QuickAccessBar.tsx
View File

@ -5,6 +5,8 @@ import AppsIcon from "@mui/icons-material/AppsRounded";
import SettingsIcon from "@mui/icons-material/SettingsRounded";
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesomeRounded";
import FolderIcon from "@mui/icons-material/FolderRounded";
import PersonIcon from "@mui/icons-material/PersonRounded";
import NotificationsIcon from "@mui/icons-material/NotificationsRounded";
import { useRainbowThemeContext } from "./RainbowThemeProvider";
import rainbowStyles from '../../styles/rainbow.module.css';
import AppConfigModal from './AppConfigModal';
@ -30,6 +32,54 @@ interface ButtonConfig {
onClick: () => void;
}
function NavHeader() {
return (
<>
<div className="flex flex-row items-center justify-center mb-0">
<Tooltip label="User Profile" position="right">
<ActionIcon
size="md"
variant="subtle"
style={{
backgroundColor: 'var(--icon-user-bg)',
color: 'var(--icon-user-color)',
borderRadius: '50%',
width: '24px',
height: '24px',
marginRight: '8px'
}}
>
<PersonIcon sx={{ fontSize: 16 }} />
</ActionIcon>
</Tooltip>
<Tooltip label="Notifications" position="right">
<ActionIcon
size="md"
variant="subtle"
style={{
backgroundColor: 'var(--icon-notifications-bg)',
color: 'var(--icon-notifications-color)',
borderRadius: '50%',
width: '24px',
height: '24px'
}}
>
<NotificationsIcon sx={{ fontSize: 16 }} />
</ActionIcon>
</Tooltip>
</div>
{/* Divider after top icons */}
<Divider
size="xs"
style={{
width: '60px',
borderColor: 'var(--color-gray-300)'
}}
/>
</>
);
}
const QuickAccessBar = ({
onToolsClick,
onReaderToggle,
@ -46,7 +96,7 @@ const QuickAccessBar = ({
{
id: 'tools',
name: 'All Tools',
icon: <AppsIcon sx={{ fontSize: 20 }} />,
icon: <AppsIcon sx={{ fontSize: 26 }} />,
tooltip: 'View all available tools',
color: '#1E88E5',
size: 'lg',
@ -141,16 +191,69 @@ const QuickAccessBar = ({
const getButtonStyle = (config: ButtonConfig) => {
const isActive = activeButton === config.id;
if (config.isRound && isActive) {
return {
backgroundColor: '#D3E7F7',
color: '#0A8BFF',
borderRadius: '50%',
};
if (isActive) {
// Active state - use specific icon colors
if (config.id === 'tools') {
return {
backgroundColor: 'var(--icon-tools-bg)',
color: 'var(--icon-tools-color)',
border: 'none',
borderRadius: config.isRound ? '50%' : '8px',
};
}
if (config.id === 'read') {
return {
backgroundColor: 'var(--icon-read-bg)',
color: 'var(--icon-read-color)',
border: 'none',
borderRadius: config.isRound ? '50%' : '8px',
};
}
if (config.id === 'sign') {
return {
backgroundColor: 'var(--icon-sign-bg)',
color: 'var(--icon-sign-color)',
border: 'none',
borderRadius: config.isRound ? '50%' : '8px',
};
}
if (config.id === 'automate') {
return {
backgroundColor: 'var(--icon-automate-bg)',
color: 'var(--icon-automate-color)',
border: 'none',
borderRadius: config.isRound ? '50%' : '8px',
};
}
if (config.id === 'files') {
return {
backgroundColor: 'var(--icon-files-bg)',
color: 'var(--icon-files-color)',
borderRadius: '50%',
};
}
if (config.id === 'activity') {
return {
backgroundColor: 'var(--icon-activity-bg)',
color: 'var(--icon-activity-color)',
borderRadius: '50%',
};
}
if (config.id === 'config') {
return {
backgroundColor: 'var(--icon-config-bg)',
color: 'var(--icon-config-color)',
border: 'none',
borderRadius: config.isRound ? '50%' : '8px',
};
}
}
// Inactive state - use consistent inactive colors
return {
backgroundColor: isActive ? config.color : '#9CA3AF',
color: 'white',
backgroundColor: 'var(--icon-inactive-bg)',
color: 'var(--icon-inactive-color)',
border: 'none',
borderRadius: config.isRound ? '50%' : '8px',
};
@ -180,6 +283,7 @@ const QuickAccessBar = ({
}}
>
<Stack gap="lg" align="center" className="flex-1">
<NavHeader />
{buttonConfigs.map((config, index) => (
<React.Fragment key={config.id}>
<Tooltip label={config.tooltip} position="right">
@ -202,7 +306,15 @@ const QuickAccessBar = ({
</Tooltip>
{/* Add divider after Automate button (index 3) */}
{index === 3 && <Divider size="sm" />}
{index === 3 && (
<Divider
size="xs"
style={{
width: '60px',
borderColor: 'var(--color-gray-300)'
}}
/>
)}
{/* Add spacer before Config button (index 7) */}
{index === 5 && <div className="flex-1" />}

10
frontend/src/pages/HomePage.tsx
View File

@ -97,7 +97,7 @@ export default function HomePage() {
{/* Left: Tool Picker or Selected Tool Panel */}
<div
className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-surface)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
style={{
width: sidebarsVisible && !readerMode ? '14vw' : '0',
padding: sidebarsVisible && !readerMode ? '1rem' : '0'
@ -157,9 +157,11 @@ export default function HomePage() {
{/* Main View */}
<Box
className="flex-1 h-screen min-w-80 relative flex flex-col"
style={{
backgroundColor: 'var(--bg-background)'
}}
style={
isRainbowMode
? {} // No background color in rainbow mode
: { backgroundColor: 'var(--bg-background)' }
}
>
{/* Top Controls */}
<TopControls

106
frontend/src/styles/theme.css
View File

@ -72,6 +72,8 @@
--bg-surface: #ffffff;
--bg-raised: #f9fafb;
--bg-muted: #f3f4f6;
--bg-background: #f9fafb;
--bg-toolbar: #ffffff;
--text-primary: #111827;
--text-secondary: #4b5563;
--text-muted: #6b7280;
@ -80,51 +82,101 @@
--border-strong: #9ca3af;
--hover-bg: #f9fafb;
--active-bg: #f3f4f6;
/* Icon colors for light mode */
--icon-user-bg: #9CA3AF;
--icon-user-color: #FFFFFF;
--icon-notifications-bg: #9CA3AF;
--icon-notifications-color: #FFFFFF;
--icon-tools-bg: #1E88E5;
--icon-tools-color: #FFFFFF;
--icon-read-bg: #4CAF50;
--icon-read-color: #FFFFFF;
--icon-sign-bg: #3BA99C;
--icon-sign-color: #FFFFFF;
--icon-automate-bg: #A576E3;
--icon-automate-color: #FFFFFF;
--icon-files-bg: #D3E7F7;
--icon-files-color: #0A8BFF;
--icon-activity-bg: #D3E7F7;
--icon-activity-color: #0A8BFF;
--icon-config-bg: #9CA3AF;
--icon-config-color: #FFFFFF;
/* Inactive icon colors for light mode */
--icon-inactive-bg: #9CA3AF;
--icon-inactive-color: #FFFFFF;
}
[data-mantine-color-scheme="dark"] {
/* Dark theme gray scale (inverted) */
--gray-50: 17 24 39;
--gray-100: 31 41 55;
--gray-200: 55 65 81;
--gray-300: 75 85 99;
--gray-400: 107 114 128;
--gray-500: 156 163 175;
--gray-600: 209 213 219;
--gray-700: 229 231 235;
--gray-800: 243 244 246;
--gray-900: 249 250 251;
--gray-100: 31 35 41;
--gray-200: 42 47 54;
--gray-300: 55 65 81;
--gray-400: 75 85 99;
--gray-500: 107 114 128;
--gray-600: 156 163 175;
--gray-700: 209 213 219;
--gray-800: 229 231 235;
--gray-900: 243 244 246;
/* Dark semantic colors for Tailwind */
--surface: 31 41 55;
--background: 17 24 39;
--border: 75 85 99;
--surface: 31 35 41;
--background: 42 47 54;
--border: 55 65 81;
/* Dark theme Mantine colors */
--color-gray-50: #111827;
--color-gray-100: #1f2937;
--color-gray-200: #374151;
--color-gray-300: #4b5563;
--color-gray-400: #6b7280;
--color-gray-500: #9ca3af;
--color-gray-600: #d1d5db;
--color-gray-700: #e5e7eb;
--color-gray-800: #f3f4f6;
--color-gray-900: #f9fafb;
--color-gray-100: #1F2329;
--color-gray-200: #2A2F36;
--color-gray-300: #374151;
--color-gray-400: #4b5563;
--color-gray-500: #6b7280;
--color-gray-600: #9ca3af;
--color-gray-700: #d1d5db;
--color-gray-800: #e5e7eb;
--color-gray-900: #f3f4f6;
/* Dark theme semantic colors */
--bg-surface: #1f2937;
--bg-raised: #374151;
--bg-muted: #374151;
--bg-surface: #2A2F36;
--bg-raised: #1F2329;
--bg-muted: #1F2329;
--bg-background: #2A2F36;
--bg-toolbar: #272A2E;
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--text-muted: #9ca3af;
--border-subtle: #374151;
--border-default: #4b5563;
--border-strong: #6b7280;
--border-subtle: #2A2F36;
--border-default: #374151;
--border-strong: #4b5563;
--hover-bg: #374151;
--active-bg: #4b5563;
/* Icon colors for dark mode */
--icon-user-bg: #2A2F36;
--icon-user-color: #6E7581;
--icon-notifications-bg: #2A2F36;
--icon-notifications-color: #6E7581;
--icon-tools-bg: #4B525A;
--icon-tools-color: #EAEAEA;
--icon-read-bg: #4B525A;
--icon-read-color: #EAEAEA;
--icon-sign-bg: #4B525A;
--icon-sign-color: #EAEAEA;
--icon-automate-bg: #4B525A;
--icon-automate-color: #EAEAEA;
--icon-files-bg: #4B525A;
--icon-files-color: #EAEAEA;
--icon-activity-bg: #4B525A;
--icon-activity-color: #EAEAEA;
--icon-config-bg: #4B525A;
--icon-config-color: #EAEAEA;
/* Inactive icon colors for dark mode */
--icon-inactive-bg: #2A2F36;
--icon-inactive-color: #6E7581;
/* Adjust shadows for dark mode */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);