Feature/new theme

frontend/src/components/App.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 import { history } from '../services/axiosConfigurer';
-import { theme } from '../theme';
 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 { MobileBackground, DesktopBackground } from './images/svgImages';
+import { DesktopBackground, MobileBackground } from './images/svgImages';
 import { theme_2024 } from '../theme_2024';
-import ToggleButton from '@mui/material/ToggleButton';
+
 export const GarApp = styled(Divider)(() => ({}));
 
 const App = () => {

frontend/src/components/BookingView/BookingView.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Typography, Box, IconButton, Stack, Grid } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Box, IconButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import Person from '@mui/icons-material/Person';
 
 import { getRooms } from '../../services/roomService';
 import { deleteBooking, getBookings } from '../../services/bookingService';
-import { Room, Booking, Preferences } from '../../types';
+import { Booking, Preferences, Room } from '../../types';
 import CurrentBooking from '../CurrentBooking/CurrentBooking';
 import AvailableRoomList from '../AvailableRoomList/AvailableRoomList';
 import CenteredProgress from '../util/CenteredProgress';
@@ -22,13 +21,11 @@ import BusyRoomList from '../BusyRoomList/BusyRoomList';
 import useCreateNotification from '../../hooks/useCreateNotification';
 import {
     CenterAlignedStack,
-    COLORS,
     DEFAULT_STYLES,
     DefaultVerticalSpacer,
-    SmallerVerticalSpacer,
-    StretchingHorizontalSpacer
+    StretchingHorizontalSpacer,
+    UserIcon
 } from '../../theme_2024';
-import { PersonRounded } from '@mui/icons-material';
 
 const UPDATE_FREQUENCY = 30000;
 const GET_RESERVED = true;
@@ -96,21 +93,7 @@ const RoomsPageHeaderWithUserIcon = (props: { onClick: () => void }) => {
             </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
-                }}
-            />
+            <UserIcon />
         </CenterAlignedStack>
     );
 };

frontend/src/components/BuildingList/BuildingList.tsx

@@ -6,16 +6,21 @@ import {
     CardContent,
     FormGroup,
     Stack,
+    styled,
     ToggleButton,
     ToggleButtonGroup,
-    Typography,
-    styled
+    Typography
 } from '@mui/material';
 
 import Box from '@mui/material/Box';
 import { GpsFixed } from '@mui/icons-material';
 import LocationOffIcon from '@mui/icons-material/LocationOff';
 import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
