From b1791b8e8dbcbae0a19ec76d8f323d220409662a Mon Sep 17 00:00:00 2001
From: Jianger <ethantianshujiang@gmail.com>
Date: Mon, 17 Apr 2023 03:16:05 +0200
Subject: [PATCH 1/5] /attend-event styled

---
 src/pages/AttendEvent/AttendEvent.js   | 14 ++++--
 src/pages/AttendEvent/AttendEvent.scss | 62 ++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/src/pages/AttendEvent/AttendEvent.js b/src/pages/AttendEvent/AttendEvent.js
index 4e79130..e301ded 100644
--- a/src/pages/AttendEvent/AttendEvent.js
+++ b/src/pages/AttendEvent/AttendEvent.js
@@ -3,6 +3,8 @@ import "./AttendEvent.scss";
 import { attendEvent } from "../../util/ServerInterfaceEvents";
 import { Navigate } from "react-router";
 
+import Logo from "../../assets/mission-safe-logo.png";
+
 class AttendEvent extends React.Component {
     constructor(props) {
         super(props)
@@ -53,15 +55,19 @@ class AttendEvent extends React.Component {
             return <Navigate to="/attend-success"/>
         } else {
             return (
-                <div className="page-container">
-                    <p>Event Attendance</p>
+                <div className="page-container" id="attendance-page">
+                    <div id="header">
+                        <img src={Logo} alt="MissionSAFE logo"/>
+                        <p id="title">Event Attendance</p>
+                        <p id="subtitle">Enter your information below.</p>
+                    </div>
                     <div className="attendace-form">
                         <div className="attendance-input">
-                            <p>Email</p>
+                            <p className="form-label">Email</p>
                             <input onChange={this.handleUpdate} name="email" type="text" placeholder="example@email.com"/>
                         </div>
                         <div className="attendance-input">
-                            <p>Event Code</p>
+                            <p className="form-label">Event Code</p>
                             <input onChange={this.handleUpdate} id="code-input" name="code" type="text" placeholder="XXXXX"/>
                         </div>
                     </div>
diff --git a/src/pages/AttendEvent/AttendEvent.scss b/src/pages/AttendEvent/AttendEvent.scss
index e69de29..fd40533 100644
--- a/src/pages/AttendEvent/AttendEvent.scss
+++ b/src/pages/AttendEvent/AttendEvent.scss
@@ -0,0 +1,62 @@
+#attendance-page {
+    img {
+        height: 110px;
+        width: 110px;
+    }
+}
+
+#header {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 36px;
+
+    img {
+        margin-bottom: 25px;
+    }
+}
+
+#title {
+    font-size: 38px;
+    font-weight: 400;
+    margin-top: 0;
+    margin-bottom: 8px;
+    letter-spacing: 2px;
+}
+
+#subtitle {
+    margin-top: 0;
+    font-size: 14px;
+    font-weight: 400;
+    color: #5A5A5A
+}
+
+.attendance-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 25px;
+}
+
+
+.attendance-input input {
+    margin-top: 0;
+    background-color: #F4F4F4;
+    border: 1px solid #D9D9D9;
+    border-radius: 5px;
+    color: black;
+    padding: 6px;
+    color:#5A5A5A;
+    font-size: 14px;
+    width: 320px;
+}
+
+.form-label {
+    margin-bottom: 1px;
+    color:#5A5A5A;
+    font-size: 14px;
+    letter-spacing: 1px;
+}
\ No newline at end of file

From d03e62410048f44f8d050614911e2bb033b72ad2 Mon Sep 17 00:00:00 2001
From: Jianger <ethantianshujiang@gmail.com>
Date: Mon, 17 Apr 2023 03:30:12 +0200
Subject: [PATCH 2/5] /create-form styling

---
 src/pages/AttendEvent/AttendEvent.js   | 16 ++---
 src/pages/AttendEvent/AttendEvent.scss |  4 +-
 src/pages/CreateForm/CreateForm.js     | 49 ++++++++-------
 src/pages/CreateForm/CreateForm.scss   | 86 +++++++++++++++-----------
 src/pages/LoginPage/LoginPage.js       | 16 ++---
 src/pages/LoginPage/LoginPage.scss     |  7 +--
 6 files changed, 97 insertions(+), 81 deletions(-)

