Skip to content

Commit

Permalink
style: overall style refine (#22)
Browse files Browse the repository at this point in the history
  • Loading branch information
ZL-Asica authored Nov 26, 2024
1 parent 14a6bb4 commit ea85aa0
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 55 deletions.
7 changes: 6 additions & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import { zlAsicaTsReactConfig } from 'eslint-config-zl-asica';
export default [
...zlAsicaTsReactConfig,
{
ignores: ['vite-env.d.ts', 'prettier.config.cjs', 'eslint.config.mjs'],
ignores: [
'vite-env.d.ts',
'prettier.config.cjs',
'eslint.config.mjs',
'dist',
],
},
{
files: ['**/*.{ts,tsx}'],
Expand Down
1 change: 0 additions & 1 deletion src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,3 @@
flex: 1;
padding-bottom: 56px; /* Space for the bottom navigation */
}

77 changes: 41 additions & 36 deletions src/components/Schedule/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Button,
IconButton,
} from '@mui/material';
import EventIcon from '@mui/icons-material/Event';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';

Expand Down Expand Up @@ -75,44 +75,57 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
Events for {selectedDate?.format('MMMM D, YYYY')}:
</Typography>
{eventsForSelectedDate.length > 0 ? (
eventsForSelectedDate.map((event) => (
eventsForSelectedDate.map((event_) => (
<Box
key={event.eventId}
key={event_.eventId}
sx={{
border: '1px solid',
borderColor: 'divider',
borderRadius: 2,
p: 2,
mb: 2,
cursor: 'pointer',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
onClick={() => handleEventClick(event)}
onClick={() => handleEventClick(event_)}
>
<Typography
variant='subtitle1'
fontWeight='bold'
>
{event.title}
</Typography>
<Typography variant='body2'>{event.description}</Typography>
<Typography
variant='caption'
color='text.secondary'
>
{dayjs(event.date).format('MMMM D, YYYY, h:mm A')}
</Typography>
<Box sx={{ flex: 1, mr: 1 }}>
<Typography
variant='subtitle1'
fontWeight='bold'
>
{event_.title}
</Typography>
<Typography variant='body2'>{event_.description}</Typography>
<Typography
variant='caption'
color='text.secondary'
>
{dayjs(event_.date).format('MMMM D, YYYY, h:mm A')}
</Typography>
<Typography>
{event_.supplies.map((supply, index) => (
<Typography
key={index}
variant='caption'
color='text.secondary'
>
{supply.quantityProvided} provided
</Typography>
))}
</Typography>
</Box>

<Typography>
{event.supplies.map((supply, index) => (
<Typography
key={index}
variant='caption'
color='text.secondary'
>
{supply.quantityProvided} provided
</Typography>
))}
</Typography>
<IconButton
color='primary'
onClick={() => generateICSFile(event_)}
sx={{ fontSize: 12, display: 'flex', flexDirection: 'column' }}
>
<CalendarMonthIcon fontSize='large' />
Add to Calendar
</IconButton>
</Box>
))
) : (
Expand Down Expand Up @@ -171,14 +184,6 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
{supply.itemName} - {supply.quantityProvided} provided
</Typography>
))}
<IconButton
color='primary'
onClick={() => generateICSFile(selectedEvent)}
sx={{ mt: 2 }}
>
<EventIcon />
Export to Calendar
</IconButton>
</>
)}
</DialogContent>
Expand Down
6 changes: 5 additions & 1 deletion src/components/common/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ const Header = () => {
return (
<AppBar
position='sticky'
sx={{ backgroundColor: 'primary.light', color: '#000' }}
sx={{
backgroundColor: 'primary.light',
color: '#000',
borderRadius: '0 0 8px 8px',
}}
>
<Toolbar sx={{ justifyContent: 'space-between', position: 'relative' }}>
{/* Back Button */}
Expand Down
3 changes: 0 additions & 3 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Expand Down
168 changes: 156 additions & 12 deletions src/utils/theme.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,162 @@
import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
palette: {
primary: {
light: '#E4E0EE',
main: '#4E2A84',
dark: '#361d5c',
contrastText: '#fff',
},
secondary: {
main: '#f44336',
},
const palette = {
primary: {
light: '#E4E0EE',
main: '#4E2A84',
dark: '#361d5c',
contrastText: '#ffffff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#ffffff',
},
background: {
default: '#ffffff',
paper: '#fefefe',
},
text: {
primary: '#2d2d2d',
secondary: '#4f4f4f',
},
};

const theme = createTheme({
typography: {
fontFamily: 'Roboto, sans-serif',
fontFamily: '"Roboto", "Arial", sans-serif',
},
palette: palette,
components: {
MuiTypography: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.text.primary,
}),
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: '20px',
padding: '8px 16px',
textTransform: 'none',
fontWeight: 500,
},
contained: {
boxShadow: 'none',
'&:hover': {
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',
},
},
outlined: {
borderWidth: '2px',
'&:hover': {
backgroundColor: 'rgba(0,0,0,0.04)',
},
},
text: {
'&:hover': {
backgroundColor: 'rgba(0,0,0,0.04)',
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
borderRadius: '16px',
boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
},
},
},
MuiTextField: {
styleOverrides: {
root: ({ theme }) => ({
'& .MuiInputBase-root': {
borderRadius: '8px',
backgroundColor: theme.palette.background.paper,
},
'& .MuiInputBase-input': {
padding: '12px',
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.divider,
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.primary.main,
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.primary.main,
},
}),
},
},
MuiLink: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.primary.main,
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
},
'&:active': {
color: theme.palette.primary.dark,
},
}),
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: '16px',
boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.1)',
},
},
},
MuiCardContent: {
styleOverrides: {
root: {
padding: '16px',
'&:last-child': {
paddingBottom: '16px',
},
},
},
},
MuiDivider: {
styleOverrides: {
root: {
backgroundColor: 'rgba(0, 0, 0, 0.08)',
},
},
},
MuiMenu: {
styleOverrides: {
paper: {
borderRadius: '8px',
boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.1)',
},
list: {
padding: 0,
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
borderRadius: '8px',
margin: '4px 8px',
padding: '8px 16px',
transition: 'background-color 0.2s ease',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.08)',
},
},
},
},
},
});

export { theme };
2 changes: 1 addition & 1 deletion tsconfig.app.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,5 @@
"types": ["vitest/globals"]
},
"include": ["src", "eslint.config.mjs", "vite.config.ts"],
"exclude": ["node_modules"]
"exclude": ["node_modules", "dist"]
}

0 comments on commit ea85aa0

Please sign in to comment.