Rearrange optional fields (#49)

src/logistration/RegistrationPage.jsx

@@ -352,6 +352,7 @@ class RegistrationPage extends React.Component {
   addExtraOptionalFields() {
     const fields = this.props.formData.fields.map((field) => {
       let options = null;
+      let cssClass = null;
       if (REGISTRATION_EXTRA_FIELDS.includes(field.name)) {
         if (!field.required && field.name !== 'honor_code' && field.name !== 'country') {
           REGISTRATION_OPTIONAL_MAP[field.name] = true;
@@ -361,6 +362,7 @@ class RegistrationPage extends React.Component {
             type: field.type,
             onChange: e => this.handleOnChange(e),
           };
+
           if (field.type === 'select') {
             options = field.options.map((item) => ({
               value: item.value,
@@ -368,13 +370,22 @@ class RegistrationPage extends React.Component {
             }));
             props.options = options;
           }
+          if (field.name === 'gender') {
+            cssClass = 'opt-inline-field';
+          }
+
+          if (field.name === 'year_of_birth') {
+            cssClass = 'opt-inline-field opt-year-field';
+          }
+
           return (
             <ValidationFormGroup
               for={field.name}
               key={field.name}
+              className={cssClass}
             >
               <label htmlFor={field.name} className="h6 pt-3">
-                {field.label} {this.props.intl.formatMessage(messages['logistration.register.potional.label'])}
+                {field.label} {this.props.intl.formatMessage(messages['logistration.register.optional.label'])}
               </label>
               <Input {...props} />
             </ValidationFormGroup>

src/logistration/_style.scss

@@ -209,3 +209,12 @@ $apple-focus-black: $apple-black;
 .login-help {
   padding-left: 14px;
 }
+
+.opt-inline-field{
+    display: inline-block;
+    width: 50%;
+}
+
+.opt-year-field{
+    padding-left: 15px;
+}

src/logistration/messages.jsx

@@ -186,10 +186,10 @@ const messages = defineMessages({
     defaultMessage: 'Support education research by providing additional information',
     description: 'Text for a checkbox to ask user for if they are willing to provide extra information for education research',
   },
-  'logistration.register.potional.label': {
-    id: 'logistration.register.potional.label',
+  'logistration.register.optional.label': {
+    id: 'logistration.register.optional.label',
     defaultMessage: '(optional)',
-    description: 'Text that appears with potional field labels',
+    description: 'Text that appears with optional field labels',
   },
 });