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

Cleaned up styles, squishy crab, better language switching

Browse source
This commit is contained in:
Ben Grant 2021-05-31 20:33:37 +10:00
parent bb4b6468b4
commit 17290562c8
16 changed files with 140 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

30
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -1,4 +1,3 @@
import { Link } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useState, useEffect } from 'react';
import { useTranslation, Trans } from 'react-i18next';
@ -10,7 +9,6 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
import relativeTime from 'dayjs/plugin/relativeTime';
import {
Center,
Footer,
TextField,
SelectField,
@ -18,12 +16,12 @@ import {
AvailabilityViewer,
AvailabilityEditor,
Error,
Logo,
} from 'components';
import { StyledMain } from '../Home/homeStyle';
import {
StyledMain,
Logo,
Title,
EventName,
EventDate,
LoginForm,
@ -37,9 +35,7 @@ import {
import api from 'services';
import { useSettingsStore, useRecentsStore, useLocaleUpdateStore } from 'stores';
import logo from 'res/logo.svg';
import timezones from 'res/timezones.json';
import localeImports from 'res/dayjs_locales';
dayjs.extend(utc);
dayjs.extend(timezone);
@ -51,10 +47,9 @@ const Event = (props) => {
const weekStart = useSettingsStore(state => state.weekStart);
const addRecent = useRecentsStore(state => state.addRecent);
const setLocale = useLocaleUpdateStore(state => state.setLocale);
const locale = useLocaleUpdateStore(state => state.locale);
const { t, i18n } = useTranslation(['common', 'event']);
const { t } = useTranslation(['common', 'event']);
const { register, handleSubmit } = useForm();
const { id } = props.match.params;
@ -77,15 +72,6 @@ const Event = (props) => {
const [copied, setCopied] = useState(null);
useEffect(() => {
if (Object.keys(localeImports).includes(i18n.language)) {
localeImports[i18n.language]().then(() => {
dayjs.locale(i18n.language);
setLocale(dayjs.locale());
});
}
}, [i18n.language, setLocale]);
useEffect(() => {
const fetchEvent = async () => {
try {
@ -290,13 +276,7 @@ const Event = (props) => {
return (
<>
<StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}>
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
</Link>
<Logo />
{(!!event || isLoading) ? (
<>

21
crabfit-frontend/src/pages/Event/eventStyle.ts
View file

@ -1,26 +1,5 @@
import styled from '@emotion/styled';
export const StyledMain = styled.div`
width: 600px;
margin: 20px auto;
max-width: calc(100% - 60px);
`;
export const Logo = styled.img`
width: 2.5rem;
margin-right: 16px;
`;
export const Title = styled.span`
display: block;
font-size: 2rem;
color: ${props => props.theme.primary};
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
line-height: 1em;
`;
export const EventName = styled.h1`
text-align: center;
font-weight: 800;

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

@ -7,21 +7,21 @@ import {
Center,
Footer,
AvailabilityViewer,
Logo,
} from 'components';
import {
StyledMain,
Logo,
Title,
StyledMain,
AboutSection,
P,
} from '../Home/homeStyle';
import {
Step,
FakeCalendar,
FakeTimeRange,
} from './helpStyle';
import logo from 'res/logo.svg';
const Help = () => {
const { push } = useHistory();
const { t } = useTranslation(['common', 'help']);
@ -33,13 +33,7 @@ const Help = () => {
return (
<>
<StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}>
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
</Link>
<Logo />
</StyledMain>
<StyledMain>

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

@ -1,37 +1,5 @@
import styled from '@emotion/styled';
export const StyledMain = styled.div`
width: 600px;
margin: 20px auto;
max-width: calc(100% - 60px);
`;
export const Logo = styled.img`
width: 2.5rem;
margin-right: 16px;
`;
export const Title = styled.span`
display: block;
font-size: 2rem;
color: ${props => props.theme.primary};
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
line-height: 1em;
`;
export const AboutSection = styled.section`
margin: 30px 0 0;
background-color: ${props => props.theme.primaryBackground};
padding: 20px 0;
`;
export const P = styled.p`
font-weight: 500;
line-height: 1.6em;
`;
export const Step = styled.h2`
text-decoration-color: ${props => props.theme.primary};
text-decoration-style: solid;

4
crabfit-frontend/src/pages/Home/Home.tsx
View file

@ -222,11 +222,11 @@ const Home = ({ offline }) => {
<h2>{t('home:about.name')}</h2>
<Stats>
<Stat>
<StatNumber>{stats.eventCount ?? '300+'}</StatNumber>
<StatNumber>{stats.eventCount ?? '350+'}</StatNumber>
<StatLabel>{t('home:about.events')}</StatLabel>
</Stat>
<Stat>
<StatNumber>{stats.personCount ?? '400+'}</StatNumber>
<StatNumber>{stats.personCount ?? '500+'}</StatNumber>
<StatLabel>{t('home:about.availabilities')}</StatLabel>
</Stat>
</Stats>

17
crabfit-frontend/src/pages/Privacy/Privacy.tsx
View file

@ -1,22 +1,19 @@
import { useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import { useTranslation, Trans } from 'react-i18next';
import {
Button,
Center,
Footer,
Logo,
} from 'components';
import {
StyledMain,
Logo,
Title,
AboutSection,
P,
} from '../Help/helpStyle';
import logo from 'res/logo.svg';
} from '../Home/homeStyle';
const Privacy = () => {
const { push } = useHistory();
@ -29,13 +26,7 @@ const Privacy = () => {
return (
<>
<StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}>
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
</Link>
<Logo />
</StyledMain>
<StyledMain>