Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/theme tuning #187

Merged
merged 2 commits into from
Aug 16, 2024
Merged

Feature/theme tuning #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
581ef27
Theme fixes
villepynttari Aug 16, 2024
f7a17fb
Order booking half and full hour buttons
villepynttari Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 0 additions & 23 deletions frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,29 +69,6 @@ const AvailableRoomList = (props: BookingListProps) => {

return (
<Box id="available-room-list">
<div
id="available-booking-typography"
style={{
display: 'flex',
alignItems: 'center',
gap: '20px'
}}
>
<Typography
variant="subtitle1"
textAlign="left"
marginLeft="24px"
>
Available rooms:
</Typography>
<TimePickerButton
aria-label="starting-booking-time"
onClick={() => setExpandTimePickerDrawer(true)}
value={startingTime}
>
{startingTime} <ArrowDropDownIcon />
</TimePickerButton>
</div>
<List>
{noAvailableRooms(rooms) ? (
<NoRoomsCard />
Expand Down
82 changes: 67 additions & 15 deletions frontend/src/components/BookingDrawer/BookingDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { Box, Button, Typography } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
Expand Down Expand Up @@ -267,7 +267,7 @@ export const SmallText = styled(Typography)(({ theme }) => ({
}));

export const Spacer = styled('div')(() => ({
padding: '8px'
padding: '4px'
}));

interface Props {
Expand All @@ -290,6 +290,57 @@ interface Props {
setStartingTime: (s: string) => void;
}

const FullAndHalfHourButtons = (props: {
onClickFull: () => void;
disabledFull: boolean;
nextFullHour: string;
onClickHalf: () => void;
disabledHalf: boolean;
nextHalfHour: string;
}) => {
const nextIsFull: boolean = useMemo(() => {
return parseInt(props.nextHalfHour?.split(':')?.at(1) || '0') < 30;
}, [props.nextHalfHour, props.nextFullHour]);

if (nextIsFull) {
return (
<>
<DrawerButtonSecondary
onClick={props.onClickFull}
disabled={props.disabledFull}
>
Until {props.nextFullHour}
</DrawerButtonSecondary>
<Spacer />
<DrawerButtonSecondary
onClick={props.onClickHalf}
disabled={props.disabledHalf}
>
Until {props.nextHalfHour}
</DrawerButtonSecondary>
</>
);
} else {
return (
<>
<DrawerButtonSecondary
onClick={props.onClickHalf}
disabled={props.disabledHalf}
>
Until {props.nextHalfHour}
</DrawerButtonSecondary>
<Spacer />
<DrawerButtonSecondary
onClick={props.onClickFull}
disabled={props.disabledFull}
>
Until {props.nextFullHour}
</DrawerButtonSecondary>
</>
);
}
};

const BookingDrawer = (props: Props) => {
const {
open,
Expand Down Expand Up @@ -506,26 +557,24 @@ const BookingDrawer = (props: Props) => {
</DrawerButtonPrimary>
</Row>
<Row>
<DrawerButtonSecondary
onClick={() => handleNextHalfHour()}
disabled={disableNextHalfHour()}
>
Until {nextHalfHour}
</DrawerButtonSecondary>
<Spacer />
<DrawerButtonSecondary
onClick={() => handleNextFullHour()}
disabled={disableNextFullHour()}
>
Until {nextFullHour}
</DrawerButtonSecondary>
<FullAndHalfHourButtons
onClickFull={() => handleNextFullHour()}
disabledFull={disableNextFullHour()}
nextFullHour={nextFullHour}
onClickHalf={() => handleNextHalfHour()}
disabledHalf={disableNextHalfHour()}
nextHalfHour={nextHalfHour}
/>
</Row>
<Row>
<DrawerButtonSecondary
aria-label="Book the whole free slot"
onClick={() =>
handleUntilNext(getTimeAvailableMinutes(room))
}
sx={{
margin: 0
}}
>
Book the whole free slot
</DrawerButtonSecondary>
Expand All @@ -535,6 +584,9 @@ const BookingDrawer = (props: Props) => {
aria-label="book now"
data-testid="BookNowButton"
onClick={bookRoom}
sx={{
marginTop: '16px'
}}
>
Book now
</DrawerButtonPrimary>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/BookingDrawer/DurationPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { styled, Typography } from '@mui/material';

const DurationButton = styled(ToggleButton)(() => ({
padding: '8px 16px'
padding: '4px 4px'
}));

const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({
minWidth: '100%',
padding: '6px 8px',
paddingTop: '8px',
marginBottom: '0px !important'
}));

Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/BookingView/FilteringDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import InputAdornment from '@mui/material/InputAdornment';
import styled from '@mui/styled-engine';
import { useUserSettings } from '../../contexts/UserSettingsContext';
import { COLORS, DEFAULT_STYLES } from '../../theme_2024';

export const Row = styled(Box)(({ theme }) => ({
display: 'flex',
Expand Down Expand Up @@ -72,11 +73,11 @@ const FilteringDrawer = (props: Props) => {
'& .MuiToggleButtonGroup-grouped': {
marginRight: '16px',
'&:not(:first-of-type)': {
border: 'solid',
borderWidth: 'thin',
borderRadius: '50px'
},
'&:first-of-type': {
backgroundColor: COLORS.ACCENT_PINK,
marginLeft: '0px',
borderRadius: '50px'
}
Expand Down
Binary file added frontend/src/fonts/StudioFeixenSans-Bold.otf
View file
Open in desktop
Binary file not shown.
Binary file added frontend/src/fonts/StudioFeixenSans-Book.otf
View file
Open in desktop
Binary file not shown.
Binary file added frontend/src/fonts/StudioFeixenSans-Regular.otf
View file
Open in desktop
Binary file not shown.
28 changes: 18 additions & 10 deletions frontend/src/theme_2024.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { DoNotDisturbOn, Schedule, WatchLater } 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';
import FeixenSansBold from './fonts/StudioFeixenVincit-Bold.ttf';
import FeixenSansRegular from './fonts/StudioFeixenVincit-Regular.ttf';

export const COLORS = {
ACCENT_PINK: '#FFCAFF',
Expand Down Expand Up @@ -48,7 +49,7 @@ export const UserIcon = styled(Person)(({ theme }) => ({
export const DEFAULT_STYLES = {
defaultSpacer: '24px',
smallerSpacer: '16px',
defaultFont: 'Studio Feixen Sans'
defaultFont: 'StudioFeixenSans-Bold'
};
const { defaultFont } = DEFAULT_STYLES;

Expand Down Expand Up @@ -131,6 +132,19 @@ declare module '@mui/material/styles' {
}
}

const FONT_FACE_BOLD = `
@font-face {
font-family: 'StudioFeixenSans-Bold';
src: url(${FeixenSansBold}) 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;
}
@font-face {
font-family: 'StudioFeixenSans-Regular';
src: url(${FeixenSansRegular}) 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;
}
`;

export const DEFAULT_THEME_2024: ThemeOptions = {
palette: {
// background: { default: '#f6f5f5' },
Expand Down Expand Up @@ -189,7 +203,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
},
h4: {
color: COLORS.TEXT_DIMGREY,
fontFamily: defaultFont,
fontFamily: 'StudioFeixenSans-Regular',
fontStyle: 'normal',
fontWeight: 2,
fontSize: '16px',
Expand All @@ -208,13 +222,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
},
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;
}
`
styleOverrides: FONT_FACE_BOLD
},
GarApp: {
styleOverrides: {
Expand Down