Merge pull request #15 from python-discord/forms/add-form-page

Add specific form page

2 files changed, 21 insertions, 21 deletions

diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx
index dc761b6..2493608 100644
--- a/src/components/FormListing.tsx
+++ b/src/components/FormListing.tsx
@@ -9,10 +9,10 @@ import Tag from "./Tag";
 
 import colors from "../colors";
 
-import { Form } from "../api/forms";
+import { AllFormsForm } from "../api/forms";
 
 interface FormListingProps {
-  form: Form
+  form: AllFormsForm
 }
 
 function FormListing({ form }: FormListingProps) {
@@ -43,7 +43,7 @@ function FormListing({ form }: FormListingProps) {
     closedTag = <Tag text="CLOSED" color={colors.error}/>
   };
 
-  return <Link to="/form" css={listingStyle}>
+  return <Link to={`/form/${form.id}`} css={listingStyle}>
     <div>
       <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{form.title} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
       <p css={{marginTop: "5px"}}>{form.description}</p>
diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index 6289dfc..c3d46fc 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -5,6 +5,10 @@ import SVG from "react-inlinesvg";
 import header1 from "./header_1.svg";
 import header2 from "./header_2.svg";
 
+interface HeaderBarProps {
+  title?: string
+}
+
 const headerImageStyles = css`
 z-index: -1;
 top: 0;
@@ -13,22 +17,22 @@ width: 100%;
 transition: height 1s;
 
 @media (max-width: 770px) {
-  height: 180px;
-}
-
-@media (max-width: 580px) {
   height: 140px;
 }
 `;
 
-function HeaderBar() {
+function HeaderBar({ title }: HeaderBarProps) {
+  if (!title) {
+    title = "Python Discord Forms";
+  };
+  
   return <div>
     <div>
       <SVG src={header1} css={headerImageStyles}/>
       <SVG src={header2} css={headerImageStyles}/>
     </div>
     <h1 css={css`
-      font-size: 4em;
+      font-size: 4vw;
       margin: 0;
       margin-top: 30px;
       margin-left: 30px;
@@ -37,26 +41,22 @@ function HeaderBar() {
       transition-duration: 1s;
       font-family: "Uni Sans", "Hind", "Arial", sans-serif;
 
-      @media (max-width: 770px) {
-        margin-bottom: 100px;
-        font-size: 3em;
+      @media (max-width: 1000px) {
+        margin-top: 15px;
+        font-size: 8vw;
       }
 
-      @media (max-width: 580px) {
-        font-size: 2em;
+      @media (max-width: 770px) {
+        margin-top: 15px;
+        font-size: 6vw;
+        margin-bottom: 100px;
       }
-
       @media (max-width: 450px) {
-        font-size: 1.70em;
         text-align: center;
         margin-left: 0;
       }
-
-      @media (max-width: 400px) {
-        font-size: 1.3em;
-      }
     `}>
-      Python Discord Forms
+      {title}
     </h1>
   </div>
 }