About page (#16)

* WIP about

* WIP wanna help

* solved tests regression issues

* WIP working on app requests

* renamed contactUs to contact

* finished about page

package.json

@@ -30,7 +30,7 @@
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.4",
     "csurf": "^1.11.0",
-    "dotenv": "^7.0.0",
+    "dotenv": "^8.2.0",
     "express": "4.16.4",
     "express-list-routes": "^0.1.4",
     "express-rate-limit": "^5.1.3",
@@ -59,7 +59,6 @@
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.2",
     "swagger-ui-express": "^4.1.4",
-    "tailwindcss": "^1.8.10",
     "use-onclickoutside": "^0.3.1"
   },
   "devDependencies": {
@@ -72,6 +71,7 @@
     "@types/bcrypt": "^3.0.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/csurf": "^1.9.36",
+    "@types/dotenv": "^8.2.0",
     "@types/email-validator": "^1.0.6",
     "@types/express-rate-limit": "^5.1.0",
     "@types/helmet": "^0.0.48",

src/client/api/index.ts

@@ -10,7 +10,7 @@ export const sendApiRequest: typeof fetch = async (url, options?) => {
   return fetch(url, { ...options, headers });
 };
 
-export async function contactUs(name: string, email: string, message: string) {
+export async function contact(name: string, email: string, message: string) {
   await fetch("/api/contact", {
     method: "POST",
     body: JSON.stringify({

src/client/components/Buttons.stories.tsx

@@ -3,11 +3,11 @@ import { Meta } from "@storybook/react";
 
 import { PrimaryButton, SecondaryButton } from "./Buttons";
 import { FacebookButton, GoogleButton } from "./SocialButtons";
-import Input from "./TextInput";
+import { TextInput } from "./TextInput";
 
 export default {
   title: "Buttons",
-  component: Input,
+  component: TextInput,
 } as Meta;
 
 const Template = (args: any) => <PrimaryButton {...args} />;
@@ -25,15 +25,15 @@ Secondary.args = {
 export const Facebook = (args: any) => <FacebookButton {...args} />;
 export const Google = (args: any) => <GoogleButton {...args} />;
 
-export const InputField = (args: any) => <Input type="text" {...args} />;
+export const InputField = (args: any) => <TextInput type="text" {...args} />;
 
 export const Inline = () => (
   <div style={{ display: "flex" }}>
     <PrimaryButton>Primary Button</PrimaryButton>
     <SecondaryButton>Secondary Button</SecondaryButton>
     <FacebookButton />
     <GoogleButton />
-    <Input type="text" />
+    <TextInput type="text" />
   </div>
 );
 
@@ -47,6 +47,6 @@ export const Vertical = () => (
     <a>
       <GoogleButton />
     </a>
-    <Input type="text" />
+    <TextInput type="text" />
   </div>
 );

src/client/components/Buttons.tsx

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 
 const baseStyle = `
-  display: block;
   width:100%;
   cursor:pointer;
   color: #E9E5E5;

src/client/components/FormLabel.tsx

@@ -2,6 +2,6 @@ import styled from "@emotion/styled";
 
 export default styled.label`
   margin: 15px 0 5px 0;
-  color: #9d8b8b;
+  color: #d1b4b4;
   display: block;
 `;

src/client/components/TextInput.tsx

@@ -1,10 +1,24 @@
 import styled from "@emotion/styled";
 
-export default styled.input`
-  padding: 9px;
-  border: solid 1px #423737;
+const shared = `
+  border: solid 1px #463d3d;
+  background: #332e2e;
   color: #e9e5e5;
-  background: #261d1d;
-  border-radius: 5px;
+  border-radius: 3px;
   width: 100%;
+
+  ::placeholder {
+    color:#806f6f;
+  }
+`;
+
+export const TextInput = styled.input`
+  ${shared}
+  padding: 9px;
+`;
+
+export const TextArea = styled.textarea`
+  ${shared}
+  display: block;
+  padding: 8px 10px;
 `;

src/client/pages/About.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import ContactForm from "./contact/ContactForm";
+import { getTitle } from "@shared/utils";
+
+export default () => {
+  const [messageSent, setMessageSent] = useState(false);
+  useEffect(() => {
+    document.title = getTitle("/contact");
+  }, []);
+
+  return (
+    <Container>
+      <InnerContainer>
+        <Title>About</Title>
+        <p>There’s a line I read somewhere:</p>
+        <p>
+          “Keyboard shortcuts make the UI disappear until all that’s left is
+          pure creation” It stuck.
+        </p>
+        <p>
+          KeyboardNinja.me is my geeky attempt to document all those shortcuts,
+          display them beautifully and help you remember and use them.
+          <br /> You can save your favorite shortcuts for future reference,
+          share them with friends and see what others are using.
+        </p>
+        <Title>Missing Your App?</Title>
+        <p style={{ marginBottom: 0 }}>
+          Wanna see your favorite app in here? missing a feature? found a bug?
+          <br />
+          <br />
+          Let me know:
+        </p>
+        {!messageSent ? (
+          <ContactForm onSend={() => setMessageSent(true)} />
+        ) : (
+          <div>
+            <Title>Thank You!</Title>
+            Your message was sent successfully
+          </div>
+        )}
+      </InnerContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  font-weight: 300;
+  background: #2c252599;
+  padding: 20px 10px 0 10px;
+  border-radius: 7px;
+  min-height: calc(100vh - 90px);
+
+  p {
+    font-size: 1.1em;
+  }
+`;
+
+const InnerContainer = styled.div`
+  max-width: 600px;
+  color: #e9e5e5;
+`;
+
+const Title = styled.h1`
+  padding: 35px 0 15px;
+  font-size: 25px;
+  text-align: center;
+  font-weight: 400;
+  color: #e9e5e5;
+`;

src/client/pages/App.tsx

@@ -9,7 +9,8 @@ import ShortcutList from "./app/ShortcutList";
 import Controls from "./app/Controls";
 import { encodeAppName } from "../helpers";
 import * as osSelect from "../helpers/osSelect";
-import { getTitle } from '../../shared/utils';
+import { getTitle } from "../../shared/utils";
+import { ContactCTA } from "./Home";
 
 const App = () => {
   const { app, os } = useContext(DataContext);
@@ -51,6 +52,9 @@ const App = () => {
           );
         })}
       </ResultsContainer>
+      <ContactCTA>
+        Which app should I add next? <a href="/about">Let me know</a>
+      </ContactCTA>
     </div>
   );
 };

src/client/pages/Home.tsx

@@ -17,13 +17,20 @@ const Home = () => {
     <Container>
       <Hero>
         Every app, every shortcut,
-        <br /> <b>the best ones first.</b>
+        <br /> the best ones first
+        <HeroSub>
+          Find your app's best keyboard shortcuts, see what everybody else is
+          using
+        </HeroSub>
       </Hero>
       <GridContainer>
         {appCategories.map((appCategory) => (
           <AppList key={appCategory.gridArea} {...appCategory} />
         ))}
       </GridContainer>
+      <ContactCTA>
+        Which app should I add next? <a href="/about">Let me know</a>
+      </ContactCTA>
     </Container>
   );
 };
@@ -56,13 +63,24 @@ const GridContainer = styled.div`
   }
 `;
 
+const HeroSub = styled.div`
+  font-size: 22px;
+  font-weight: 200;
+
+  @media (max-width: ${tabletBreakpoint}px) {
+    font-size: 16px;
+    margin-top: 10px;
+    line-height: 1.5em;
+  }
+`;
+
 const Hero = styled.h1`
   color: #ffffff;
   font-size: 55px;
-  margin: 120px 0 140px;
   text-align: center;
-  font-weight: 300;
-  line-height: 1.5em;
+  margin: 120px 0 90px;
+  font-weight: 500;
+  line-height: 1.25em;
 
   & b {
     font-weight: 500;
@@ -77,6 +95,11 @@ const Hero = styled.h1`
   @media (max-width: ${tabletBreakpoint}px) {
     margin-top: 50px;
     margin-bottom: 70px;
-    font-size: 33px;
+    font-size: 30px;
   }
 `;
+
+export const ContactCTA = styled.div`
+  text-align: center;
+  margin: 30px 0;
+`;