Added custom component to new theme

Vincit · Jun 24, 2024 · 8c3e25f · 8c3e25f
1 parent f38dcc3
commit 8c3e25f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/frontend/src/components/RoomCard/RoomCard.tsx b/frontend/src/components/RoomCard/RoomCard.tsx
@@ -293,7 +293,7 @@ const RoomCard = (props: RoomCardProps) => {
                     <Row>
                         <Typography
                             data-testid="BookingRoomTitle"
-                            variant="h3"
+                            variant="h2"
                             color={isBusy ? 'text.disabled' : 'text.main'}
                         >
                             {getName(room)}

diff --git a/frontend/src/components/util/TimeLeft.tsx b/frontend/src/components/util/TimeLeft.tsx
@@ -1,5 +1,6 @@
 import { Box, Typography } from '@mui/material';
 import { DateTime, Duration } from 'luxon';
+import { styled } from '@mui/material/styles';
 
 export const getTimeLeftMinutes = (endTime: string) => {
     let nextReservationTime = DateTime.fromISO(endTime).toUTC();
@@ -78,15 +79,16 @@ type TimeLeftProps = {
     endTime: string;
     timeLeftText: string;
 };
+export const TimeLeftTypography = styled(Typography)(({ theme }) => ({}));
 
 const TimeLeft = (props: TimeLeftProps) => {
     const { endTime, timeLeftText } = props;
 
     return (
         <Box>
-            <Typography data-testid="TimeLeftTest">
+            <TimeLeftTypography variant={'h3'} data-testid="TimeLeftTest">
                 {timeLeftText} {getTimeLeft(endTime)}
-            </Typography>
+            </TimeLeftTypography>
         </Box>
     );
 };

diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
@@ -1,4 +1,35 @@
-import { createTheme, Theme, ThemeOptions } from '@mui/material/styles';
+import {
+    createTheme,
+    Theme as MuiTheme,
+    ThemeOptions
+} from '@mui/material/styles';
+import TimeLeft, { TimeLeftTypography } from './components/util/TimeLeft';
+import { ComponentsOverrides, ComponentsVariants } from '@mui/material';
+
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        dashed: true;
+    }
+}
+type Theme = Omit<MuiTheme, 'components'>;
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        MuiStat: 'root' | 'value' | 'unit';
+    }
+
+    interface ComponentsPropsList {
+        TimeLeftTypography: Partial<typeof TimeLeftTypography>;
+    }
+
+    interface Components {
+        TimeLeftTypography?: {
+            defaultProps?: ComponentsPropsList['MuiTypography'];
+            styleOverrides?: ComponentsOverrides<Theme>['MuiTypography'];
+            variants?: ComponentsVariants['MuiTypography'];
+        };
+    }
+}
 
 export const COLORS = {
     ACCENT_PINK: '#FFCAFF',
@@ -92,15 +123,15 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
                     color: COLORS.TEXT_PRIMARY,
                     fontStyle: 'normal',
                     fontWeight: 'bold',
-                    fontSize: '16px',
+                    fontSize: '24px',
                     lineHeight: '21px',
 
                     '&.Mui-selected': {
                         color: COLORS.TEXT_PRIMARY,
                         background: COLORS.ACCENT_PINK
                     },
                     '&.Mui-selected:hover': {
-                        background: '#C13217'
+                        background: COLORS.ACCENT_PINK
                     }
                 }
             }
@@ -121,6 +152,18 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
                     margin: '24px 0px'
                 }
             }
+        },
+        TimeLeftTypography: {
+            styleOverrides: {
+                h2: {
+                    color: COLORS.ACCENT_PINK,
+                    textColor: COLORS.ACCENT_PINK,
+                    fontStyle: 'normal',
+                    fontWeight: 'bold',
+                    fontSize: '24px',
+                    lineHeight: '21px'
+                }
+            }
         }
     }
 };