SignupPage styles and quota from SignupForm

src/models/SignupForm.ts

@@ -10,6 +10,7 @@ export interface SignupForm {
   end_time: string;
   questions: Question[];
   signups: string[];
+  quota: number;
 }
 
 export async function getForms(): Promise<SignupForm[]> {

src/pages/admin/SignupCreatePage.tsx

@@ -132,6 +132,11 @@ class SignupCreatePage extends React.Component<SignupCreatePageProps, SignupCrea
           title: "Visible",
           default: true,
         },
+        quota: {
+          type: "integer",
+          title: "Quota",
+          default: null,
+        },
         start_time: {
           type: "string",
           title: "Start time",

src/views/SignUpPage/SignUpPage.scss

@@ -1,37 +1,79 @@
+@import "../../assets/scss/globals";
+@import "../../components//Button/Button.scss";
+
 .sign-up-page {
-  display: flex;
+  flex: 1 0 auto;
 
-  fieldset {
-    border: none;
-    padding: 0;
-    margin: 1rem 0;
+  .sign-up-statusmessage {
+    color: color(orange1);
+  }
 
-    .form-group > label {
-      margin: 0.5rem 0;
-      font-weight: 600;
-      display: block;
+  .sign-up-list {
+    justify-content: start;
+    li {
+      padding-bottom: 0.3rem;
     }
 
-    input[type="text"] {
-      display: block;
-    }
-
-    input[type="radio"], input[type="checkbox"] {
-      margin-right: 4px;
+    .reserved {
+      color: color(blue1);
     }
   }
 
-  .question {
-    display: flex;
-    flex-flow: column nowrap;
+  .sign-up-form {
+    legend {
+      display: none;
+    }
 
-    span {
-      input {
-        margin-right: 1rem;
+    & > div:last-child {
+      display: flex;
+      justify-content: center;
+
+      button[type="submit"] {
+        @extend .button;
+        @extend .filled;
+      }
+    }
+
+    fieldset {
+      border: none;
+      padding: 0;
+      margin: 1rem 0;
+
+      .form-group {
+        padding-bottom: 0.5rem;
+
+        & > label {
+          margin: 0.5rem 0;
+          font-weight: 600;
+          display: block;
+        }
       }
 
-      h3 {
-        margin: 0.5rem 0;
+      input[type="text"], input[type="email"] {
+        display: block;
+        height: 48px;
+        width: 100%;
+        font-size: 1.5rem;
+        padding: 0 16px;
+      }
+
+      input[type="radio"], input[type="checkbox"] {
+        margin-right: 4px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .radio, .checkbox {
+        padding-bottom: 0.5rem;
+
+        & > label {
+          display: block;
+          height: 100%;
+
+          & span {
+            vertical-align: super;
+          }
+        }
       }
     }
   }

src/views/SignUpPage/SignUpPageView.tsx

@@ -4,6 +4,8 @@ import "./SignUpPage.scss";
 import PageSection from "@components/PageSection";
 import { SignupForm } from "@models/SignupForm";
 import { buildSchema, buildUISchema } from "./FormUtils";
+import AsideSection from "@components/AsideSection";
+import MainSection from "@components/MainSection";
 
 interface SignUpPageViewProps {
   signUpForm: SignupForm;
@@ -15,11 +17,16 @@ interface SignUpPageViewProps {
 
 const renderList = (signUpForm: SignupForm) => {
   return (
-    <ol>
-      {signUpForm.signups.map((s, idx) => (
-        <li key={idx}>{s}</li>
-      ))}
-    </ol>
+    <>
+      <h6>
+        Ilmoittautuneet {signUpForm.quota && (`(${signUpForm.signups.length}/${signUpForm.quota})`)}:
+      </h6>
+      <ol>
+        {signUpForm.signups.map((s, idx) => (
+          <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
+        ))}
+      </ol>
+    </>
   )
 }
 
@@ -36,8 +43,10 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
     const uiSchema = buildUISchema(signUpForm);
 
     return (
-      <div>
-        <h1>Title: {signUpForm.title}</h1>
+      <>
+        <h1>
+          {signUpForm.title}
+        </h1>
         <Form
           schema={schema as any}
           uiSchema={uiSchema}
@@ -45,24 +54,30 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
           idPrefix="rjsf"
           onChange={onChange}
           onSubmit={onSubmit}
+          className="sign-up-form"
         />
-      </div>
+      </>
     );
   }
 
   const form = signUpForm !== null
     ? renderForm()
-    : <div>Loading...</div>;
+    : <>Loading...</>;
 
   const signups = signUpForm && signUpForm.signups ? renderList(signUpForm) : null;
   return (
-    <div className="sign-up-page">
-      {statusMessage}
-      <PageSection backgroundColor="dark-blue">
+    <PageSection className="sign-up-page" backgroundColor="white1" textColor="dark-blue">
+      <AsideSection />
+      <MainSection>
+        <span className="sign-up-statusmessage">
+          {statusMessage}
+        </span>
         {form}
+      </MainSection>
+      <AsideSection className="sign-up-list">
         {signups}
-      </PageSection>
-    </div>
+      </AsideSection>
+    </PageSection>
   )
 }