+import {
+    CenterAlignedStack,
+    StretchingHorizontalSpacer,
+    UserIcon
+} from '../../theme_2024';
 
 type BuildingSelectProps = {
     selectedBuildingId: string;
@@ -42,6 +47,10 @@ const EndBox = styled(Box)(({ theme }) => ({
     alignItems: 'center'
 }));
 
+const handleProfileMenuOpen = (e: React.MouseEvent<HTMLElement>) => {
+    // TODO villep NOT IMPLEMENTED
+};
+
 const BuildingList = (props: BuildingSelectProps) => {
     const { setSelectedBuildingId, buildings, handlePreferencesSubmit, name } =
         props;
@@ -88,14 +97,13 @@ const BuildingList = (props: BuildingSelectProps) => {
                         <CardContent>
                             <GridContainer>
                                 <Row>
-                                    <Typography variant="h3">
+                                    <Typography variant="h2">
                                         {building.name}
                                     </Typography>
 
                                     <EndBox>
                                         {building.distance ? (
                                             <>
-                                                <GpsFixed></GpsFixed>
                                                 <Typography
                                                     variant="subtitle1"
                                                     align="right"
@@ -140,18 +148,18 @@ const BuildingList = (props: BuildingSelectProps) => {
                     }}
                 >
                     <FormGroup sx={{ alignItems: 'left' }}>
-                        <Typography
-                            textAlign="left"
-                            variant="subtitle1"
-                            color={'#ce3b20'}
-                            paddingTop="8px"
-                            paddingBottom="8px"
-                        >
-                            Welcome, {name}
-                        </Typography>
-                        <Typography textAlign="left" variant="h2">
-                            Choose office
+                        <Typography textAlign="left" variant="h5">
+                            Welcome, {name}!
                         </Typography>
+
+                        <CenterAlignedStack direction={'row'}>
+                            <Typography textAlign="left" variant="h1">
+                                offices
+                            </Typography>
+                            <StretchingHorizontalSpacer />
+                            {/*TODO villep: NOT IMPLEMENTED*/}
+                            <UserIcon />
+                        </CenterAlignedStack>
                         <Typography
                             textAlign="left"
                             variant="subtitle1"

frontend/src/components/ChooseOfficeView/ChooseOfficeView.test.tsx

@@ -104,7 +104,7 @@ describe('ChooseOfficeView', () => {
             );
         });
 
-        expect(screen.getByText('Welcome, testname')).toBeTruthy();
+        expect(screen.getByText('Welcome, testname!')).toBeTruthy();
     });
 
     it('updates preferences when clicking a building name', async () => {

frontend/src/theme_2024.ts

@@ -15,6 +15,8 @@ import { GarApp } from './components/App';
 import { DoNotDisturbOn } from '@mui/icons-material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { RoomCardReservationStatusIndicator } from './components/RoomCard/RoomCard';
+import Person from '@mui/icons-material/Person';
+import FeixenSansWoff2 from './fonts/StudioFeixenVincit-Regular.woff2';
 
 export const COLORS = {
     ACCENT_PINK: '#FFCAFF',
@@ -29,10 +31,26 @@ export const COLORS = {
     ALTERNATE: '#FBFBF6'
 };
 
+export const UserIcon = styled(Person)(({ theme }) => ({
+    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
+}));
+
 export const DEFAULT_STYLES = {
     defaultSpacer: '24px',
-    smallerSpacer: '16px'
+    smallerSpacer: '16px',
+    defaultFont: 'Studio Feixen Sans'
 };
+const { defaultFont } = DEFAULT_STYLES;
 
 export const DoNotDisturb = styled(DoNotDisturbOn)(({ theme }) => ({
     color: COLORS.ACCENT_RED
@@ -124,7 +142,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
     typography: {
         h1: {
             color: COLORS.TEXT_PRIMARY,
-            fontFamily: 'Studio Feixen Sans',
+            fontFamily: defaultFont,
             fontSize: '36px',
             fontStyle: 'normal',
             fontWeight: 4,
@@ -133,30 +151,30 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
         },
         h2: {
             color: COLORS.TEXT_PRIMARY,
-            fontFamily: 'Studio Feixen Sans',
+            fontFamily: defaultFont,
             fontStyle: 'normal',
             fontWeight: 4,
             fontSize: '24px',
             lineHeight: 'normal'
         },
         h3: {
             color: COLORS.TEXT_PRIMARY,
-            fontFamily: 'Studio Feixen Sans',
+            fontFamily: defaultFont,
             fontStyle: 'normal',
             fontWeight: 2,
             fontSize: '16px',
             lineHeight: 'normal'
         },
         body1: {
-            fontFamily: 'Studio Feixen Sans',
+            fontFamily: defaultFont,
             fontStyle: 'normal',
             fontWeight: 4,
             fontSize: '12px',
             lineHeight: 'normal'
         },
         subtitle1: {
             color: COLORS.TEXT_PRIMARY,
-            fontFamily: 'Studio Feixen Sans',
+            fontFamily: defaultFont,
             fontStyle: 'normal',
             fontWeight: 'bold',
             fontSize: '12px',
@@ -165,18 +183,33 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
         },
         h4: {
             color: COLORS.TEXT_DIMGREY,
-            fontFamily: 'Studio Feixen Sans',
+            fontFamily: defaultFont,
             fontStyle: 'normal',
             fontWeight: 2,
             fontSize: '16px',
             lineHeight: 'normal'
         },
-        h5: { color: COLORS.TEXT_PRIMARY, fontWeight: 'bold' }
+        h5: {
+            color: COLORS.TEXT_PRIMARY,
+            fontWeight: 'bold',
+            fontSize: '12px',
+
+            textTransform: 'uppercase'
+        }
     },
     zIndex: {
         snackbar: 1
     },
     components: {
+        MuiCssBaseline: {
+            styleOverrides: `
+        @font-face {
+          font-family: 'Studio Feixen Sans';
+          src: local('Studio Feixen Sans'), local('Studio Feixen Sans'), url(${FeixenSansWoff2}) format('woff2');
+          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
+        }
+      `
+        },
         GarApp: {
             styleOverrides: {
                 root: {
@@ -192,7 +225,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
         MuiToggleButton: {
             styleOverrides: {
                 root: {
-                    fontFamily: 'Studio Feixen Sans',
+                    fontFamily: defaultFont,
                     textTransform: 'none',
                     whiteSpace: 'nowrap',