feat: Update Event Preview Modal UI with custom MUI theme (#240)

- Add custom MUI theme
- Update ResponsiveDialog with actionsBorderTop prop for modal footer border
- Redesign EventDisplayPreview modal with improved typography and spacing
- Replace ButtonGroup with individual RSVP buttons (Accept/Maybe/Decline)
- Add pill-shaped buttons for RSVP actions
- Ensure backward compatibility with existing modals

src/theme/README.md

@@ -0,0 +1,118 @@
+# Custom MUI Theme
+
+## Overview
+
+This project uses a custom MUI theme to customize Typography, colors and components according to Twake Calendar design.
+
+## File Structure
+
+```
+src/theme/
+├── theme.ts          # Custom theme definition
+├── ThemeProvider.tsx # ThemeProvider wrapper
+└── README.md         # This documentation
+```
+
+## Custom Theme Features
+
+### Colors
+
+- **Text Primary**: `#000000` (Black)
+- **Text Secondary**: `#717D96` (Custom gray)
+- **Text Secondary Container**: `#243B55` (Dark gray)
+
+### Typography
+
+- **Caption**: fontSize 13px, color `#717D96`
+
+### Components
+
+- **Typography**: Custom styled caption variant
+
+## Usage
+
+### Using CustomThemeProvider
+
+Import and use `CustomThemeProvider` to wrap your application:
+
+```tsx
+import { CustomThemeProvider } from "./theme/ThemeProvider";
+
+function App() {
+  return <CustomThemeProvider>{/* Your application */}</CustomThemeProvider>;
+}
+```
+
+### Accessing the Theme
+
+Use `useTheme` to access theme variables:
+
+```tsx
+import { useTheme } from "@mui/material/styles";
+
+function MyComponent() {
+  const theme = useTheme();
+  const textColor = theme.palette.text.secondary;
+}
+```
+
+### CSS Variables
+
+Use theme variables directly in CSS:
+
+```tsx
+<Typography sx={{ color: "text.secondary" }}>
+  Text with secondary color
+</Typography>
+```
+
+### Typography
+
+Use predefined typography variants:
+
+```tsx
+<Typography variant="caption">Caption text</Typography>
+```
+
+### Customizing Styles
+
+Modify styles in `theme.ts` to customize components:
+
+```typescript
+components: {
+  MuiTypography: {
+    styleOverrides: {
+      caption: {
+        fontSize: "13px",
+        color: "#717D96",
+      },
+    },
+  },
+}
+```
+
+## Migration to Cozy UI
+
+### Installation
+
+```bash
+npm install cozy-ui
+```
+
+### Replacing ThemeProvider
+
+In your main file, replace `CustomThemeProvider` with `MuiCozyTheme`:
+
+```tsx
+import { MuiCozyTheme } from "cozy-ui/React/MuiCozyTheme";
+
+<MuiCozyTheme>{children}</MuiCozyTheme>;
+```
+
+### Updating Palette
+
+Adapt the color palette in `theme.ts` to use Cozy UI colors. Cozy UI provides its own colors that can be integrated into the theme configuration.
+
+### Component Migration
+
+Update components to use Cozy UI components instead of standard MUI components, following Cozy UI documentation for specific components.

src/theme/ThemeProvider.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import { CssBaseline } from "@mui/material";
+import { customTheme } from "./theme";
+
+interface CustomThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
+  return (
+    <ThemeProvider theme={customTheme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}
+
+export { customTheme };

src/theme/theme.ts

@@ -0,0 +1,38 @@
+import { createTheme } from "@mui/material/styles";
+
+// Custom theme for Twake Calendar
+export const customTheme = createTheme({
+  palette: {
+    text: {
+      primary: "#000000",
+      secondary: "#717D96",
+      secondaryContainer: "#243B55",
+    },
+  },
+  typography: {
+    caption: {
+      fontSize: "0.75rem",
+      fontWeight: 400,
+      lineHeight: 1.4,
+      color: "#8C9CAF", // Custom secondary text color
+    },
+  },
+  components: {
+    // Custom Typography component
+    MuiTypography: {
+      styleOverrides: {
+        // Custom variant for event info text
+        caption: {
+          fontSize: "13px",
+          color: "#717D96",
+        },
+      },
+    },
+    // Custom Button component
+    // Custom Dialog component
+    // Custom DialogActions component
+  },
+});
+
+// Export theme type for TypeScript
+export type CustomTheme = typeof customTheme;