From dbc3c8a69392a81283b29248d31bd92a23025367 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:54:12 +0200
Subject: Move invalid styles to common styles

---
 src/commonStyles.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 89a2746..f5a5beb 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -1,4 +1,5 @@
 import { css } from "@emotion/react";
+import colors from "./colors";
 
 const selectable = css`
   -moz-user-select: text;
@@ -50,6 +51,12 @@ const textInputs = css`
   border-radius: 8px;
 `;
 
+const invalidStyles = css`
+  .invalid-box {
+    box-shadow: 0 0 10px ${colors.error};
+    border: none;
+  }
+`;
 
 export {
     selectable,
@@ -57,4 +64,5 @@ export {
     hiddenInput,
     multiSelectInput,
     textInputs,
+    invalidStyles
 };
-- 
cgit v1.2.3


From c44a1b216d2b7472e0facef15fddf08a834b12e2 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 19 Jan 2021 16:01:44 +0200
Subject: Add webkit CSS to invalidStyle to support Safari

---
 src/commonStyles.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index f5a5beb..0cd68d5 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -53,6 +53,8 @@ const textInputs = css`
 
 const invalidStyles = css`
   .invalid-box {
+    -webkit-appearance: none;
+    -webkit-box-shadow: 0 0 10px ${colors.error};
     box-shadow: 0 0 10px ${colors.error};
     border: none;
   }
-- 
cgit v1.2.3


From a49bb796c7d4eee1f8184be78f1671bdf1cef61d Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Wed, 20 Jan 2021 13:27:21 +0200
Subject: Add state for displaying thanks for submitting showing

---
 src/commonStyles.tsx   |  63 +++++++++++++++++++++++++++++-
 src/pages/FormPage.tsx | 103 +++++++++++++++++++------------------------------
 2 files changed, 101 insertions(+), 65 deletions(-)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 0cd68d5..3ff2a2f 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -60,11 +60,72 @@ const invalidStyles = css`
   }
 `;
 
+const containerStyles = css`
+  margin: auto;
+  width: 50%;
+
+  text-align: center;
+  font-size: 1.5rem;
+  white-space: nowrap;
+
+  > div {
+    display: inline-block;
+    margin: 2rem auto;
+    width: 50%;
+  }
+
+  @media (max-width: 850px) {
+    width: 100%;
+
+    > div {
+      display: flex;
+      justify-content: center;
+
+      margin: 0 auto;
+    }
+  }
+
+  .return_button {
+    text-align: left;
+  }
+
+  .return_button.closed {
+    text-align: center;
+  }
+`;
+
+const separatorStyles = css`
+  height: 0;
+  display: none;
+
+  @media (max-width: 850px) {
+    display: block;
+  }
+`;
+
+const returnStyles = css`
+  padding: 0.5rem 2rem;
+  border-radius: 8px;
+
+  color: white;
+  text-decoration: none;
+
+  background-color: ${colors.greyple};
+  transition: background-color 300ms;
+
+  :hover {
+    background-color: ${colors.darkerGreyple};
+  }
+`;
+
 export {
     selectable,
     unselectable,
     hiddenInput,
     multiSelectInput,
     textInputs,
-    invalidStyles
+    invalidStyles,
+    containerStyles,
+    separatorStyles,
+    returnStyles
 };
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index b4a8903..cf6947b 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -2,8 +2,9 @@
 import { jsx, css } from "@emotion/react";
 import { Link } from "react-router-dom";
 
-import React, { SyntheticEvent, useEffect, useState, createRef, RefObject } from "react";
+import React, { SyntheticEvent, useEffect, useState, createRef } from "react";
 import { useParams } from "react-router";
+import { PropagateLoader } from "react-spinners";
 
 import HeaderBar from "../components/HeaderBar";
 import RenderedQuestion from "../components/Question";
@@ -12,7 +13,7 @@ import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
-import { unselectable }  from "../commonStyles";
+import { unselectable, containerStyles, separatorStyles, returnStyles }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
@@ -26,65 +27,6 @@ interface NavigationProps {
 }
 
 class Navigation extends React.Component<NavigationProps> {
-    containerStyles = css`
-      margin: auto;
-      width: 50%;
-
-      text-align: center;
-      font-size: 1.5rem;
-      white-space: nowrap;
-
-      > div {
-        display: inline-block;
-        margin: 2rem auto;
-        width: 50%;
-      }
-
-      @media (max-width: 850px) {
-        width: 100%;
-
-        > div {
-          display: flex;
-          justify-content: center;
-
-          margin: 0 auto;
-        }
-      }
-
-      .return_button {
-        text-align: left;
-      }
-
-      .return_button.closed {
-        text-align: center;
-      }
-    `;
-
-    separatorStyles = css`
-      height: 0;
-      display: none;
-
-      @media (max-width: 850px) {
-        display: block;
-      }
-    `;
-
-    returnStyles = css`
-      padding: 0.5rem 2rem;
-      border-radius: 8px;
-
-      color: white;
-      text-decoration: none;
-
-      background-color: ${colors.greyple};
-      transition: background-color 300ms;
-
-      :hover {
-        background-color: ${colors.darkerGreyple};
-      }
-    }
-    `;
-
     submitStyles = css`
       text-align: right;
 
