From 1617faf75496193c21134fc3ccb59fd456d1575b Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 11:29:05 +0200
Subject: Create new ErrorMessage component for showing field error messages

---
 src/components/ErrorMessage.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/ErrorMessage.tsx

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000..f807817
--- /dev/null
+++ b/src/components/ErrorMessage.tsx
@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/react";
+import colors from "../colors";
+
+interface ErrorMessageProps {
+    show: boolean,
+    message: string
+}
+
+const styles = css`
+  color: ${colors.error};
+  font-size: 20px;
+  line-height: 15px;
+  margin: 10px 0 0;
+`;
+
+export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
+    if (!props.show) {
+        return null;
+    }
+
+    return (
+        <p css={styles}>{props.message}</p>
+    );
+}
-- 
cgit v1.2.3


From b62d0907dafba6f662c33a061ed9e5397b3f4ffc Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:07:00 +0200
Subject: Change ErrorMessage CSS properties

---
 src/components/ErrorMessage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index f807817..55e3759 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: 20px;
+  font-size: 18px;
   line-height: 15px;
-  margin: 10px 0 0;
+  margin: 15px 0 0;
 `;
 
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
-- 
cgit v1.2.3


From b6dd5e5e57f3e0f16ab6814fc96976e43f8e1f62 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 21 Jan 2021 19:55:26 +0200
Subject: Add space to union both sides

Co-authored-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/ErrorMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 55e3759..8c315fb 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -14,7 +14,7 @@ const styles = css`
   margin: 15px 0 0;
 `;
 
-export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null {
+export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
     if (!props.show) {
         return null;
     }
-- 
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/components/ErrorMessage.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 6c88ec320843b1cfa461539c77592251db7d06cb Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Fri, 5 Feb 2021 17:41:15 +0200
Subject: Toggle visibility instead returning null when no error should be
 shown

---
 src/components/ErrorMessage.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 982bdb9..3342434 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -7,17 +7,14 @@ interface ErrorMessageProps {
     message: string
 }
 
-const styles = css`
-  color: ${colors.error};
-  font-size: 1.15rem;
-  line-height: 1.1rem;
-  margin: 1rem 0 0;
-`;
-
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
-    if (!props.show) {
-        return null;
-    }
+    const styles = css`
+      color: ${colors.error};
+      font-size: 1.15rem;
+      line-height: 1.1rem;
+      margin: 1rem 0 0;
+      visibilty: ${props.show ? "visible" : "hidden"}
+    `;
 
     return (
         <p css={styles}>{props.message}</p>
-- 
cgit v1.2.3


From 32319542b26c5f7c05a9c66389be42cb0b998f41 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 21:55:41 +0200
Subject: Fix CSS visibilty attribute

Co-authored-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/ErrorMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 3342434..165f399 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -13,7 +13,7 @@ export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | nu
       font-size: 1.15rem;
       line-height: 1.1rem;
       margin: 1rem 0 0;
-      visibilty: ${props.show ? "visible" : "hidden"}
+      visibility: ${props.show ? "visible" : "hidden"};
     `;
 
     return (
-- 
cgit v1.2.3


From 128bb2a518d3322eeef0b7f3fc661aebb9791097 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 22:03:28 +0200
Subject: Set z-index and position for error message CSS

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

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 165f399..650100d 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -14,6 +14,8 @@ export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | nu
       line-height: 1.1rem;
       margin: 1rem 0 0;
       visibility: ${props.show ? "visible" : "hidden"};
+      position: absolute;
+      z-index: -1;
     `;
 
     return (
-- 
cgit v1.2.3