Skip to content

Commit

Permalink
Merge pull request #187 from Vincit/feature/theme-tuning
Browse files Browse the repository at this point in the history 
Feature/theme tuning
  • Loading branch information
@villepynttari
villepynttari authored Aug 16, 2024
2 parents 76e9e93 + f7a17fb commit 05d1dac
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 51 deletions.
23 changes: 0 additions & 23 deletions frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
View file
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
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
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
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
Binary file not shown.
Binary file added frontend/src/fonts/StudioFeixenSans-Book.otf
View file
Binary file not shown.
Binary file added frontend/src/fonts/StudioFeixenSans-Regular.otf
View file
Binary file not shown.
28 changes: 18 additions & 10 deletions frontend/src/theme_2024.ts
View file
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

0 comments on commit 05d1dac

Please sign in to comment.