scott/crabfit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Font optimise and settings on home page

Browse source
This commit is contained in:
Ben Grant 2021-03-11 01:27:01 +11:00
parent 291034ca4e
commit 26c4b6629d
17 changed files with 329 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

57
crabfit-frontend/src/components/Settings/Settings.tsx Normal file
View file

@ -0,0 +1,57 @@
import { useState } from 'react';
import { useTheme } from '@emotion/react';
import { ToggleField } from 'components';
import { useSettingsStore } from 'stores';
import {
OpenButton,
Modal,
Heading,
Cover,
} from './settingsStyle';
const Settings = () => {
const theme = useTheme();
const store = useSettingsStore();
const [isOpen, setIsOpen] = useState(false);
return (
<>
<OpenButton
isOpen={isOpen}
tabIndex="1"
type="button"
onClick={() => setIsOpen(!isOpen)} title="Options"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={theme.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</OpenButton>
<Cover isOpen={isOpen} onClick={() => setIsOpen(false)} />
<Modal isOpen={isOpen}>
<Heading>Options</Heading>
<ToggleField
label="Week starts on"
name="weekStart"
id="weekStart"
options={['Sunday', 'Monday']}
value={store.weekStart === 1 ? 'Monday' : 'Sunday'}
onChange={value => store.setWeekStart(value === 'Monday' ? 1 : 0)}
/>
<ToggleField
label="Time format"
name="timeFormat"
id="timeFormat"
options={['12h', '24h']}
value={store.timeFormat}
onChange={value => store.setTimeFormat(value)}
/>
</Modal>
</>
);
};
export default Settings;

79
crabfit-frontend/src/components/Settings/settingsStyle.ts Normal file
View file

@ -0,0 +1,79 @@
import styled from '@emotion/styled';
export const OpenButton = styled.button`
border: 0;
background: none;
height: 50px;
width: 50px;
cursor: pointer;
color: inherit;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 12px;
right: 12px;
z-index: 200;
border-radius: 100%;
transition: background-color .15s;
transition: transform .15s;
padding: 0;
&:focus {
outline: 0;
}
&:focus-visible {
background-color: ${props => props.theme.text}22;
}
${props => props.isOpen && `
transform: rotate(-45deg);
`}
`;
export const Cover = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: none;
${props => props.isOpen && `
display: block;
`}
`;
export const Modal = styled.div`
position: absolute;
top: 70px;
right: 12px;
background-color: ${props => props.theme.background};
border: 1px solid ${props => props.theme.primaryBackground};
z-index: 150;
padding: 10px 18px;
border-radius: 3px;
width: 250px;
box-sizing: border-box;
max-width: calc(100% - 20px);
box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);
pointer-events: none;
opacity: 0;
transform: translateY(-10px);
transition: opacity .15s, transform .15s;
${props => props.isOpen && `
pointer-events: all;
opacity: 1;
transform: translateY(0);
`}
`;
export const Heading = styled.span`
font-size: 1.5rem;
display: block;
margin: 6px 0;
line-height: 1em;
`;