diff --git a/src/pages/AttendEvent/AttendEvent.js b/src/pages/AttendEvent/AttendEvent.js
index e301ded..59af1df 100644
--- a/src/pages/AttendEvent/AttendEvent.js
+++ b/src/pages/AttendEvent/AttendEvent.js
@@ -31,17 +31,17 @@ class AttendEvent extends React.Component {
     async handleSubmit(event) {
         event.preventDefault();
         console.log(this.state);
-        if(this.state.code.length === 5 && this.state.email.length > 0) {
+        if (this.state.code.length === 5 && this.state.email.length > 0) {
             try {
                 let attendanceResult = await attendEvent(this.state.code, {
                     email: this.state.email
                 });
-                if(attendanceResult) {
+                if (attendanceResult) {
                     this.setState({
                         redirect: true,
                     })
                 }
-            } catch(err) {
+            } catch (err) {
                 this.setState({
                     errorMessage: "Failed to register attendance. Please try again."
                 })
@@ -51,24 +51,24 @@ class AttendEvent extends React.Component {
     }
 
     render() {
-        if(this.state.redirect) {
-            return <Navigate to="/attend-success"/>
+        if (this.state.redirect) {
+            return <Navigate to="/attend-success" />
         } else {
             return (
                 <div className="page-container" id="attendance-page">
                     <div id="header">
-                        <img src={Logo} alt="MissionSAFE logo"/>
+                        <img src={Logo} alt="MissionSAFE logo" />
                         <p id="title">Event Attendance</p>
                         <p id="subtitle">Enter your information below.</p>
                     </div>
                     <div className="attendace-form">
                         <div className="attendance-input">
                             <p className="form-label">Email</p>
-                            <input onChange={this.handleUpdate} name="email" type="text" placeholder="example@email.com"/>
+                            <input onChange={this.handleUpdate} name="email" type="text" placeholder="example@email.com" />
                         </div>
                         <div className="attendance-input">
                             <p className="form-label">Event Code</p>
-                            <input onChange={this.handleUpdate} id="code-input" name="code" type="text" placeholder="XXXXX"/>
+                            <input onChange={this.handleUpdate} id="code-input" name="code" type="text" placeholder="XXXXX" />
                         </div>
                     </div>
                     <p className="attendance-error">{this.state.errorMessage}</p>
diff --git a/src/pages/AttendEvent/AttendEvent.scss b/src/pages/AttendEvent/AttendEvent.scss
index fd40533..1a5bf1d 100644
--- a/src/pages/AttendEvent/AttendEvent.scss
+++ b/src/pages/AttendEvent/AttendEvent.scss
@@ -49,14 +49,14 @@
     border-radius: 5px;
     color: black;
     padding: 6px;
-    color:#5A5A5A;
+    color: #5A5A5A;
     font-size: 14px;
     width: 320px;
 }
 
 .form-label {
     margin-bottom: 1px;
-    color:#5A5A5A;
+    color: #5A5A5A;
     font-size: 14px;
     letter-spacing: 1px;
 }
\ No newline at end of file
diff --git a/src/pages/CreateForm/CreateForm.js b/src/pages/CreateForm/CreateForm.js
index e01750b..4bdf146 100644
--- a/src/pages/CreateForm/CreateForm.js
+++ b/src/pages/CreateForm/CreateForm.js
@@ -4,6 +4,8 @@ import { createYouthForm } from "../../util/ServerInterfaceYouth";
 import { Navigate } from "react-router";
 import "./CreateForm.scss"
 
+import Logo from "../../assets/mission-safe-logo.png";
+
 class CreateForm extends React.Component {
     constructor(props) {
         super(props);
@@ -31,14 +33,14 @@ class CreateForm extends React.Component {
 
     async handleSubmit(event) {
         event.preventDefault();
-        if(this.state.program.length > 0 && this.state.content.length > 0) {
+        if (this.state.program.length > 0 && this.state.content.length > 0) {
             try {
-                if(this.state.type === "event") {
+                if (this.state.type === "event") {
                     let form = await createEventForm(this.state.id, {
                         programs: [this.state.program],
                         content: this.state.content
                     });
-                    if(form.ok) {
+                    if (form.ok) {
                         this.setState({
                             redirect: true,
                         })
@@ -47,12 +49,12 @@ class CreateForm extends React.Component {
                             errorMessage: "Something went wrong. Please try again."
                         })
                     }
-                } else if(this.state.type === "youth") {
+                } else if (this.state.type === "youth") {
                     let form = await createYouthForm(this.state.id, {
                         programs: [this.state.program],
                         content: this.state.content
                     });
-                    if(form.ok) {
+                    if (form.ok) {
                         this.setState({
                             redirect: true,
                         })
@@ -62,7 +64,7 @@ class CreateForm extends React.Component {
                         })
                     }
                 }
-            } catch(err) {
+            } catch (err) {
                 this.setState({
                     errorMessage: "Failed to create form. Please try again."
                 })
@@ -77,25 +79,28 @@ class CreateForm extends React.Component {
             } else if(this.state.redirect) {
                 return <Navigate to="/records"/>
             } else {
-                return (
-                    <div className="page-container">
-                        <p className="form-creation-title">Form Creation</p>
-                        <div className="form-options">
-                            <div className="form-option">
-                                <p>What program is this form associated with?</p>
-                                <input name="program" onChange={this.handleUpdate} type="text"/>
-                            </div>
-                            <div className="form-option">
-                                <p>Content</p>
-                                <textarea name="content" onChange={this.handleUpdate}/>
-                            </div>
+            return (
+                <div className="page-container" id="form-create-page">
+                    <div id="form-create-header">
+                        <img src={Logo} alt="MissionSAFE logo" />
+                        <p className="form-creation-title">Create Form</p>
+                    </div>
+                    <div className="form-option">
+                        <div className="form-option">
+                            <p className="form-label">What program is this form associated with?</p>
+                            <input name="program" onChange={this.handleUpdate} type="text" />
+                        </div>
+                        <div className="form-option">
+                            <p className="form-label">Content</p>
+                            <textarea name="content" onChange={this.handleUpdate} />
                         </div>
-                        <p onClick={this.handleSubmit} className="message-page-button">Create Form</p>
                     </div>
-                )
+                    <p onClick={this.handleSubmit} className="message-page-button">Create Form</p>
+                </div>
+            )
             }
-        } catch(err) {
-            return <Navigate to="/unauthorized"/>
+        } catch (err) {
+            return <Navigate to="/unauthorized" />
         }
     }
 }
diff --git a/src/pages/CreateForm/CreateForm.scss b/src/pages/CreateForm/CreateForm.scss
index 4762891..c96b5c9 100644
--- a/src/pages/CreateForm/CreateForm.scss
+++ b/src/pages/CreateForm/CreateForm.scss
@@ -1,17 +1,22 @@
-.form-creation-title {
-    font-size: 30px;
-    font-weight: 500;
-    color: #5A5A5A;
-    font-family: Arial, Helvetica, sans-serif;
-    margin-top: 30px;
-}
-
-.form-options {
+#form-create-header {
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
+    justify-content: flex-start;
+    margin-top: 36px;
+
+    img {
+        margin-bottom: 25px;
+    }
+}
+
+.form-creation-title {
+    font-size: 38px;
+    font-weight: 400;
+    margin-top: 0;
+    margin-bottom: 8px;
+    letter-spacing: 2px;
 }
 
 .form-option {
@@ -19,35 +24,42 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-}
 
-.form-option p {
-    margin-bottom: 2px;
-}
+    p {
+        margin-bottom: 2px;
+    }
 
-.form-option input {
-    width: 300px;
-    margin-top: 0;
-    background-color: #F4F4F4;
-    border: 1px solid #D9D9D9;
-    border-radius: 5px;
-    color: black;
-    padding: 6px;
-    color:#5A5A5A;
-    font-size: 14px;
-    font-family: Arial, Helvetica, sans-serif;
+    input {
+        width: 300px;
+        margin-top: 0;
+        background-color: #F4F4F4;
+        border: 1px solid #D9D9D9;
+        border-radius: 5px;
+        color: black;
+        padding: 6px;
+        color: #5A5A5A;
+        font-size: 14px;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    textarea {
+        width: 300px;
+        height: 180px;
+        margin-top: 0;
+        background-color: #F4F4F4;
+        border: 1px solid #D9D9D9;
+        border-radius: 5px;
+        color: black;
+        padding: 6px;
+        color: #5A5A5A;
+        font-size: 14px;
+        font-family: Arial, Helvetica, sans-serif;
+    }
 }
 
-.form-option textarea {
-    width: 300px;
-    height: 180px;
-    margin-top: 0;
-    background-color: #F4F4F4;
-    border: 1px solid #D9D9D9;
-    border-radius: 5px;
-    color: black;
-    padding: 6px;
-    color:#5A5A5A;
+.form-label {
+    margin-bottom: 1px;
+    color: #5A5A5A;
     font-size: 14px;
-    font-family: Arial, Helvetica, sans-serif;
+    letter-spacing: 1px;
 }
\ No newline at end of file
diff --git a/src/pages/LoginPage/LoginPage.js b/src/pages/LoginPage/LoginPage.js
index ef0aaa1..1ae1e76 100644
--- a/src/pages/LoginPage/LoginPage.js
+++ b/src/pages/LoginPage/LoginPage.js
@@ -19,7 +19,7 @@ class LoginPage extends React.Component {
         this.handleUpdate = this.handleUpdate.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
     }
-    
+
     handleUpdate(event) {
         event.preventDefault();
         this.setState({
@@ -37,33 +37,33 @@ class LoginPage extends React.Component {
             this.setState({
                 redirect: true,
             })
-        } catch(err) {
+        } catch (err) {
             this.setState({
                 errorMessage: "No staff found with that email/password",
             })
             document.getElementById("login-email").value = "";
         }
     }
-    
+
     render() {
-        if(this.state.redirect) {
-            return <Navigate to="/staff-home"/>
+        if (this.state.redirect) {
+            return <Navigate to="/staff-home" />
         } else {
             return (
                 <div className="page-container" id="login-page">
                     <div id="login-header">
-                        <img src={Logo} alt="MissionSAFE logo"/>
+                        <img src={Logo} alt="MissionSAFE logo" />
                         <p id="login-title">Login</p>
                         <p id="login-subtitle">Please sign in to continue.</p>
                     </div>
                     <div id="login-form">
                         <div className="login-form-input">
                             <p className="login-form-label">Email</p>
-                            <input id="login-email" name="email" onChange={this.handleUpdate} type="email"/>
+                            <input id="login-email" name="email" onChange={this.handleUpdate} type="email" />
                         </div>
                         <div className="login-form-input">
                             <p className="login-form-label">Password</p>
-                            <input id="login-password" name="password" onChange={this.handleUpdate} type="password"/>
+                            <input id="login-password" name="password" onChange={this.handleUpdate} type="password" />
                         </div>
                         <p id="login-error-message">{this.state.errorMessage}</p>
                         <p id="login-button" onClick={this.handleSubmit}>Login</p>
diff --git a/src/pages/LoginPage/LoginPage.scss b/src/pages/LoginPage/LoginPage.scss
index e31f71b..9c2e8bd 100644
--- a/src/pages/LoginPage/LoginPage.scss
+++ b/src/pages/LoginPage/LoginPage.scss
@@ -46,14 +46,14 @@
     border-radius: 5px;
     color: black;
     padding: 6px;
-    color:#5A5A5A;
+    color: #5A5A5A;
     font-size: 14px;
     width: 320px;
 }
 
 .login-form-label {
     margin-bottom: 1px;
-    color:#5A5A5A;
+    color: #5A5A5A;
     font-size: 14px;
     letter-spacing: 1px;
 }
@@ -83,5 +83,4 @@
 
 #login-error-message {
     color: #CF2329;
-}
-
+}
\ No newline at end of file

From e52052bdbb0506e0c03c5efe0f44855d545341c2 Mon Sep 17 00:00:00 2001
From: Jianger <ethantianshujiang@gmail.com>
Date: Mon, 17 Apr 2023 03:38:19 +0200
Subject: [PATCH 3/5] /create-event styling

---
 src/pages/CreateEvent/CreateEvent.js   | 27 +++++++-----
 src/pages/CreateEvent/CreateEvent.scss | 58 +++++++++++++++++---------
 src/pages/CreateForm/CreateForm.scss   |  5 +++
 3 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/src/pages/CreateEvent/CreateEvent.js b/src/pages/CreateEvent/CreateEvent.js
index e063b9b..c539332 100644
--- a/src/pages/CreateEvent/CreateEvent.js
+++ b/src/pages/CreateEvent/CreateEvent.js
@@ -3,6 +3,8 @@ import { Navigate } from "react-router";
 import { createEvent } from "../../util/ServerInterfaceEvents";
 import "./CreateEvent.scss";
 
+import Logo from "../../assets/mission-safe-logo.png";
+
 class CreateEvent extends React.Component {
     constructor(props) {
         super(props);
@@ -27,7 +29,7 @@ class CreateEvent extends React.Component {
 
     async handleSubmit(event) {
         event.preventDefault();
-        if(this.state.program.length > 0) { // DUMMY PROGRAM CHECKING
+        if (this.state.program.length > 0) { // DUMMY PROGRAM CHECKING
             try {
                 let event = await createEvent({
                     programs: [this.state.program],
@@ -35,7 +37,7 @@ class CreateEvent extends React.Component {
                 this.setState({
                     eventCode: event.code,
                 })
-            } catch(err) {
+            } catch (err) {
                 this.setState({
                     errorMessage: "Failed to create event, please try again."
                 });
@@ -45,25 +47,28 @@ class CreateEvent extends React.Component {
 
     render() {
         try {
-            if(!this.props.user.active) {
-                return <Navigate to="/unauthorized"/>
+            if (!this.props.user.active) {
+                return <Navigate to="/unauthorized" />
             } else if (this.state.eventCode) {
-                return <Navigate to={`/event/${this.state.eventCode}`}/>
+                return <Navigate to={`/event/${this.state.eventCode}`} />
             } else {
                 return (
-                    <div className="page-container">
-                        <p className="event-creation-title">Event Creation</p>
+                    <div className="page-container" id="create-event-page">
+                        <div id="create-event-header">
+                            <img src={Logo} alt="MissionSAFE logo" />
+                            <p className="event-creation-title">Create Event</p>
+                        </div>
                         <div className="event-options">
-                            <p>What program is this event associated with?</p>
-                            <input name="program" onChange={this.handleUpdate} type="text"/>
+                            <p className="prompt">What program is this event associated with?</p>
+                            <input name="program" onChange={this.handleUpdate} type="text" />
                         </div>
                         <p>{this.state.errorMessage}</p>
                         <p onClick={this.handleSubmit} className="message-page-button">Create Event</p>
                     </div>
                 )
             }
-        } catch(err) {
-            return <Navigate to="/unauthorized"/>
+        } catch (err) {
+            return <Navigate to="/unauthorized" />
         }
     }
 }
diff --git a/src/pages/CreateEvent/CreateEvent.scss b/src/pages/CreateEvent/CreateEvent.scss
index f2addba..f81dc8f 100644
--- a/src/pages/CreateEvent/CreateEvent.scss
+++ b/src/pages/CreateEvent/CreateEvent.scss
@@ -1,9 +1,27 @@
+#create-event-page img {
+    height: 110px;
+    width: 110px;
+}
+
+#create-event-header {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 36px;
+
+    img {
+        margin-bottom: 25px;
+    }
+}
+
 .event-creation-title {
-    font-size: 30px;
-    font-weight: 500;
-    color: #5A5A5A;
-    font-family: Arial, Helvetica, sans-serif;
-    margin-top: 150px;
+    font-size: 38px;
+    font-weight: 400;
+    margin-top: 0;
+    margin-bottom: 8px;
+    letter-spacing: 2px;
 }
 
 .event-options {
@@ -12,21 +30,23 @@
     align-items: center;
     justify-content: center;
     margin-bottom: 10px;
-}
 
-.event-options input {
-    margin-top: 0;
-    background-color: #F4F4F4;
-    border: 1px solid #D9D9D9;
-    border-radius: 5px;
-    color: black;
-    padding: 6px;
-    color:#5A5A5A;
-    font-size: 14px;
-    font-family: Arial, Helvetica, sans-serif;
+    input {
+        margin-top: 0;
+        background-color: #F4F4F4;
+        border: 1px solid #D9D9D9;
+        border-radius: 5px;
+        color: black;
+        padding: 6px;
+        color: #5A5A5A;
+        font-size: 14px;
+        width: 320px;
+    }
 }
 
-.event-options p {
-    margin-right: 5px;
-    font-family: Arial, Helvetica, sans-serif;
+.prompt {
+    margin-bottom: 1px;
+    color: #5A5A5A;
+    font-size: 14px;
+    letter-spacing: 1px;
 }
\ No newline at end of file
diff --git a/src/pages/CreateForm/CreateForm.scss b/src/pages/CreateForm/CreateForm.scss
index c96b5c9..919d90f 100644
--- a/src/pages/CreateForm/CreateForm.scss
+++ b/src/pages/CreateForm/CreateForm.scss
@@ -1,3 +1,8 @@
+#form-create-page img {
+    height: 110px;
+    width: 110px;
+}
+
 #form-create-header {
     width: 100%;
     display: flex;

From 54666bf191cfaa50b3b8602e1318680d2050b661 Mon Sep 17 00:00:00 2001
From: Jianger <ethantianshujiang@gmail.com>
Date: Tue, 18 Apr 2023 17:24:44 +0200
Subject: [PATCH 4/5] added fields to CreateForm

---
 src/pages/CreateForm/CreateForm.js | 48 ++++++++++++++++++------------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/pages/CreateForm/CreateForm.js b/src/pages/CreateForm/CreateForm.js
index 4bdf146..423412b 100644
--- a/src/pages/CreateForm/CreateForm.js
+++ b/src/pages/CreateForm/CreateForm.js
@@ -13,6 +13,8 @@ class CreateForm extends React.Component {
         this.state = {
             type: window.location.pathname.split("/")[2], // "event" or "youth"
             id: window.location.pathname.split("/")[3], // eventCode or fireID
+            name: "",
+            description: "",
             program: "",
             content: "",
             errorMessage: "",
@@ -74,30 +76,38 @@ class CreateForm extends React.Component {
 
     render() {
         try {
-            if(!this.props.user.active) {
-                return <Navigate to="/unauthorized"/>
-            } else if(this.state.redirect) {
-                return <Navigate to="/records"/>
+            if (!this.props.user.active) {
+                return <Navigate to="/unauthorized" />
+            } else if (this.state.redirect) {
+                return <Navigate to="/records" />
             } else {
-            return (
-                <div className="page-container" id="form-create-page">
-                    <div id="form-create-header">
-                        <img src={Logo} alt="MissionSAFE logo" />
-                        <p className="form-creation-title">Create Form</p>
-                    </div>
-                    <div className="form-option">
-                        <div className="form-option">
-                            <p className="form-label">What program is this form associated with?</p>
-                            <input name="program" onChange={this.handleUpdate} type="text" />
+                return (
+                    <div className="page-container" id="form-create-page">
+                        <div id="form-create-header">
+                            <img src={Logo} alt="MissionSAFE logo" />
+                            <p className="form-creation-title">Create Form</p>
                         </div>
                         <div className="form-option">
-                            <p className="form-label">Content</p>
-                            <textarea name="content" onChange={this.handleUpdate} />
+                            <div className="form-option">
+                                <p className="form-label">Form Name</p>
+                                <input name="name" onChange={this.handleUpdate} type="text" />
+                            </div>
+                            <div className="form-option">
+                                <p className="form-label">What program is this form associated with?</p>
+                                <input name="program" onChange={this.handleUpdate} type="text" />
+                            </div>
+                            <div className="form-option">
+                                <p className="form-label">Form Description</p>
+                                <input name="description" onChange={this.handleUpdate} type="text" />
+                            </div>
+                            <div className="form-option">
+                                <p className="form-label">Content</p>
+                                <textarea name="content" onChange={this.handleUpdate} />
+                            </div>
                         </div>
+                        <p onClick={this.handleSubmit} className="message-page-button">Create Form</p>
                     </div>
-                    <p onClick={this.handleSubmit} className="message-page-button">Create Form</p>
-                </div>
-            )
+                )
             }
         } catch (err) {
             return <Navigate to="/unauthorized" />

From 537b06ff53c9231886adaabb8f68b1c1a768bba8 Mon Sep 17 00:00:00 2001
From: Jianger <ethantianshujiang@gmail.com>
Date: Wed, 19 Apr 2023 03:25:25 +0200
Subject: [PATCH 5/5] change form desc to textarea

---
 src/pages/CreateForm/CreateForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/CreateForm/CreateForm.js b/src/pages/CreateForm/CreateForm.js
index 423412b..a0a0f11 100644
--- a/src/pages/CreateForm/CreateForm.js
+++ b/src/pages/CreateForm/CreateForm.js
@@ -98,7 +98,7 @@ class CreateForm extends React.Component {
                             </div>
                             <div className="form-option">
                                 <p className="form-label">Form Description</p>
-                                <input name="description" onChange={this.handleUpdate} type="text" />
+                                <textarea name="description" onChange={this.handleUpdate} />
                             </div>
                             <div className="form-option">
                                 <p className="form-label">Content</p>