Complete version of the registration form.

src/components/RegForm.scss

@@ -1,18 +1,73 @@
+@import '../colors.scss';
+
 form#registration {
   max-width: 24.5em;
   padding: 1em;
-}
-
-.nameBar {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
-  align-items: baseline;
+  align-items: center;
 }
 
 .visitors {
+  display: flex;
+  width: 72vw;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+
+.visitor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-top: 1em;
   margin-bottom: 1em;
   padding: 1em;
   border-radius: 5px;
-  background-color: rgb(235, 235, 235);
+  background-color: $background;
+  width: 400px;
+  font-family: 'Montserrat-Medium';
+
+  label {
+    color: $brown-text !important;
+  }
+
+  input,
+  label,
+  span {
+    font-size: 1.3rem;
+  }
+
+  .ant-form-item {
+    width: 100%;
+  }
+}
+
+.addVisitorButton {
+  font-family: 'Montserrat-Medium';
+  color: $green-text !important;
+  font-size: 1.5rem !important;
+  height: unset !important;
+  background-color: transparent;
+  text-transform: uppercase;
+  border-width: 0.2rem;
+  border-color: $green-text;
+
+  :hover {
+    background-color: $background !important;
+  }
+}
+
+.submitButton {
+  font-family: 'Montserrat-Medium';
+  color: $green-text !important;
+  font-size: 2rem !important;
+  height: unset !important;
+  background-color: transparent;
+  text-transform: uppercase;
+  border-width: 0.2rem;
+  border-color: $green-text;
+
+  :hover {
+    background-color: $background !important;
+  }
 }

src/components/RegForm.tsx

@@ -1,11 +1,12 @@
-import { Button, Checkbox, Col, Form, Input, Row, Select } from 'antd';
+import { Button, Form, Input, Select } from 'antd';
 import { useParams } from 'react-router';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import "./RegForm.scss";
+import './RegForm.scss';
 import { addVisitor } from '../api';
-import { arrayToString, capFirstLetter } from './utils';
+import { arrayToString } from './utils';
 import { Visitor } from '../model/visitor';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useState } from 'react';
 
 const { Option } = Select;
 
@@ -17,95 +18,195 @@ interface FormValues {
   visitors: Visitor[];
 }
 
