Added user icon to room lising

Vincit · Jun 26, 2024 · b596ab7 · b596ab7
1 parent 768a810
commit b596ab7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 22 deletions.
diff --git a/frontend/src/components/BookingView/BookingView.tsx b/frontend/src/components/BookingView/BookingView.tsx
@@ -22,10 +22,13 @@ import BusyRoomList from '../BusyRoomList/BusyRoomList';
 import useCreateNotification from '../../hooks/useCreateNotification';
 import {
     CenterAlignedStack,
+    COLORS,
     DEFAULT_STYLES,
-    DefaultHorizontalSpacer,
-    SmallerHorizontalSpacer
+    DefaultVerticalSpacer,
+    SmallerVerticalSpacer,
+    StretchingHorizontalSpacer
 } from '../../theme_2024';
+import { PersonRounded } from '@mui/icons-material';
 
 const UPDATE_FREQUENCY = 30000;
 const GET_RESERVED = true;
@@ -68,6 +71,50 @@ type BookingViewProps = {
     name: String | undefined;
 };
 
+const RoomsPageHeaderWithUserIcon = (props: { onClick: () => void }) => {
+    return (
+        <CenterAlignedStack
+            direction={'row'}
+            sx={{
+                width: '100%'
+            }}
+        >
+            <Typography variant={'h1'}>
+                ROOMS
+                <IconButton
+                    aria-label="profile menu"
+                    size="small"
+                    sx={{
+                        bgcolor: 'primary.main',
+                        color: '#fff',
+                        position: 'absolute',
+                        right: 50
+                    }}
+                    onClick={props.onClick}
+                    style={{ cursor: 'pointer' }}
+                ></IconButton>
+            </Typography>
+            <StretchingHorizontalSpacer />
+            {/*// TODO: Button not implemented*/}
+            <Person
+                sx={{
+                    display: 'flex',
+                    width: '32px',
+                    height: ' 32px',
+                    padding: '4.5px 4px 3.5px 4px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    fontSize: '24px',
+                    fontWeight: '400',
+                    border: '1px solid',
+                    borderRadius: '50px',
+                    borderColor: COLORS.ACCENT_PINK
+                }}
+            />
+        </CenterAlignedStack>
+    );
+};
+
 function BookingView(props: BookingViewProps) {
     const { preferences, open, toggle, name, setPreferences } = props;
 
@@ -425,7 +472,7 @@ function BookingView(props: BookingViewProps) {
                     expandedFeaturesAll={expandedFeaturesAll}
                     setExpandedFeaturesAll={setExpandedFeaturesAll}
                 />
-                <DefaultHorizontalSpacer />
+                <DefaultVerticalSpacer />
                 <CenterAlignedStack
                     direction={'row'}
                     onClick={moveToChooseOfficePage}
@@ -447,23 +494,7 @@ function BookingView(props: BookingViewProps) {
                     </Box>
                 </CenterAlignedStack>
                 <RowCentered>
-                    <Typography variant={'h1'}>
-                        ROOMS
-                        <IconButton
-                            aria-label="profile menu"
-                            size="small"
-                            sx={{
-                                bgcolor: 'primary.main',
-                                color: '#fff',
-                                position: 'absolute',
-                                right: 50
-                            }}
-                            onClick={openSettingsDrawer}
-                            style={{ cursor: 'pointer' }}
-                        >
-                            <Person />
-                        </IconButton>
-                    </Typography>
+                    <RoomsPageHeaderWithUserIcon onClick={openSettingsDrawer} />
                 </RowCentered>
             </Box>
             <DurationPicker

diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
@@ -46,15 +46,22 @@ export const CenterAlignedStack = styled(Stack)(({ theme }) => ({
     gap: 1
 }));
 
-export const DefaultHorizontalSpacer = styled(Container)(({ theme }) => ({
+export const DefaultVerticalSpacer = styled(Container)(({ theme }) => ({
     height: DEFAULT_STYLES.defaultSpacer,
     minHeight: DEFAULT_STYLES.defaultSpacer
 }));
-export const SmallerHorizontalSpacer = styled(Container)(({ theme }) => ({
+export const SmallerVerticalSpacer = styled(Container)(({ theme }) => ({
     height: DEFAULT_STYLES.smallerSpacer,
     minHeight: DEFAULT_STYLES.smallerSpacer
 }));
 
+export const StretchingHorizontalSpacer = styled(Container)(({ theme }) => ({
+    alignSelf: 'stretch',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    display: 'flex'
+}));
+
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
         dashed: true;