Breaks Up CSS Into Components

Moves the styles from the CSS file, into emotion CSS in each component's
file to make navigation easier, and keep CSS and JSX together.Drops
raw-loader dependency.

Signed-off-by: Hassan Abouelela <[email protected]>

2 files changed, 141 insertions, 479 deletions

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index b966e84..647003f 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -11,12 +11,143 @@ import Loading from "../components/Loading";
 import ScrollToTop from "../components/ScrollToTop";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
+import colors from "../colors";
+import { unselectable }  from "../commonStyles";
 
 
 interface PathParams {
     id: string
 }
 
+interface NavigationProps {
+    form_state: boolean  // Whether the form is open or not
+}
+
+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;
+
+      button {
+        padding: 0.5rem 4rem;
+        cursor: pointer;
+
+        border: none;
+        border-radius: 8px;
+
+        color: white;
+        font: inherit;
+
+        background-color: ${colors.blurple};
+        transition: background-color 300ms;
+      }
+
+      button:hover {
+        background-color: ${colors.darkerBlurple};
+      }
+    `;
+
+    render(): JSX.Element {
+        let submit = null;
+        if (this.props.form_state) {
+            submit = (
+                <div css={this.submitStyles}>
+                    <button form="form" type="submit">Submit</button>
+                </div>
+            );
+        }
+
+        return (
+            <div css={[unselectable, this.containerStyles]}>
+                <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
+                    <Link to="/" css={this.returnStyles}>Return Home</Link>
+                </div>
+                <br css={this.separatorStyles}/>
+                { submit }
+            </div>
+        );
+    }
+}
+
+const formStyles = css`
+  margin: auto;
+  width: 50%;
+
+  @media (max-width: 800px) {
+    /* Make form larger on mobile and tablet screens */
+    width: 80%;
+  }
+`;
+
+const closedHeaderStyles = css`
+  margin-bottom: 2rem;
+  padding: 1rem 4rem;
+  border-radius: 8px;
+
+  text-align: center;
+  font-size: 1.5rem;
+
+  background-color: ${colors.error};
+`;
+
 function FormPage(): JSX.Element {
     const { id } = useParams<PathParams>();
 
@@ -33,7 +164,7 @@ function FormPage(): JSX.Element {
     }
 
     const questions = form.questions.map((question, index) => {
-        return <RenderedQuestion question={question} public_state={new Map()} key={index}/>;
+        return <RenderedQuestion question={question} public_state={new Map()} key={index + Date.now()}/>;
     });
 
     function handleSubmit(event: SyntheticEvent) {
@@ -53,39 +184,22 @@ function FormPage(): JSX.Element {
     const open: boolean = form.features.includes(FormFeatures.Open);
 
     let closed_header = null;
-    let submit = null;
-
-    if (open) {
-        submit = (
-            <div className="submit_form">
-                <button form="form" type="submit">Submit</button>
-            </div>
-        );
-    } else {
-        closed_header = (
-            <div className="closed_header">
-                <div>This form is now closed. You will not be able to submit your response.</div>
-            </div>
-        );
+    if (!open) {
+        closed_header = <div css={closedHeaderStyles}>This form is now closed. You will not be able to submit your response.</div>;
     }
 
-
     return (
         <div>
-            <HeaderBar title={form.name} description={form.description} key={2}/>
-            <div css={css`${require("./css/FormPage.css")};`}>
-                <form id="form" onSubmit={handleSubmit} className="unselectable">
+            <HeaderBar title={form.name} description={form.description}/>
+
+            <div>
+                <form id="form" onSubmit={handleSubmit} css={[formStyles, unselectable]}>
                     { closed_header }
-                    {questions}
+                    { questions }
                 </form>
-                <div className="nav unselectable">
-                    <div className={ "nav_buttons" + (open ? "" : " closed") }>
-                        <Link to="/" className="return_home">Return Home</Link>
-                    </div>
-                    <br className="nav_separator"/>
-                    { submit }
-                </div>
+                <Navigation form_state={open}/>
             </div>
+
             <div css={css`margin-bottom: 10rem`}/>
             <ScrollToTop/>
         </div>
diff --git a/src/pages/css/FormPage.css b/src/pages/css/FormPage.css
deleted file mode 100644
index 254ddef..0000000
--- a/src/pages/css/FormPage.css
+++ /dev/null
@@ -1,452 +0,0 @@
-form {
-    margin: auto;
-    width: 50%;
-}
-
-@media (max-width: 800px) {
-    /* Make form larger on mobile and tablet screens */
-    form {
-        width: 80%;
-    }
-}
-
-hr {
-    color: gray;
-    margin: 3rem 0;
-}
-
-h1 {
-    font-size: 2.5rem;
-    margin-bottom: 0;
-    text-align: center;
-}
-
-h3 {
-    margin-top: 0;
-    text-align: center;
-}
-
-.section_header {
-    margin-top: 1rem;
-}
-
-.closed_header {
-    margin-bottom: 2rem;
-    text-align: center;
-}
-
-.closed_header div {
-    font-size: 1.5rem;
-    background-color: #f04747;
-
-    padding: 1rem 4rem;
-    border-radius: 8px;
-}
-
-.unselectable {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.selectable {
-    -moz-user-select: text;
-    -webkit-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-}
-
-/* ------------------------------------------------------------- */
-/*                           Required                            */
-/* ------------------------------------------------------------- */
-.required_star {
-    display: none;
-}
-
-#required.required_star {
-    display: inline-block;
-    position: relative;
-
-    color: red;
-
-    top: -0.2rem;
-    margin-left: 0.2rem;
-}
-
-/* ------------------------------------------------------------- */
-/*                          Checkboxes                           */
-/* ------------------------------------------------------------- */
-.checkbox_label {
-    display: inline-block;
-    position: relative;
-    top: 0.25em;
-
-    width: 1em;
-    height: 1em;
-
-    margin: 1rem 0.5rem 0 0;
-    border: whitesmoke 0.2rem solid;
-    border-radius: 25%;
-
-    -webkit-transition: background-color 300ms ease-in-out;
-    transition: background-color 300ms ease-in-out;
-}
-
-.checkbox_label input {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-}
-
-.unselected_checkbox_label {
-    background-color: white;
-}
-
-.unselected_checkbox_label:hover {
-    background-color: lightgray;
-}
-
-.selected_checkbox_label {
-    background-color: #7289DA; /* Blurple */
-}
-
-.checkmark_span {
-    position: absolute;
-}
-
-.selected_checkbox_label .checkmark_span {
-    width: 0.30rem;
-    height: 0.60rem;
-    left: 0.25em;
-
-    border: solid white;
-    border-width: 0 0.2rem 0.2rem 0;
-
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
-/* ------------------------------------------------------------- */
-/*                             Radio                             */
-/* ------------------------------------------------------------- */
-input[type="radio"] {
-    margin: 1rem 0.5rem 0 0;
-}
-
-/* ------------------------------------------------------------- */
-/*                            Select                             */
-/* ------------------------------------------------------------- */
-.select_container {
-    display: inline-block;
-    position: relative;
-
-    width: min(20rem, 90%);
-    height: 100%;
-    min-height: 2rem;
-
-    background: whitesmoke;
-
-    color: black;
-    text-align: center;
-
-    margin-bottom: 0;
-
-    border: 0.1rem solid black;
-    border-radius: 8px;
-
-    -webkit-transition: border-radius 400ms;
-    transition: border-radius 400ms;
-}
-
-.select_container.active {
-    height: auto;
-    border-radius: 8px 8px 0 0;
-}
-
-.select_arrow {
-    display: inline-block;
-    height: 0.5rem;
-    width: 0.5rem;
-
-    position: relative;
-    float: right;
-    right: 1em;
-    top: 0.7rem;
-
-    border: solid black;
-    border-width: 0 0.2rem 0.2rem 0;
-
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-
-    -webkit-transition: transform 400ms;
-    transition: transform 400ms;
-}
-
-.select_container.active .select_arrow {
-    -webkit-transform: translateY(40%) rotate(225deg);
-    -ms-transform: translateY(40%) rotate(225deg);
-    transform: translateY(40%) rotate(225deg);
-}
-
-.selected_option {
-    display: block;
-    padding: 0.5rem 0;
-}
-
-.select_options_container {
-    position: relative;
-    width: 100%;
-
-    /* Need to account for margin */
-    left: -0.1rem;
-}
-
-.select_options {
-    display: block;
-    position: absolute;
-    width: 100%;
-
-    visibility: hidden;
-    opacity: 0;
-
-    background: whitesmoke;
-    overflow: hidden;
-
-    border: 0.1rem solid black;
-    border-radius: 0 0 8px 8px;
-    border-top: none;
-
-    -webkit-transition: opacity 400ms, visibility 400ms;
-    transition: opacity 400ms, visibility 400ms;
-}
-
-.select_container.active .select_options {
-    visibility: visible;
-    opacity: 1;
-}
-
-.select_options > div > div {
-    padding: 0.75rem;
-}
-
-.select_options > div:hover {
-    background-color: lightgray;
-}
-
-.select_options hr {
-    margin: 0 1rem;
-}
-
-/* ------------------------------------------------------------- */
-/*                          Text Types                           */
-/* ------------------------------------------------------------- */
-.short_text, .text_area {
-    display: inline-block;
-    width: min(20rem, 90%);
-    height: 100%;
-    min-height: 2rem;
-
-    background: whitesmoke;
-
-    color: black;
-    padding: 0 1rem;
-    font: inherit;
-
-    margin-bottom: 0;
-
-    border: 0.1rem solid black;
-    border-radius: 8px;
-}
-
-.text_area {
-    min-height: 20rem;
-    min-width: 40%;
-    width: 100%;
-    box-sizing: border-box;
-
-    padding: 1rem;
-}
-
-/* ------------------------------------------------------------- */
-/*                            Range                              */
-/* ------------------------------------------------------------- */
-.range {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-}
-
-.range label {
-    width: 1rem;
-}
-
-.range label span {
-    display: inline-block;
-    transform: translateX(-50%);
-    margin: 0 50%;
-
-    white-space: nowrap;
-
-    transition: transform 300ms;
-}
-
-.range_dot {
-    width: 0.8rem;
-    height: 0.8rem;
-    background-color: whitesmoke;
-
-    border: 0.2rem solid whitesmoke;
-    border-radius: 50%;
-
-    transition: background-color 300ms;
-}
-
-.range_dot.selected {
-    background-color: #7289DA; /* Blurple */
-}
-
-.range_slider_container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-
-    position: absolute;
-    z-index: -1;
-
-    top: 2rem;
-
-    transition: all 300ms;
-}
-
-.range_slider {
-    width: 98%; /* Needs to be slightly smaller than container to work on all devices */
-    height: 0.5rem;
-    background-color: whitesmoke;
-
-    transition: transform 300ms;
-}
-
-/* ------------------------------------------------------------- */
-/*                         Mobile Range                          */
-/* ------------------------------------------------------------- */
-@media (max-width: 800px){
-    .range {
-        width: 20%;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .range_dot {
-        margin-bottom: 1.5rem;
-    }
-
-    .range label span {
-        margin-left: 0;
-        transform: translateY(1.6rem) translateX(2rem);
-    }
-
-    .range_slider_container {
-        width: 0.5rem;
-        left: 0.32rem;
-        height: 88%;
-
-        background: whitesmoke;
-        z-index: -1;
-    }
-
-    .range_slider {
-        display: none;
-    }
-}
-
-/* ------------------------------------------------------------- */
-/*                          Navigation                           */
-/* ------------------------------------------------------------- */
-.nav {
-    margin: auto;
-    width: 50%;
-
-    text-align: center;
-    font-size: 1.5rem;
-    white-space: nowrap;
-}
-
-.nav_separator {
-    height: 0;
-    display: none;
-}
-
-.nav > div {
-    display: inline-block;
-    margin: 2rem auto;
-    width: 50%;
-}
-
-.nav_buttons {
-    text-align: left;
-}
-
-.nav_buttons.closed {
-    text-align: center;
-}
-
-.submit_form {
-    text-align: right;
-}
-
-/* Tile Buttons Vertically On Smaller Devices */
-@media (max-width: 850px) {
-    .nav {
-        width: 100%;
-    }
-
-    .nav_separator {
-        display: block;
-    }
-
-    .nav > div {
-        display: flex;
-        justify-content: center;
-
-        margin: 0 auto;
-    }
-}
-
-.return_home {
-    padding: 0.5rem 2rem;
-    border-radius: 8px;
-
-    color: white;
-    text-decoration: none;
-
-    background-color: #99AAB5; /* Gray-ish */
-    transition: background-color 300ms;
-}
-
-.return_home:hover {
-    background-color: #6E7D88; /* Darker gray-ish */
-}
-
-.submit_form button {
-    padding: 0.5rem 4rem;
-    cursor: pointer;
-
-    border: none;
-    border-radius: 8px;
-
-    color: white;
-    font: inherit;
-
-    background-color: #7289DA; /* Blurple */
-    transition: background-color 300ms;
-}
-
-.submit_form button:hover {
-    background-color: #4E609C; /* Darker blurple */
-}