Move CSS back under navigation class to avoid messy diff

1 files changed, 52 insertions, 52 deletions

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 64d21f0..d5f37f4 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -17,64 +17,48 @@ 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;
+interface PathParams {
+    id: string
+}
 
-      margin: 0 auto;
-    }
-  }
+interface NavigationProps {
+    form_state: boolean  // Whether the form is open or not
+}
 
-  .return_button {
-    text-align: left;
-  }
+class Navigation extends React.Component<NavigationProps> {
+    static containerStyles = css`
+      margin: auto;
+      width: 50%;
 
-  .return_button.closed {
-    text-align: center;
-  }
-`;
+      text-align: center;
+      font-size: 1.5rem;
 
-const returnStyles = css`
-  padding: 0.5rem 2rem;
-  border-radius: 8px;
+      > div {
+        display: inline-block;
+        margin: 2rem auto;
+        width: 50%;
+      }
 
-  color: white;
-  text-decoration: none;
-  white-space: nowrap;
+      @media (max-width: 850px) {
+        width: 100%;
 
-  background-color: ${colors.greyple};
-  transition: background-color 300ms;
+        > div {
+          display: flex;
+          justify-content: center;
 
-  :hover {
-    background-color: ${colors.darkerGreyple};
-  }
-`;
+          margin: 0 auto;
+        }
+      }
 
-interface PathParams {
-    id: string
-}
+      .return_button {
+        text-align: left;
+      }
 
-interface NavigationProps {
-    form_state: boolean  // Whether the form is open or not
-}
+      .return_button.closed {
+        text-align: center;
+      }
+    `;
 
-class Navigation extends React.Component<NavigationProps> {
     separatorStyles = css`
       height: 0;
       display: none;
@@ -84,6 +68,22 @@ class Navigation extends React.Component<NavigationProps> {
       }
     `;
 
+    static 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};
+      }
+    `;
+
     submitStyles = css`
       text-align: right;
       white-space: nowrap;
@@ -118,9 +118,9 @@ class Navigation extends React.Component<NavigationProps> {
         }
 
         return (
-            <div css={[unselectable, containerStyles]}>
+            <div css={[unselectable, Navigation.containerStyles]}>
                 <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
-                    <Link to="/" css={returnStyles}>Return Home</Link>
+                    <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
                 </div>
                 <br css={this.separatorStyles}/>
                 { submit }
@@ -173,10 +173,10 @@ function FormPage(): JSX.Element {
         return (
             <div>
                 <HeaderBar title={form.name} description={form.description}/>
-                <div css={[unselectable, containerStyles, divStyle]}>
+                <div css={[unselectable, Navigation.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>
+                        <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
                     </div>
                 </div>
             </div>