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

Tabs -> spaces

Browse source 
I have become my own worst enemy
This commit is contained in:
Ben Grant 2021-06-19 12:04:52 +10:00
parent e94559c4f6
commit fdb7f0ef67
49 changed files with 2424 additions and 2424 deletions
Download patch file Download diff file Expand all files Collapse all files

42
crabfit-frontend/src/pages/Help/Help.tsx
View file

@ -3,17 +3,17 @@ import { Link, useHistory } from 'react-router-dom';
import { useTranslation, Trans } from 'react-i18next';
import {
Button,
Center,
Footer,
Button,
Center,
Footer,
AvailabilityViewer,
Logo,
} from 'components';
import {
StyledMain,
AboutSection,
P,
AboutSection,
P,
} from '../Home/homeStyle';
import {
@ -26,18 +26,18 @@ const Help = () => {
const { push } = useHistory();
const { t } = useTranslation(['common', 'help']);
useEffect(() => {
document.title = t('help:name');
}, [t]);
useEffect(() => {
document.title = t('help:name');
}, [t]);
return (
<>
<StyledMain>
return (
<>
<StyledMain>
<Logo />
</StyledMain>
<StyledMain>
<h1>{t('help:name')}</h1>
<h1>{t('help:name')}</h1>
<P>{t('help:p1')}</P>
<P>{t('help:p2')}</P>
@ -80,17 +80,17 @@ const Help = () => {
min={0}
max={5}
/>
</StyledMain>
</StyledMain>
<AboutSection id="about">
<StyledMain>
<Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
</StyledMain>
</AboutSection>
<AboutSection id="about">
<StyledMain>
<Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
</StyledMain>
</AboutSection>
<Footer />
</>
);
<Footer />
</>
);
};
export default Help;

114
crabfit-frontend/src/pages/Help/helpStyle.ts
View file

@ -1,43 +1,43 @@
import styled from '@emotion/styled';
export const Step = styled.h2`
text-decoration-color: ${props => props.theme.primary};
text-decoration-color: ${props => props.theme.primary};
text-decoration-style: solid;
text-decoration-line: underline;
margin-top: 30px;
`;
export const FakeCalendar = styled.div`
user-select: none;
user-select: none;
& div {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 2px;
grid-template-columns: repeat(7, 1fr);
grid-gap: 2px;
}
& .days span {
display: flex;
align-items: center;
justify-content: center;
padding: 3px 0;
font-weight: bold;
user-select: none;
opacity: .7;
align-items: center;
justify-content: center;
padding: 3px 0;
font-weight: bold;
user-select: none;
opacity: .7;
@media (max-width: 350px) {
font-size: 12px;
}
font-size: 12px;
}
}
& .dates span {
background-color: ${props => props.theme.primaryBackground};
border: 1px solid ${props => props.theme.primary};
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
border: 1px solid ${props => props.theme.primary};
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
&.selected {
color: #FFF;
background-color: ${props => props.theme.primary};
background-color: ${props => props.theme.primary};
}
}
& .dates span:first-of-type {
@ -51,45 +51,45 @@ export const FakeCalendar = styled.div`
`;
export const FakeTimeRange = styled.div`
user-select: none;
user-select: none;
background-color: ${props => props.theme.primaryBackground};
border: 1px solid ${props => props.theme.primary};
border-radius: 3px;
height: 50px;
position: relative;
margin: 38px 6px 18px;
border: 1px solid ${props => props.theme.primary};
border-radius: 3px;
height: 50px;
position: relative;
margin: 38px 6px 18px;
& div {
height: calc(100% + 20px);
width: 20px;
border: 1px solid ${props => props.theme.primary};
background-color: ${props => props.theme.primaryLight};
border-radius: 3px;
position: absolute;
top: -10px;
width: 20px;
border: 1px solid ${props => props.theme.primary};
background-color: ${props => props.theme.primaryLight};
border-radius: 3px;
position: absolute;
top: -10px;
&:after {
content: '|||';
font-size: 8px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${props => props.theme.primaryDark};
}
&:after {
content: '|||';
font-size: 8px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${props => props.theme.primaryDark};
}
&:before {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 8px);
text-align: center;
left: 50%;
transform: translateX(-50%);
}
&:before {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 8px);
text-align: center;
left: 50%;
transform: translateX(-50%);
}
}
& .start {
left: calc(${11 * 4.1666666666666666}% - 11px);
@ -100,11 +100,11 @@ export const FakeTimeRange = styled.div`
&:before {
content: '';
position: absolute;
height: 100%;
left: ${11 * 4.1666666666666666}%;
right: calc(100% - ${17 * 4.1666666666666666}%);
top: 0;
background-color: ${props => props.theme.primary};
border-radius: 2px;
height: 100%;
left: ${11 * 4.1666666666666666}%;
right: calc(100% - ${17 * 4.1666666666666666}%);
top: 0;
background-color: ${props => props.theme.primary};
border-radius: 2px;
}
`;