Add color picker functionality with MUI theme integration - Create themeStore with Zustand for managing primary color state - Add ThemeProvider component to wrap MUI theme with dynamic primary color - Implement ColorPicker dialog with predefined colors (including 3 purple shades) and custom color option - Add ColorPickerButton component with visual indicator of current color - Integrate color picker into both DesktopLayout and MobileLayout - Update main.tsx to include ThemeProvider wrapper - Persist theme color preference using Zustand persist middleware
This commit is contained in:
parent
546ef8216d
commit
3c37a94644
151
client/src/components/ColorPicker.tsx
Normal file
151
client/src/components/ColorPicker.tsx
Normal file
@ -0,0 +1,151 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
} from '@mui/material';
|
||||
import { Palette } from '@mui/icons-material';
|
||||
import { useThemeStore } from '../stores/themeStore';
|
||||
|
||||
interface ColorPickerProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const predefinedColors = [
|
||||
// Purples (3 shades as requested)
|
||||
{ name: 'Deep Purple', value: '#673ab7' },
|
||||
{ name: 'Medium Purple', value: '#9c27b0' },
|
||||
{ name: 'Light Purple', value: '#e1bee7' },
|
||||
|
||||
// Blues
|
||||
{ name: 'Deep Blue', value: '#1976d2' },
|
||||
{ name: 'Light Blue', value: '#03dac6' },
|
||||
{ name: 'Indigo', value: '#3f51b5' },
|
||||
|
||||
// Greens
|
||||
{ name: 'Forest Green', value: '#2e7d32' },
|
||||
{ name: 'Mint Green', value: '#4caf50' },
|
||||
{ name: 'Teal', value: '#009688' },
|
||||
|
||||
// Reds/Oranges
|
||||
{ name: 'Deep Red', value: '#d32f2f' },
|
||||
{ name: 'Coral', value: '#ff5722' },
|
||||
{ name: 'Amber', value: '#ff9800' },
|
||||
|
||||
// Grays
|
||||
{ name: 'Charcoal', value: '#424242' },
|
||||
{ name: 'Slate', value: '#607d8b' },
|
||||
{ name: 'Warm Gray', value: '#795548' },
|
||||
];
|
||||
|
||||
export function ColorPicker({ open, onClose }: ColorPickerProps) {
|
||||
const { primaryColor, setPrimaryColor } = useThemeStore();
|
||||
const [customColor, setCustomColor] = useState(primaryColor);
|
||||
|
||||
const handleColorSelect = (color: string) => {
|
||||
setPrimaryColor(color);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCustomColorSubmit = () => {
|
||||
if (customColor && /^#[0-9A-F]{6}$/i.test(customColor)) {
|
||||
setPrimaryColor(customColor);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Palette />
|
||||
<Typography>Choose Primary Color</Typography>
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Predefined Colors
|
||||
</Typography>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1 }}>
|
||||
{predefinedColors.map((color) => (
|
||||
<Box
|
||||
key={color.value}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
border: primaryColor === color.value ? 2 : 1,
|
||||
borderColor: primaryColor === color.value ? 'primary.main' : 'divider',
|
||||
'&:hover': {
|
||||
bgcolor: 'action.hover',
|
||||
},
|
||||
}}
|
||||
onClick={() => handleColorSelect(color.value)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '50%',
|
||||
bgcolor: color.value,
|
||||
border: 1,
|
||||
borderColor: 'divider',
|
||||
mb: 0.5,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ textAlign: 'center', fontSize: '0.7rem' }}>
|
||||
{color.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Custom Color
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<TextField
|
||||
value={customColor}
|
||||
onChange={(e) => setCustomColor(e.target.value)}
|
||||
placeholder="#000000"
|
||||
size="small"
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '50%',
|
||||
bgcolor: customColor,
|
||||
border: 1,
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleCustomColorSubmit}
|
||||
disabled={!customColor || !/^#[0-9A-F]{6}$/i.test(customColor)}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
38
client/src/components/ColorPickerButton.tsx
Normal file
38
client/src/components/ColorPickerButton.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { useState } from 'react';
|
||||
import { IconButton, Tooltip } from '@mui/material';
|
||||
import { Palette } from '@mui/icons-material';
|
||||
import { useThemeStore } from '../stores/themeStore';
|
||||
import { ColorPicker } from './ColorPicker';
|
||||
|
||||
export function ColorPickerButton() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { primaryColor } = useThemeStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="Change theme color">
|
||||
<IconButton
|
||||
onClick={() => setOpen(true)}
|
||||
sx={{
|
||||
position: 'relative',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: 2,
|
||||
right: 2,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: '50%',
|
||||
bgcolor: primaryColor,
|
||||
border: 1,
|
||||
borderColor: 'background.paper',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Palette />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<ColorPicker open={open} onClose={() => setOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
client/src/components/ThemeProvider.tsx
Normal file
25
client/src/components/ThemeProvider.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
|
||||
import { useThemeStore } from '../stores/themeStore';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children }: ThemeProviderProps) {
|
||||
const { primaryColor } = useThemeStore();
|
||||
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: primaryColor,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<MuiThemeProvider theme={theme}>
|
||||
{children}
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { Box, Typography, IconButton, TextField, Button } from '@mui/material';
|
||||
import PrintIcon from '@mui/icons-material/Print';
|
||||
import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';
|
||||
import { CreateButtons } from '../components/CreateButtons';
|
||||
import { ColorPickerButton } from '../components/ColorPickerButton';
|
||||
import { useUserSelection } from '../hooks/useUserSelection';
|
||||
|
||||
interface DesktopLayoutProps {
|
||||
@ -45,7 +46,10 @@ export function DesktopLayout({
|
||||
<Box sx={{ width: 250, borderRight: 1, borderColor: 'divider', p: 2 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6">Groups</Typography>
|
||||
<CreateButtons type="group" />
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<ColorPickerButton />
|
||||
<CreateButtons type="group" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Groups List */}
|
||||
|
||||
@ -3,6 +3,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import PrintIcon from '@mui/icons-material/Print';
|
||||
import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';
|
||||
import { CreateButtons } from '../components/CreateButtons';
|
||||
import { ColorPickerButton } from '../components/ColorPickerButton';
|
||||
import { useUserSelection } from '../hooks/useUserSelection';
|
||||
|
||||
function isGroupView(selectedGroup?: GroupWithTasks) {
|
||||
@ -103,7 +104,10 @@ export function MobileLayout({
|
||||
<>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6">Groups</Typography>
|
||||
<CreateButtons type="group" />
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<ColorPickerButton />
|
||||
<CreateButtons type="group" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Groups List */}
|
||||
|
||||
@ -10,12 +10,15 @@ if (process.env.NODE_ENV !== "production") {
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
import { ThemeProvider } from './components/ThemeProvider';
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<ApolloProvider client={client}>
|
||||
<App />
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</ApolloProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
21
client/src/stores/themeStore.ts
Normal file
21
client/src/stores/themeStore.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { create } from 'zustand';
|
||||
import { devtools, persist } from 'zustand/middleware';
|
||||
|
||||
interface ThemeState {
|
||||
primaryColor: string;
|
||||
setPrimaryColor: (color: string) => void;
|
||||
}
|
||||
|
||||
export const useThemeStore = create<ThemeState>()(
|
||||
devtools(
|
||||
persist(
|
||||
(set) => ({
|
||||
primaryColor: '#1976d2', // MUI default blue
|
||||
setPrimaryColor: (color) => set({ primaryColor: color }),
|
||||
}),
|
||||
{
|
||||
name: 'theme-storage',
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user