Skip to content

Commit

Permalink
style: overall style refine
Browse files Browse the repository at this point in the history
  • Loading branch information
ZL-Asica committed Nov 26, 2024
1 parent d1ad019 commit 468546f
Show file tree
Hide file tree
Showing 6 changed files with 207 additions and 58 deletions.
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 */
}

10 changes: 5 additions & 5 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '@/App.css';

import { ThemeProvider } from '@mui/material';
import { Box, ThemeProvider } from '@mui/material';
import { BrowserRouter as Router } from 'react-router-dom';
import { Toaster } from 'sonner';

Expand All @@ -13,7 +13,7 @@ import { theme } from '@/utils/theme';

const App = () => {
return (
<div className='App'>
<Box className='App'>
<Router>
<ThemeProvider theme={theme}>
<Toaster
Expand All @@ -22,17 +22,17 @@ const App = () => {
/>
<UserProvider>
<Header />
<div className='content'>
<Box className='content'>
{/* Main content area where pages will render */}
<AppRoutes />
</div>
</Box>

{/* Bottom Navigation with React Router links */}
<Footer />
</UserProvider>
</ThemeProvider>
</Router>
</div>
</Box>
);
};

Expand Down
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 };

0 comments on commit 468546f

Please sign in to comment.