-const preferences = ["vegan", "vegetarian", "everything goes"].map(preference => {
+const preferences = ['vegan', 'vegetarian', 'murder'].map((preference) => {
-    return <Option key={preference} value={preference}>{capFirstLetter(preference)}</Option>
+  return (
+    <Option key={preference} value={preference}>
+      <FormattedMessage id={'registration.form.preferences.' + preference} />
+    </Option>
+  );
 });
 
-const allergies = ["lactose", "dairy", "gluten", "wheat"].map(allergy => {
+const allergies = ['lactose', 'dairy', 'gluten', 'wheat'].map((allergy) => {
-    return <Option key={allergy} value={allergy}>{capFirstLetter(allergy)}</Option>
+  return (
+    <Option key={allergy} value={allergy}>
+      <FormattedMessage id={'registration.form.allergies.' + allergy} />
+    </Option>
+  );
 });
 
+const welcomeDrinks = ['alcoholBubbles', 'alcoholFreeBubbles'].map(
+  (welcomeDrink) => {
+    return (
+      <Option key={welcomeDrink} value={welcomeDrink}>
+        <FormattedMessage
+          id={'registration.form.welcomeDrinks.' + welcomeDrink}
+        />
+      </Option>
+    );
+  }
+);
+
 export const RegForm = () => {
   const { id } = useParams<ParamTypes>();
+  const intl = useIntl();
+  const [visitorCount, setVisitorCount] = useState(0);
 
   const onFinish = (values: FormValues) => {
-        values.visitors.map(visitor => {
+    values.visitors.map((visitor) => {
       addVisitor({
         ...visitor,
-                allergies: visitor.allergies ? arrayToString(visitor.allergies) : "",
+        allergies: visitor.allergies ? arrayToString(visitor.allergies) : '',
-                services: visitor.services ? arrayToString(visitor.services) : "",
+        services: visitor.services ? arrayToString(visitor.services) : '',
-                preferences: visitor.preferences ?? "",
+        preferences: visitor.preferences ?? '',
-                invitationId: visitor.invitationId = atob(id),
+        invitationId: (visitor.invitationId = atob(id)),
       });
     });
-    }
+  };
 
   const [form] = Form.useForm();
 
   return (
-        <Form form={form} name="registration" onFinish={onFinish} autoComplete="off">
+    <Form
-            <Form.List name="visitors">
+      form={form}
+      name='registration'
+      onFinish={onFinish}
+      autoComplete='off'
+      layout='vertical'
+    >
+      <Form.List name='visitors'>
         {(fields, { add, remove }) => (
           <>
-                        {
+            <div className='visitors'>
-                            fields.map(field => (
+              {fields.map((field) => (
-                                <div className="visitors" key={field.key}>
+                <div className='visitor' key={field.key}>
-                                    <div className="nameBar">
                   <Form.Item
-                                            label="Name"
+                    label={intl.formatMessage({
+                      id: 'registration.form.name',
+                    })}
                     name={[field.name, 'name']}
                     fieldKey={[field.fieldKey, 'name']}
-                                            rules={[{ required: true, message: 'Missing name' }]}
+                    rules={[
+                      {
+                        required: true,
+                        message: intl.formatMessage({
+                          id: 'registration.form.name.missing',
+                        }),
+                      },
+                    ]}
                   >
-                                            <Input placeholder="Full or nickname" />
+                    <Input
+                      placeholder={intl.formatMessage({
+                        id: 'registration.form.name.placeholder',
+                      })}
+                    />
                   </Form.Item>
-                                        <MinusCircleOutlined onClick={() => remove(field.name)} className="deleteButton" />
+                  <Form.Item
-                                    </div>
+                    name={[field.name, 'allergies']}
-                                    <Form.Item name={[field.name, "allergies"]} label="Allergies"
+                    label={intl.formatMessage({
-                                        fieldKey={[field.fieldKey, 'allergies']}>
+                      id: 'registration.form.allergies',
-                                        <Select mode="tags" placeholder="Lactose, wheat...">
+                    })}
+                    fieldKey={[field.fieldKey, 'allergies']}
+                  >
+                    <Select
+                      mode='tags'
+                      placeholder={intl.formatMessage({
+                        id: 'registration.form.allergies.placeholder',
+                      })}
+                    >
                       {allergies}
                     </Select>
                   </Form.Item>
-                                    <Form.Item name={[field.name, "preferences"]} label="Preferences"
+                  <Form.Item
-                                        fieldKey={[field.fieldKey, 'preferences']}>
+                    name={[field.name, 'preferences']}
-                                        <Select placeholder="Vegan...">
+                    label={intl.formatMessage({
+                      id: 'registration.form.preferences',
+                    })}
+                    fieldKey={[field.fieldKey, 'preferences']}
+                  >
+                    <Select
+                      placeholder={intl.formatMessage({
+                        id: 'registration.form.preferences.placeholder',
+                      })}
+                    >
                       {preferences}
                     </Select>
                   </Form.Item>
                   <Form.Item
-                                        name={[field.name, "services"]} label="Do you need?"
+                    name={[field.name, 'welcomeDrinks']}
-                                        fieldKey={[field.fieldKey, 'services']}>
+                    label={intl.formatMessage({
-                                        <Checkbox.Group>
+                      id: 'registration.form.welcomeDrinks',
-                                            <Row>
+                    })}
-                                                <Col>
+                    rules={[
-                                                    <Checkbox value="ride">
+                      {
-                                                        Ride
+                        required: true,
-                                                    </Checkbox>
+                        message: intl.formatMessage({
-                                                </Col>
+                          id: 'registration.form.welcomeDrinks.missing',
-                                                <Col>
+                        }),
-                                                    <Checkbox value="accomodation">
+                      },
-                                                        Accomodation
+                    ]}
-                                                    </Checkbox>
+                    fieldKey={[field.fieldKey, 'preferences']}
-                                                </Col>
+                  >
-                                            </Row>
+                    <Select
-                                        </Checkbox.Group>
+                      placeholder={intl.formatMessage({
+                        id: 'registration.form.welcomeDrinks.placeholder',
+                      })}
+                    >
+                      {welcomeDrinks}
+                    </Select>
                   </Form.Item>
+                  <Button
+                    danger
+                    onClick={() => {
+                      remove(field.name);
+                      setVisitorCount(visitorCount - 1);
+                    }}
+                    shape='round'
+                    size='large'
+                  >
+                    <FormattedMessage id='registration.form.remove' />
+                  </Button>
                 </div>
               ))}
+            </div>
             <Form.Item>
-                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+              <Button
-                                Add visitor
+                className='addVisitorButton'
+                size='large'
+                onClick={() => {
+                  add();
+                  setVisitorCount(visitorCount + 1);
+                }}
+                shape='round'
+              >
+                <FormattedMessage id='registration.addVisitor' />
               </Button>
             </Form.Item>
           </>
         )}
       </Form.List>
+      {visitorCount == 0 ? (
         <Form.Item>
-                <Button type="primary" htmlType="submit">
+          <Button
-                    Submit
+            className='submitButton'
+            type='dashed'
+            htmlType='submit'
+            shape='round'
+          >
+            <FormattedMessage id='registration.form.decline' />
           </Button>
         </Form.Item>
+      ) : (
+        <Form.Item>
+          <Button
+            className='submitButton'
+            htmlType='submit'
+            size='large'
+            shape='round'
+          >
+            <FormattedMessage id='registration.form.submit' />
+          </Button>
+        </Form.Item>
+      )}
     </Form>
   );
 };

src/components/utils.ts

@@ -1,7 +1,3 @@
-export const capFirstLetter = (str: string) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 export const arrayToString = (str: string) => {
     return str.toString().replaceAll(",", ", ");
 }

src/constants/localization/registration/en.ts

@@ -4,4 +4,32 @@ export const registration: Record<string, string> = {
     "registration.about": "We will be updating the program and menu in lintujamaslo.net",
     "registration.saveTheLink": "Save the link",
     "registration.fillInBefore": "Please fill the visitors in before 27th of June",
+    "registration.addVisitor": "Add visitor",
+
+    "registration.form.submit": "Submit",
+    "registration.form.decline": "Decline invitation",
+    "registration.form.remove": "Remove",
+
+    "registration.form.name": "Name",
+    "registration.form.name.placeholder": "Full or nickname",
+    "registration.form.name.missing": "Missing name",
+
+    "registration.form.allergies": "Food allergies",
+    "registration.form.allergies.placeholder": "Lactose, wheat...",
+    "registration.form.allergies.lactose": "Lactose",
+    "registration.form.allergies.dairy": "Dairy",
+    "registration.form.allergies.gluten": "Gluten",
+    "registration.form.allergies.wheat": "Wheat",
+    
+    "registration.form.preferences": "Food preferences",
+    "registration.form.preferences.placeholder": "Vegan...",
+    "registration.form.preferences.vegan": "Vegan",
+    "registration.form.preferences.vegetarian": "Vegetarian",
+    "registration.form.preferences.murder": "Murder",
+    
+    "registration.form.welcomeDrinks": "Welcome drink",
+    "registration.form.welcomeDrinks.placeholder": "What fancy you?",
+    "registration.form.welcomeDrinks.missing": "Missing welcome drink",
+    "registration.form.welcomeDrinks.alcoholBubbles": "Alcohol bubbles",
+    "registration.form.welcomeDrinks.alcoholFreeBubbles": "Alcohol-free bubbles"
 }

src/constants/localization/registration/fi.ts

@@ -3,5 +3,32 @@ export const registration: Record<string, string> = {
     "registration.questions": "Jos sinulla on mitään kysymyksiä\nsienistä\nvaarallisista pedoista",
     "registration.about": "Päivitämme menua ja ohjelmaa osoitteeseen lintujamaslo.net",
     "registration.saveTheLink": "Laita linkki talteen",
-    "registration.fillInBefore": "Lisääthän teiltä osallistuvat henkilöt viimeistään 27th of June",
+    "registration.fillInBefore": "Lisääthän teiltä osallistuvat henkilöt viimeistään 27. kesäkuuta",
+    "registration.addVisitor": "Lisää osallistuja",
+
+    "registration.form.submit": "Vahvista",
+    "registration.form.decline": "Kieltäydyn kutsusta",
+    "registration.form.remove": "Poista",
+
+    "registration.form.name": "Nimi",
+    "registration.form.name.placeholder": "Koko tai lempinimi",
+    "registration.form.name.missing": "Nimi puuttuu",
+    "registration.form.allergies": "Ruoka-allergiat",
+    "registration.form.allergies.placeholder": "Laktoosi, vehnä...",
+    "registration.form.allergies.lactose": "Laktoosi",
+    "registration.form.allergies.dairy": "Maitotuotteet",
+    "registration.form.allergies.gluten": "Gluteeni",
+    "registration.form.allergies.wheat": "Vehnä",
+
+    "registration.form.preferences": "Erikoisruokavalio",
+    "registration.form.preferences.placeholder": "Vegaaninen...",
+    "registration.form.preferences.vegan": "Vegaani",
+    "registration.form.preferences.vegetarian": "Kasvissyöjä",
+    "registration.form.preferences.murder": "Murha",
+    
+    "registration.form.welcomeDrinks": "Tervetuliasmalja",
+    "registration.form.welcomeDrinks.placeholder": "Mitä saisi olla?",
+    "registration.form.welcomeDrinks.missing": "Tervetulias malja puuttuu",
+    "registration.form.welcomeDrinks.alcoholBubbles": "Holillista kuplivaa",
+    "registration.form.welcomeDrinks.alcoholFreeBubbles": "Holitonta kuplivaa"
 }

src/pages/Registration.scss

@@ -5,13 +5,13 @@
   align-items: center;
   flex-direction: column;
   white-space: pre-line;
-  text-transform: uppercase;
 
   .Registration-main {
     display: flex;
     flex-direction: column;
     align-items: center;
     max-width: 50%;
+    text-transform: uppercase;
 
     img {
       max-width: 60%;
@@ -27,6 +27,7 @@
   .Registration-desc {
     max-width: 23rem;
     margin-top: 3rem;
+    text-transform: uppercase;
     h2 {
       text-align: center;
       color: $brown-text !important;