Cleaned up styles, squishy crab, better language switching

crabfit-frontend/src/pages/Help/Help.tsx

@@ -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>

crabfit-frontend/src/pages/Help/helpStyle.ts

@@ -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;