Fixed multiple visible drawer edges

frontend/src/components/App.tsx

@@ -5,24 +5,11 @@ import { SnackbarProvider } from 'notistack';
 import MainView from './MainView/MainView';
 import LoginView from './login/LoginView';
 import { CssBaseline, Divider, styled, ThemeProvider } from '@mui/material';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { DesktopBackground, MobileBackground } from './images/svgImages';
 import { theme_2024 } from '../theme_2024';
 
 export const GarApp = styled(Divider)(() => ({}));
 
 const App = () => {
-    // Basic solution for differentiating between desktop and mobile. Switch from desktop to mobile resolution requires a page refresh
-    // to show background correctly.
-    let svgString = encodeURIComponent(
-        renderToStaticMarkup(<MobileBackground />)
-    );
-    if (window.innerWidth > 600) {
-        svgString = encodeURIComponent(
-            renderToStaticMarkup(<DesktopBackground />)
-        );
-    }
-
     return (
         <ThemeProvider theme={theme_2024}>
             <CssBaseline />

frontend/src/components/AvailableRoomList/AvailableRoomList.tsx

@@ -1,15 +1,16 @@
 import { useState } from 'react';
-import { List, Typography, Box, ToggleButton } from '@mui/material';
+import { Box, List, ToggleButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { makeBooking } from '../../services/bookingService';
-import { Booking, BookingDetails, Room, Preferences } from '../../types';
+import { Booking, BookingDetails, Preferences, Room } from '../../types';
 import { DateTime, Duration } from 'luxon';
 import useCreateNotification from '../../hooks/useCreateNotification';
 import RoomCard from '../RoomCard/RoomCard';
 import NoRoomsCard from '../RoomCard/NoRoomsCard';
 import BookingDrawer from '../BookingDrawer/BookingDrawer';
 import TimePickerDrawer from '../TimePickerDrawer/TimePickerDrawer';
+
 const SKIP_CONFIRMATION = true;
 
 const TimePickerButton = styled(ToggleButton)(() => ({
@@ -277,15 +278,17 @@ const AvailableRoomList = (props: BookingListProps) => {
                     onAddTimeUntilNext={handleUntilNextDurationChange}
                     startingTime={startingTime}
                 />
-                <TimePickerDrawer
-                    open={expandTimePickerDrawer}
-                    toggle={(newOpen: any) =>
-                        setExpandTimePickerDrawer(newOpen)
-                    }
-                    startingTime={startingTime}
-                    setStartingTime={setStartingTime}
-                    setExpandTimePickerDrawer={setExpandTimePickerDrawer}
-                />
+                {
+                    <TimePickerDrawer
+                        open={expandTimePickerDrawer}
+                        toggle={(newOpen: any) =>
+                            setExpandTimePickerDrawer(newOpen)
+                        }
+                        startingTime={startingTime}
+                        setStartingTime={setStartingTime}
+                        setExpandTimePickerDrawer={setExpandTimePickerDrawer}
+                    />
+                }
             </div>
             <div
                 id="available-booking-typography"

frontend/src/components/BookingDrawer/BookingDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';

frontend/src/components/SwipeableEdgeDrawer/SwipeableEdgeDrawer.tsx

@@ -14,6 +14,7 @@ import Person from '@mui/icons-material/Person';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { COLORS } from '../../theme_2024';
 
 export const drawerBleeding = 88;
 
@@ -25,13 +26,6 @@ const Root = styled('div')(({ theme }) => ({
             : theme.palette.background.default
 }));
 
-const Puller = styled(Box)(({ theme }) => ({
-    width: '30%',
-    height: 4,
-    backgroundColor: theme.palette.mode === 'light' ? '#F6F5F5' : grey[900],
-    borderRadius: 3
-}));
-
 const DrawerHeader = styled(Box)(({ theme }) => ({
     padding: '24px',
     display: 'flex',
@@ -59,8 +53,8 @@ const FilterCounter = styled(Box)(({ theme }) => ({
     alignItems: 'center',
     justifyContent: 'center',
     margin: '0 4px',
-    color: '#F6F5F5',
-    backgroundColor: '#CE3B20'
+    color: COLORS.TEXT_PRIMARY,
+    backgroundColor: COLORS.ACCENT_BLUE
 }));
 
 const DrawerTitle = styled(Typography)(({ theme }) => ({
@@ -183,29 +177,31 @@ const SwipeableEdgeDrawer = (props: Props) => {
                     maxWidth: '1000px'
                 }}
             >
-                <DrawerHeader onClick={handleHeaderClick}>
-                    <Box
-                        style={{
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            width: '100%',
-                            maxWidth: '1000px'
-                        }}
-                    >
-                        {left}
-                        <Puller />
-                        {title}
-                        {filters}
-                        <Puller />
-                        <IconButton
-                            onClick={toggleDrawer(false)}
-                            aria-label={label}
+                {!disableSwipeToOpen ? (
+                    <DrawerHeader onClick={handleHeaderClick}>
+                        <Box
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                width: '100%',
+                                maxWidth: '1000px'
+                            }}
                         >
-                            {right}
-                        </IconButton>
-                    </Box>
-                </DrawerHeader>
+                            {left}
+                            {title}
+                            {filters}
+                            <IconButton
+                                onClick={toggleDrawer(false)}
+                                aria-label={label}
+                            >
+                                {right}
+                            </IconButton>
+                        </Box>
+                    </DrawerHeader>
+                ) : (
+                    ''
+                )}
                 {children}
             </SwipeableDrawer>
         </Root>