@@ -118,11 +60,11 @@ class Navigation extends React.Component<NavigationProps> {
         }
 
         return (
-            <div css={[unselectable, this.containerStyles]}>
+            <div css={[unselectable, containerStyles]}>
                 <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
-                    <Link to="/" css={this.returnStyles}>Return Home</Link>
+                    <Link to="/" css={returnStyles}>Return Home</Link>
                 </div>
-                <br css={this.separatorStyles}/>
+                <br css={separatorStyles}/>
                 { submit }
             </div>
         );
@@ -158,6 +100,8 @@ function FormPage(): JSX.Element {
     const { id } = useParams<PathParams>();
 
     const [form, setForm] = useState<Form>();
+    const [sending, setSending] = useState<boolean>();
+    const [sent, setSent] = useState<boolean>();
 
     useEffect(() => {
         getForm(id).then(form => {
@@ -165,6 +109,33 @@ function FormPage(): JSX.Element {
         });
     }, []);
 
+    if (form && sent) {
+        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif;`;
+        return (
+            <div>
+                <HeaderBar title={form.name} description={form.description}/>
+                <div css={[unselectable, containerStyles]}>
+                    <h3 css={thanksStyle}>Thanks for your response!</h3>
+                    <div className={ "return_button closed" }>
+                        <Link to="/" css={returnStyles}>Return Home</Link>
+                    </div>
+                    <br css={separatorStyles}/>
+                </div>
+            </div>
+        );
+    }
+
+    if (sending) {
+        return (
+            <div>
+                <HeaderBar title={"Submitting..."}/>
+                <div css={{display: "flex", justifyContent: "center", paddingTop: "40px"}}>
+                    <PropagateLoader color="white"/>
+                </div>
+            </div>
+        );
+    }
+
     if (!form) {
         return <Loading/>;
     }
@@ -198,6 +169,8 @@ function FormPage(): JSX.Element {
             return;
         }
 
+        setSending(true);
+
         const answers = {};
         questions.forEach(prop => {
             const question = prop.props.question;
@@ -233,6 +206,8 @@ function FormPage(): JSX.Element {
         });
 
         await ApiClient.post(`forms/submit/${id}`, {response: answers});
+        setSending(false);
+        setSent(true);
     }
 
     const open: boolean = form.features.includes(FormFeatures.Open);
-- 
cgit v1.2.3


From 449a56d91e7208b057a0a5165fbbc2bfadd33ba6 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 14:34:53 +0200
Subject: Implement dynamic showing of form submitted text

---
 src/commonStyles.tsx   | 2 +-
 src/pages/FormPage.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 3ff2a2f..cbfc40a 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -66,7 +66,6 @@ const containerStyles = css`
 
   text-align: center;
   font-size: 1.5rem;
-  white-space: nowrap;
 
   > div {
     display: inline-block;
@@ -109,6 +108,7 @@ const returnStyles = css`
 
   color: white;
   text-decoration: none;
+  white-space: nowrap;
 
   background-color: ${colors.greyple};
   transition: background-color 300ms;
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index cf6947b..72b073f 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -29,6 +29,7 @@ interface NavigationProps {
 class Navigation extends React.Component<NavigationProps> {
     submitStyles = css`
       text-align: right;
+      white-space: nowrap;
 
       button {
         padding: 0.5rem 4rem;
@@ -110,12 +111,13 @@ function FormPage(): JSX.Element {
     }, []);
 
     if (form && sent) {
-        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif;`;
+        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`;
+        const divStyle = css`width: 80%;`;
         return (
             <div>
                 <HeaderBar title={form.name} description={form.description}/>
-                <div css={[unselectable, containerStyles]}>
-                    <h3 css={thanksStyle}>Thanks for your response!</h3>
+                <div css={[unselectable, containerStyles, divStyle]}>
+                    <h3 css={thanksStyle}>{form.submitted_text ?? "Thanks for your response!"}</h3>
                     <div className={ "return_button closed" }>
                         <Link to="/" css={returnStyles}>Return Home</Link>
                     </div>
-- 
cgit v1.2.3


From 8d3469e69d1030b5d83108c6e967bffbb9e1d9a9 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 20:13:51 +0200
Subject: Use relative units

---
 src/commonStyles.tsx            | 4 ++--
 src/components/ErrorMessage.tsx | 6 +++---
 src/pages/FormPage.tsx          | 3 ++-
 3 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index cbfc40a..2caa77e 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -54,8 +54,8 @@ const textInputs = css`
 const invalidStyles = css`
   .invalid-box {
     -webkit-appearance: none;
-    -webkit-box-shadow: 0 0 10px ${colors.error};
-    box-shadow: 0 0 10px ${colors.error};
+    -webkit-box-shadow: 0 0 0.6rem ${colors.error};
+    box-shadow: 0 0 0.6rem ${colors.error};
     border: none;
   }
 `;
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 55e3759..1cf3cbc 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -9,9 +9,9 @@ interface ErrorMessageProps {
 
 const styles = css`
   color: ${colors.error};
-  font-size: 18px;
-  line-height: 15px;
-  margin: 15px 0 0;
+  font-size: 1.15rem;
+  line-height: 1.1rem;
+  margin: 1rem 0 0;
 `;
 
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 72b073f..21303ab 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -107,11 +107,12 @@ function FormPage(): JSX.Element {
     useEffect(() => {
         getForm(id).then(form => {
             setForm(form);
+            setSent(true);
         });
     }, []);
 
     if (form && sent) {
-        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`;
+        const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 15.5rem;`;
         const divStyle = css`width: 80%;`;
         return (
             <div>
-- 
cgit v1.2.3


From e221e20a82411dabc4d6c21172f0c68badc64364 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 28 Jan 2021 19:31:25 +0200
Subject: Remove unnecessary separator from sent form return home button

---
 src/commonStyles.tsx   | 10 ----------
 src/pages/FormPage.tsx | 12 ++++++++++--
 2 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 2caa77e..1136b34 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -93,15 +93,6 @@ const containerStyles = css`
   }
 `;
 
-const separatorStyles = css`
-  height: 0;
-  display: none;
-
-  @media (max-width: 850px) {
-    display: block;
-  }
-`;
-
 const returnStyles = css`
   padding: 0.5rem 2rem;
   border-radius: 8px;
@@ -126,6 +117,5 @@ export {
     textInputs,
     invalidStyles,
     containerStyles,
-    separatorStyles,
     returnStyles
 };
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 36ca86f..abb008f 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -13,7 +13,7 @@ import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
-import { unselectable, containerStyles, separatorStyles, returnStyles }  from "../commonStyles";
+import { unselectable, containerStyles, returnStyles }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
@@ -27,6 +27,15 @@ interface NavigationProps {
 }
 
 class Navigation extends React.Component<NavigationProps> {
+    separatorStyles = css`
+      height: 0;
+      display: none;
+
+      @media (max-width: 850px) {
+        display: block;
+      }
+    `;
+
     submitStyles = css`
       text-align: right;
       white-space: nowrap;
@@ -121,7 +130,6 @@ function FormPage(): JSX.Element {
                     <div className={ "return_button closed" }>
                         <Link to="/" css={returnStyles}>Return Home</Link>
                     </div>
-                    <br css={separatorStyles}/>
                 </div>
             </div>
         );
-- 
cgit v1.2.3


From 978754f9bc81d0d836ddea6656af4a3dadce5248 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 28 Jan 2021 19:34:15 +0200
Subject: Move container and return styles back to FormPage

---
 src/commonStyles.tsx   | 53 +-------------------------------------------------
 src/pages/FormPage.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 54 deletions(-)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 1136b34..57002a9 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -60,62 +60,11 @@ const invalidStyles = css`
   }
 `;
 
-const containerStyles = css`
-  margin: auto;
-  width: 50%;
-
-  text-align: center;
-  font-size: 1.5rem;
-
-  > div {
-    display: inline-block;
-    margin: 2rem auto;
-    width: 50%;
-  }
-
-  @media (max-width: 850px) {
-    width: 100%;
-
-    > div {
-      display: flex;
-      justify-content: center;
-
-      margin: 0 auto;
-    }
-  }
-
-  .return_button {
-    text-align: left;
-  }
-
-  .return_button.closed {
-    text-align: center;
-  }
-`;
-
-const returnStyles = css`
-  padding: 0.5rem 2rem;
-  border-radius: 8px;
-
-  color: white;
-  text-decoration: none;
-  white-space: nowrap;
-
-  background-color: ${colors.greyple};
-  transition: background-color 300ms;
-
-  :hover {
-    background-color: ${colors.darkerGreyple};
-  }
-`;
-
 export {
     selectable,
     unselectable,
     hiddenInput,
     multiSelectInput,
     textInputs,
-    invalidStyles,
-    containerStyles,
-    returnStyles
+    invalidStyles
 };
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index abb008f..de80e8a 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -13,10 +13,58 @@ import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
 import colors from "../colors";
-import { unselectable, containerStyles, returnStyles }  from "../commonStyles";
+import { unselectable }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
+const containerStyles = css`
+  margin: auto;
+  width: 50%;
+
+  text-align: center;
+  font-size: 1.5rem;
+
+  > div {
+    display: inline-block;
+    margin: 2rem auto;
+    width: 50%;
+  }
+
+  @media (max-width: 850px) {
+    width: 100%;
+
+    > div {
+      display: flex;
+      justify-content: center;
+
+      margin: 0 auto;
+    }
+  }
+
+  .return_button {
+    text-align: left;
+  }
+
+  .return_button.closed {
+    text-align: center;
+  }
+`;
+
+const returnStyles = css`
+  padding: 0.5rem 2rem;
+  border-radius: 8px;
+
+  color: white;
+  text-decoration: none;
+  white-space: nowrap;
+
+  background-color: ${colors.greyple};
+  transition: background-color 300ms;
+
+  :hover {
+    background-color: ${colors.darkerGreyple};
+  }
+`;
 
 interface PathParams {
     id: string
@@ -74,7 +122,7 @@ class Navigation extends React.Component<NavigationProps> {
                 <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
                     <Link to="/" css={returnStyles}>Return Home</Link>
                 </div>
-                <br css={separatorStyles}/>
+                <br css={this.separatorStyles}/>
                 { submit }
             </div>
         );
-- 
cgit v1.2.3


From bdb8ed5d9a03ec4e0abbc23d209d0f0017d3413f Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Fri, 5 Feb 2021 17:38:05 +0200
Subject: Use border-color: transparent instead border: none

---
 src/commonStyles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/commonStyles.tsx')

diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx
index 57002a9..b2969f8 100644
--- a/src/commonStyles.tsx
+++ b/src/commonStyles.tsx
@@ -56,7 +56,7 @@ const invalidStyles = css`
     -webkit-appearance: none;
     -webkit-box-shadow: 0 0 0.6rem ${colors.error};
     box-shadow: 0 0 0.6rem ${colors.error};
-    border: none;
+    border-color: transparent;
   }
 `;
 
-- 
cgit v1.2.3

