From fc14b1bca6417117a566be0c3ecef4e48751c899 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 30 Mar 2022 23:21:13 +1100
Subject: [PATCH] Chap06 -> Reducing boilerplate code with React Hook Form ->
 Creating from styled components

---
 QandA/frontend/src/Styles.ts | 68 ++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/QandA/frontend/src/Styles.ts b/QandA/frontend/src/Styles.ts
index bf6cc3b..d1510d1 100644
--- a/QandA/frontend/src/Styles.ts
+++ b/QandA/frontend/src/Styles.ts
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const gray1 = '#383737';
 export const gray2 = '#5c5a5a';
@@ -33,3 +34,70 @@ export const PrimaryButton = styled.button`
     cursor: not-allowed;
   }
 `;
+
+export const Fieldset = styled.fieldset`
+  margin: 10px auto 0 auto;
+  padding: 30px;
+  width: 350px;
+  background-color: ${gray6};
+  border-radius: 4px;
+  border: 1px solid ${gray5};
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+`;
+
+export const FieldContainer = styled.label`
+  font-weight: 10px;
+`;
+
+const baseFieldCSS = css`
+  box-sizing: border-box;
+  font-family: ${fontFamily};
+  font-size: ${fontSize};
+  margin-bottom: 5px;
+  padding: 8px 10px;
+  border: 1px solid ${gray5};
+  border-radius: 3px;
+  color: ${gray2};
+  background-color: white;
+  width: 100%;
+  :focus {
+    outline-color: ${gray5};
+  }
+  :disabled {
+    background-color: ${gray6};
+  }
+`;
+
+export const FieldLabel = styled.label`
+  font-weight: bold;
+`;
+
+export const FieldInput = styled.input`
+  ${baseFieldCSS}
+`;
+
+export const FieldTextArea = styled.textarea`
+  ${baseFieldCSS}
+  height: 100px;
+`;
+
+export const FieldError = styled.div`
+  font-size: 12px;
+  color: red;
+`;
+
+export const FormButtonContainer = styled.div`
+  margin: 30px 0px 0px 0px;
+  padding: 20px 0px 0px 0px;
+  border-top: 1px solid ${gray5};
+`;
+
+export const SubmissionSussess = styled.div`
+  margin-top: 10px;
+  color: green;
+`;
+
+export const SubmissionFailure = styled.div`
+  margin-top: 10px;
+  color: red;
+`;