diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 6cc94704..55d33600 100644
--- a/frontend/src/components/App.tsx
+++ b/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 = () => {
diff --git a/frontend/src/components/BookingView/BookingView.tsx b/frontend/src/components/BookingView/BookingView.tsx
index 105c618a..de63439e 100644
--- a/frontend/src/components/BookingView/BookingView.tsx
+++ b/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 }) => {
{/*// TODO: Button not implemented*/}
-
+
);
};
diff --git a/frontend/src/components/BuildingList/BuildingList.tsx b/frontend/src/components/BuildingList/BuildingList.tsx
index abee9b66..29b2c7e2 100644
--- a/frontend/src/components/BuildingList/BuildingList.tsx
+++ b/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) => {
+ // TODO villep NOT IMPLEMENTED
+};
+
const BuildingList = (props: BuildingSelectProps) => {
const { setSelectedBuildingId, buildings, handlePreferencesSubmit, name } =
props;
@@ -88,14 +97,13 @@ const BuildingList = (props: BuildingSelectProps) => {
-
+
{building.name}
{building.distance ? (
<>
-
{
}}
>
-
- Welcome, {name}
-
-
- Choose office
+
+ Welcome, {name}!
+
+
+
+ offices
+
+
+ {/*TODO villep: NOT IMPLEMENTED*/}
+
+
{
);
});
- expect(screen.getByText('Welcome, testname')).toBeTruthy();
+ expect(screen.getByText('Welcome, testname!')).toBeTruthy();
});
it('updates preferences when clicking a building name', async () => {
diff --git a/frontend/src/fonts/StudioFeixenVincit-Bold.ttf b/frontend/src/fonts/StudioFeixenVincit-Bold.ttf
new file mode 100644
index 00000000..04753236
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Bold.ttf differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Bold.woff b/frontend/src/fonts/StudioFeixenVincit-Bold.woff
new file mode 100644
index 00000000..b87cc88e
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Bold.woff differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Bold.woff2 b/frontend/src/fonts/StudioFeixenVincit-Bold.woff2
new file mode 100644
index 00000000..a592d747
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Bold.woff2 differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Display.ttf b/frontend/src/fonts/StudioFeixenVincit-Display.ttf
new file mode 100644
index 00000000..8d74418f
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Display.ttf differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Display.woff b/frontend/src/fonts/StudioFeixenVincit-Display.woff
new file mode 100644
index 00000000..7a20f1e6
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Display.woff differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Display.woff2 b/frontend/src/fonts/StudioFeixenVincit-Display.woff2
new file mode 100644
index 00000000..86f08128
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Display.woff2 differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Regular.ttf b/frontend/src/fonts/StudioFeixenVincit-Regular.ttf
new file mode 100644
index 00000000..52d77044
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Regular.ttf differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Regular.woff b/frontend/src/fonts/StudioFeixenVincit-Regular.woff
new file mode 100644
index 00000000..641a805e
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Regular.woff differ
diff --git a/frontend/src/fonts/StudioFeixenVincit-Regular.woff2 b/frontend/src/fonts/StudioFeixenVincit-Regular.woff2
new file mode 100644
index 00000000..51578ec6
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenVincit-Regular.woff2 differ
diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
index 605ee5fc..51d87554 100644
--- a/frontend/src/theme_2024.ts
+++ b/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,7 +151,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
},
h2: {
color: COLORS.TEXT_PRIMARY,
- fontFamily: 'Studio Feixen Sans',
+ fontFamily: defaultFont,
fontStyle: 'normal',
fontWeight: 4,
fontSize: '24px',
@@ -141,14 +159,14 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
},
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',
@@ -156,7 +174,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
},
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',