diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx index 744e0fb..dca20a4 100644 --- a/crabfit-frontend/src/App.tsx +++ b/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 = () => { }> + )} /> + ( + }> + + )} /> ( }> diff --git a/crabfit-frontend/src/components/Legend/legendStyle.ts b/crabfit-frontend/src/components/Legend/legendStyle.ts index 57469ee..3d53896 100644 --- a/crabfit-frontend/src/components/Legend/legendStyle.ts +++ b/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%; diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index 083c8c3..538512e 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -177,7 +177,7 @@ const Create = ({ offline }) => {

Recently visited

{recentsStore.recents.map(event => ( - + {event.name} Created {dayjs.unix(event.created).format('D MMMM, YYYY')} diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx new file mode 100644 index 0000000..291bdf7 --- /dev/null +++ b/crabfit-frontend/src/pages/Help/Help.tsx @@ -0,0 +1,110 @@ +import { useEffect, useState } from 'react'; +import { Link, useHistory } from 'react-router-dom'; + +import { + Button, + Center, + Donate, + AvailabilityViewer, + Legend, +} from 'components'; + +import { + StyledMain, + Logo, + Title, + AboutSection, + Footer, + P, + Step, + FakeCalendar, + FakeTimeRange, +} from './helpStyle'; + +import logo from 'res/logo.svg'; + +const Help = () => { + const { push } = useHistory(); + + useEffect(() => { + document.title = 'How to Crab Fit'; + }, []); + + return ( + <> + + +
+ + CRAB FIT +
+
Create your own
+ + + + +

How to Crab Fit

+

Crab Fit is a tool that helps you when planning events with friends or coworkers. You just create an event, enter your availability, send it out, and see when everyone is free!

+

See below for detailed steps of how to Crab Fit your event.

+ + Step 1 +

Use the form at crab.fit to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.

+

For example, we'll use "Jenny's Birthday Lunch". Jenny wants her birthday lunch to happen on the same week as her birthday, the 15th of April, but she knows that not all of her friends are available on the 15th. She also doesn't want to do it on the weekend.

+ +
SunMonTueWedThuFriSat
+
11121314151617
+ +

Jenny also knows that since it's a lunch event, it can't start before 11am or go any later than 5pm.

+ +
+
+ + + Step 2 +

Enter your availability for the event you just created.

+

In our example, Jenny now puts in her availability for her birthday lunch. She is free all week, except after 3pm on Tuesday and Wednesday, and before 1pm on Friday.

+ + + Step 3 +

Send the link to everyone you want to come.

+

After Jenny has sent the link to her friends and waited for them to also fill out their availabilities, she can now easily see them all on the heatmap below and choose the darkest area for a time that suits everyone!

+

In this example, 1pm to 3pm on Friday the 16th works for all Jenny's friends.

+ + + + + + +
+ + + +
+ Thank you for using Crab Fit. If you like it, consider donating. + +
+ + ); +}; + +export default Help; diff --git a/crabfit-frontend/src/pages/Help/helpStyle.ts b/crabfit-frontend/src/pages/Help/helpStyle.ts new file mode 100644 index 0000000..2b45abe --- /dev/null +++ b/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; + } +`; diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 59c1510..c20da01 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/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 }) => { Availabilities entered -

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.

+

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.
Learn more about how to Crab Fit.

{/* eslint-disable-next-line */} +

Create a lot of Crab Fits? Get the Chrome extension or Firefox extension for your browser!

+ {/* eslint-disable-next-line */}

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository.

 diff --git a/crabfit-frontend/src/pages/index.ts b/crabfit-frontend/src/pages/index.ts index a4f9c82..6fe10e6 100644 --- a/crabfit-frontend/src/pages/index.ts +++ b/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';