style: overall style refine

eslint.config.mjs

@@ -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}'],

src/App.css

@@ -8,4 +8,3 @@
   flex: 1;
   padding-bottom: 56px; /* Space for the bottom navigation */
 }
-

src/components/Schedule/index.tsx

@@ -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';
 
@@ -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>
           ))
         ) : (
@@ -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>

src/components/common/Header.tsx

@@ -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 */}

src/index.css

@@ -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;
 }

src/utils/theme.ts

@@ -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 };

tsconfig.app.json

@@ -31,5 +31,5 @@
     "types": ["vitest/globals"]
   },
   "include": ["src", "eslint.config.mjs", "vite.config.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "dist"]
 }