Merge pull request #5 from GRA0007/dev

How to page

README.md

@@ -11,6 +11,9 @@ Align your schedules to find the perfect time that works for everyone.
 3. Run `node index.js` in the backend folder to start the API.
 4. Run `yarn start` in the frontend folder to start the front end.
 
+### Browser extension
+The browser extension in `crabfit-browser-extension` can be tested by first running the frontend, and changing the iframe url in the extension's `popup.html` to match the local Crab Fit. Then it can be loaded as an unpacked extension in Chrome to test.
+
 ## Deploy
 
 ### Frontend
@@ -20,3 +23,6 @@ Align your schedules to find the perfect time that works for everyone.
 ### Backend
 1. Deploy the backend `cd crabfit-backend && gcloud app deploy --project=crabfit`
 2. Deploy the endpoints service `cd crabfit-backend && gcloud endpoints services deploy swagger.yaml`
+
+### Browser extension
+Compress everything inside the `crabfit-browser-extension` folder and use that zip to deploy using Chrome web store and Mozilla Add-on store.

crabfit-frontend/src/App.tsx

@@ -16,6 +16,7 @@ const EGG_PATTERN = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft'
 const Home = lazy(() => import('pages/Home/Home'));
 const Event = lazy(() => import('pages/Event/Event'));
 const Create = lazy(() => import('pages/Create/Create'));
+const Help = lazy(() => import('pages/Help/Help'));
 
 const App = () => {
   const colortheme = useSettingsStore(state => state.theme);
@@ -114,6 +115,11 @@ const App = () => {
             <Suspense fallback={<Loading />}>
               <Home offline={offline} {...props} />
             </Suspense>
+          )} />
+					<Route path="/how-to" exact render={props => (
+            <Suspense fallback={<Loading />}>
+              <Help {...props} />
+            </Suspense>
           )} />
 					<Route path="/create" exact render={props => (
             <Suspense fallback={<Loading />}>

crabfit-frontend/src/components/Legend/legendStyle.ts

@@ -28,7 +28,7 @@ export const Bar = styled.div`
 	border-radius: 3px;
 	overflow: hidden;
 	margin: 0 8px;
-	border: 1px solid ${props => props.theme.primaryLight};
+	border: 1px solid ${props => props.theme.text};
 
 	@media (max-width: 400px) {
 		width: 100%;

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

@@ -177,7 +177,7 @@ const Create = ({ offline }) => {
               <StyledMain>
                 <h2>Recently visited</h2>
                 {recentsStore.recents.map(event => (
-                  <Recent href={`/${event.id}`} key={event.id}>
+                  <Recent href={`/${event.id}`} target="_blank" key={event.id}>
                     <span className="name">{event.name}</span>
                     <span className="date">Created {dayjs.unix(event.created).format('D MMMM, YYYY')}</span>
                   </Recent>

crabfit-frontend/src/pages/Create/createStyle.ts

@@ -28,7 +28,7 @@ export const TitleLarge = styled.h1`
 	color: ${props => props.theme.primary};
 	font-family: 'Molot', sans-serif;
 	font-weight: 400;
-	text-shadow: 0 4px 0 ${props => props.theme.primaryDark};
+	text-shadow: 0 3px 0 ${props => props.theme.primaryDark};
 	line-height: 1em;
 `;
 

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

@@ -0,0 +1,144 @@
+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 Footer = styled.footer`
+	width: 600px;
+	margin: 20px auto;
+	max-width: calc(100% - 60px);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+
+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;
+  text-decoration-line: underline;
+  margin-top: 30px;
+`;
+
+export const FakeCalendar = styled.div`
+	user-select: none;
+
+  & div {
+    display: grid;
+  	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;
+    @media (max-width: 350px) {
+  		font-size: 12px;
+  	}
+  }
+  & .dates span {
+    background-color: ${props => props.theme.primaryBackground};
+  	border: 1px solid ${props => props.theme.primaryLight};
+  	display: flex;
+  	align-items: center;
+  	justify-content: center;
+  	padding: 10px 0;
+
+    &.selected {
+      color: #FFF;
+  		background-color: ${props => props.theme.primary};
+  		border-color: ${props => props.theme.primary};
+    }
+  }
+`;
+
+export const FakeTimeRange = styled.div`
+	user-select: none;
+  background-color: ${props => props.theme.primaryBackground};
+	border: 1px solid ${props => props.theme.primaryLight};
+	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;
+
+  	&: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%);
+  	}
+  }
+  & .start {
+    left: calc(${11 * 4.1666666666666666}% - 11px);
+  }
+  & .end {
+    left: calc(${17 * 4.1666666666666666}% - 11px);
+  }
+  &: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;
+  }
+`;

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 
 import dayjs from 'dayjs';
@@ -242,8 +242,10 @@ const Home = ({ offline }) => {
 							<StatLabel>Availabilities entered</StatLabel>
 						</Stat>
 					</Stats>
-					<P>Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.</P>
+					<P>Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<br /><Link to="/how-to">Learn more about how to Crab Fit</Link>.</P>
 					{/* eslint-disable-next-line */}
+					<P>Create a lot of Crab Fits? Get the <a href="https://chrome.google.com/webstore/detail/crab-fit/pnafiibmjbiljofcpjlbonpgdofjhhkj" target="_blank">Chrome extension</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/crab-fit/" target="_blank">Firefox extension</a> for your browser!</P>
+          {/* eslint-disable-next-line */}
 					<P>Created by <a href="https://bengrant.dev" target="_blank">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</P>
 					<P>The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer">repository</a>.</P>
 				</StyledMain>

crabfit-frontend/src/pages/index.ts

@@ -1,3 +1,4 @@
 export { default as Home } from './Home/Home';
 export { default as Event } from './Event/Event';
 export { default as Create } from './Create/Create';
+export { default as Help } from './Help/Help';