Merge pull request #536 from nwplus/nwhacks2024-app-ui-changes

nwHacks2024 app UI changes

src/components/ApplicationForm/BasicInfo.js

@@ -7,7 +7,7 @@ import {
   ETHNICITY_OPTIONS,
   PRONOUN_OPTIONS,
 } from '../../utility/Constants'
-import { creatableDropdownValue, findElement } from '../../utility/utilities'
+import { applyCustomSort, creatableDropdownValue, findElement } from '../../utility/utilities'
 import Dropdown from '../Input/Dropdown'
 import Select from '../Input/Select'
 import { TextInput } from '../Input/TextInput'
@@ -66,6 +66,7 @@ const academicYear = [
   { value: '2nd year', label: '2nd year' },
   { value: '3rd year', label: '3rd year' },
   { value: '4th year', label: '4th year' },
+  { value: '5th year+', label: '5th year+' },
   { value: 'Graduate school', label: 'Graduate school' },
 ]
 
@@ -372,9 +373,6 @@ export default ({ refs, errors, formInputs, onChange }) => (
     <FormSpacing>
       <QuestionHeading>question 01</QuestionHeading>
       <SubHeading>
-        <span role="img" aria-label="Pencil emoji">
-          ✏️
-        </span>{' '}
         What is your full legal name?
         <Required />
       </SubHeading>
@@ -417,9 +415,6 @@ export default ({ refs, errors, formInputs, onChange }) => (
     <FormSpacing>
       <QuestionHeading>question 02</QuestionHeading>
       <SubHeading>
-        <span role="img" aria-label="Telephone emoji">
-          ✨
-        </span>{' '}
         What is your preferred name?
         <Required />
       </SubHeading>
@@ -441,9 +436,6 @@ export default ({ refs, errors, formInputs, onChange }) => (
     <FormSpacing>
       <QuestionHeading>question 03</QuestionHeading>
       <SubHeading>
-        <span role="img" aria-label="Baby chick emoji">
-          🐥
-        </span>{' '}
         What is your current age?
         <Required />
       </SubHeading>
@@ -481,9 +473,6 @@ export default ({ refs, errors, formInputs, onChange }) => (
     <FormSpacing>
       <QuestionHeading>question 04</QuestionHeading>
       <SubHeading>
-        <span role="img" aria-label="Telephone emoji">
-          ☎️
-        </span>{' '}
         What is your phone number?
         <Required />
       </SubHeading>
@@ -533,9 +522,6 @@ export default ({ refs, errors, formInputs, onChange }) => (
     <FormSpacing>
       <QuestionHeading>question 06</QuestionHeading>
       <SubHeading>
-        <span role="img" aria-label="Book emoji">
-          📖
-        </span>{' '}
         {formInputs.educationLevel === 'high school'
           ? 'What do you plan on studying?'
           : 'What is your current or intended major?'}
@@ -674,22 +660,23 @@ export default ({ refs, errors, formInputs, onChange }) => (
       </SubHeading>
       {errors?.dietaryRestriction && <ErrorMessage>{errors?.dietaryRestriction}</ErrorMessage>}
       {formInputs &&
-        Object.entries(formInputs?.dietaryRestriction)
-          .sort()
-          .map(([key, val]) => (
-            <Select
-              key={key}
-              type="checkbox"
-              label={DIETARY_RESTRICTION_OPTIONS[key]}
-              checked={val}
-              onChange={() =>
-                onChange({
-                  dietaryRestriction: { ...formInputs.dietaryRestriction, [key]: !val },
-                })
-              }
-              customRef={key === 'vegetarian' ? refs['dietaryRestrictionRef'] : null}
-            />
-          ))}
+        applyCustomSort(
+          Object.entries(formInputs?.dietaryRestriction),
+          Object.keys(DIETARY_RESTRICTION_OPTIONS)
+        ).map(([key, val]) => (
+          <Select
+            key={key}
+            type="checkbox"
+            label={DIETARY_RESTRICTION_OPTIONS[key]}
+            checked={val}
+            onChange={() =>
+              onChange({
+                dietaryRestriction: { ...formInputs.dietaryRestriction, [key]: !val },
+              })
+            }
+            customRef={key === 'vegetarian' ? refs['dietaryRestrictionRef'] : null}
+          />
+        ))}
       <br />
       {formInputs?.dietaryRestriction?.other && (
         <TextInput
@@ -766,17 +753,11 @@ export default ({ refs, errors, formInputs, onChange }) => (
 
     <FormSpacing>
       <QuestionHeading>question 13</QuestionHeading>
-      <SubHeading>
-        <span role="img" aria-label="Mushroom emoji">
-          🍄
-        </span>{' '}
-        What are your pronouns?
-      </SubHeading>
+      <SubHeading>What are your pronouns?</SubHeading>
       {/* {errors?.pronouns && <ErrorMessage>{errors?.pronouns}</ErrorMessage>} */}
       {formInputs &&
-        Object.entries(formInputs?.pronouns)
-          .sort()
-          .map(([key, val]) => (
+        applyCustomSort(Object.entries(formInputs?.pronouns), Object.keys(PRONOUN_OPTIONS)).map(
+          ([key, val]) => (
             <Select
               key={key}
               type="checkbox"
@@ -789,7 +770,8 @@ export default ({ refs, errors, formInputs, onChange }) => (
               }
               customRef={key === 'vegetarian' ? refs['pronounsRef'] : null}
             />
-          ))}
+          )
+        )}
       <br />
       {formInputs?.pronouns?.other && (
         <TextInput
@@ -808,12 +790,7 @@ export default ({ refs, errors, formInputs, onChange }) => (
 
     <FormSpacing>
       <QuestionHeading>question 14</QuestionHeading>
-      <SubHeading>
-        <span role="img" aria-label="Person raising one hand emoji">
-          🙋
-        </span>{' '}
-        What is your gender do you identify as?
-      </SubHeading>
+      <SubHeading>What is your gender do you identify as?</SubHeading>
       {/* {errors?.gender && <ErrorMessage>{errors?.gender}</ErrorMessage>} */}
       <Dropdown
         options={genderOptions}
@@ -848,9 +825,8 @@ export default ({ refs, errors, formInputs, onChange }) => (
       <SubHeading>What is your race/ethnicity?</SubHeading>
       {/* {errors?.ethnicity && <ErrorMessage>{errors?.ethnicity}</ErrorMessage>} */}
       {formInputs &&
-        Object.entries(formInputs?.ethnicity)
-          .sort()
-          .map(([key, val]) => (
+        applyCustomSort(Object.entries(formInputs?.ethnicity), Object.keys(ETHNICITY_OPTIONS)).map(
+          ([key, val]) => (
             <Select
               key={key}
               type="checkbox"
@@ -863,7 +839,8 @@ export default ({ refs, errors, formInputs, onChange }) => (
               }
               customRef={refs['ethnicityRef']}
             />
-          ))}
+          )
+        )}
       <br />
       {formInputs?.ethnicity?.other && (
         <TextInput

src/components/ApplicationForm/HackathonInfo.js

@@ -1,33 +1,34 @@
 import React from 'react'
-import { FormSpacing, SubHeading } from '.'
-import { A, CenteredH1 } from '../Typography'
+import { FormSpacing } from '.'
+import { A, CenteredH1, P } from '../Typography'
 
 export default () => {
   return (
     <>
       <FormSpacing>
         <CenteredH1>
-          Western Canada’s largest hackathon is here
+          Western Canada’s largest hackathon is here! {''}
           <span role="img" aria-label="Party emoji">
             🎉
           </span>
-          !
         </CenteredH1>
-        <SubHeading>
-          We’re excited to have you join us January 20-21, 2024 for a 24-hour long hackathon filled
-          with workshops and exciting new events. This year, we’re also giving you the opportunity
-          to showcase your project live in front of a panel of judges and hundreds of hackers from
-          around North America! We focus on creating a quality hackathon experience all of our
-          attendees, so please fill out the form so we can get a better idea of the amount of people
-          attending, and of course, craft the best 24-hour hacker experience for you!
-        </SubHeading>
-        <SubHeading>
+        <P>
+          Join us on January 20-21, 2024, for a thrilling 24-hour hackathon of innovation and
+          collaboration. Immerse yourself in a dynamic atmosphere with engaging workshops and
+          events, and seize the chance to showcase your project live in front of a distinguished
+          panel of judges and a vibrant community of hackers from across North America. Apply now
+          and explore the exciting opportunities that await you at nwHacks 2024!{' '}
+          <span role="img" aria-label="Rocket emoji">
+            🚀
+          </span>
+        </P>
+        <P>
           Learn more at{' '}
           <A href="https://nwhacks.io" target="_blank">
             https://nwhacks.io
           </A>
           !
-        </SubHeading>
+        </P>
       </FormSpacing>
     </>
   )

src/components/ApplicationForm/Questionnaire.js

@@ -2,13 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import { Dropdown, Select, TextInput } from '../../components/Input'
 import { ErrorMessage, QuestionHeading, ErrorSpan as Required } from '../../components/Typography'
-import { FormSpacing, SubHeading } from './'
-import {
-  CenteredH1,
-  // P
-} from '../Typography'
-import { findElement } from '../../utility/utilities'
 import { copyText } from '../../utility/Constants'
+import { findElement } from '../../utility/utilities'
+import { CenteredH1 } from '../Typography'
+import { FormSpacing, SubHeading } from './'
 
 const StyledDropdown = styled(Dropdown)`
   .react-select__control {
@@ -39,8 +36,8 @@ export default ({ errors, formInputs, onChange }) => {
       <FormSpacing>
         <CenteredH1>
           Almost there...{' '}
-          <span role="img" aria-label="Ghost emoji">
-            👻
+          <span role="img" aria-label="Grinning face with star eyes emoji">
+            🤩
           </span>
         </CenteredH1>
       </FormSpacing>
@@ -84,9 +81,6 @@ export default ({ errors, formInputs, onChange }) => {
       <FormSpacing>
         <QuestionHeading>Question 21</QuestionHeading>
         <SubHeading>
-          <span role="img" aria-label="Grinning face with star eyes emoji">
-            🤩
-          </span>{' '}
           Have you previously attended any nwPlus organized events? (select all that apply)
           <Required />
         </SubHeading>

src/components/ApplicationForm/Skills.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { CONTRIBUTION_ROLE_OPTIONS, copyText } from '../../utility/Constants'
+import { applyCustomSort } from '../../utility/utilities'
 import { Select, TextArea, TextInput } from '../Input'
 import ResumeUploadBtn from '../ResumeUploadBtn'
-import { CenteredH1, ErrorMessage, QuestionHeading, ErrorSpan as Required } from '../Typography'
+import { CenteredH1, ErrorMessage, P, QuestionHeading, ErrorSpan as Required } from '../Typography'
 import { FormSpacing, SubHeading } from './'
 
 const QuestionForm = styled.form`
@@ -91,22 +92,23 @@ export default ({ refs, errors, formInputs, onChange, role, handleResume }) => {
         </SubHeading>
         {errors?.contributionRole && <ErrorMessage>{errors?.contributionRole}</ErrorMessage>}
         {formInputs &&
-          Object.entries(formInputs?.contributionRole)
-            .sort()
-            .map(([key, val]) => (
-              <Select
-                key={key}
-                type="checkbox"
-                label={CONTRIBUTION_ROLE_OPTIONS[key]}
-                checked={val}
-                onChange={() =>
-                  onChange({
-                    contributionRole: { ...formInputs.contributionRole, [key]: !val },
-                  })
-                }
-                customRef={key === 'vegetarian' ? refs['contributionRoleRef'] : null}
-              />
-            ))}
+          applyCustomSort(
+            Object.entries(formInputs?.contributionRole),
+            Object.keys(CONTRIBUTION_ROLE_OPTIONS)
+          ).map(([key, val]) => (
+            <Select
+              key={key}
+              type="checkbox"
+              label={CONTRIBUTION_ROLE_OPTIONS[key]}
+              checked={val}
+              onChange={() =>
+                onChange({
+                  contributionRole: { ...formInputs.contributionRole, [key]: !val },
+                })
+              }
+              customRef={key === 'vegetarian' ? refs['contributionRoleRef'] : null}
+            />
+          ))}
         {formInputs?.contributionRole?.other && (
           <TextInput
             placeholder="Please Specify"
@@ -237,6 +239,10 @@ export default ({ refs, errors, formInputs, onChange, role, handleResume }) => {
             />
             {errors?.resume && <ErrorMessage>{errors?.resume}</ErrorMessage>}
           </FormRow>
+          <P>
+            This resume is not directly assessed in your application, but will be put in a resume
+            bank to be shared with nwHacks sponsors for internship and new grad opportunities!
+          </P>
           <FormRow fieldValue="GitHub/BitBucket/GitLab">
             <TextInput
               placeholder="Optional"

src/components/Common.js

@@ -85,7 +85,6 @@ export const HR = styled.hr`
 `
 
 export const TextInputLike = css`
-  font-weight: bold;
   max-width: 100%;
   background-color: transparent;
   padding: 10px;

src/components/Typography.js

@@ -35,7 +35,8 @@ export const H3 = styled.h3`
 export const P = styled.p`
   ${text};
   ${p => p.highlight && `color: ${p.theme.colors.linkHover}`};
-  margin: 0;
+  margin: 10px 0;
+  line-height: 1.5;
 `
 
 export const I = styled.i`

src/utility/Constants.js

@@ -139,32 +139,31 @@ export const ETHNICITY_OPTIONS = Object.freeze({
   white: 'White',
   otherAsian: 'Other Asian (Thai, Cambodian, etc)',
   otherPacificIslander: 'Other Pacific Islander',
-  other: 'Other (Please Specify)',
   preferNot: 'Prefer not to answer',
+  other: 'Other (Please Specify)',
 })
 
 export const PRONOUN_OPTIONS = Object.freeze({
-  sheher: 'she/her',
   hehim: 'he/him',
+  sheher: 'she/her',
   theythem: 'they/them',
-  shethey: 'she/they',
   hethey: 'he/they',
+  shethey: 'she/they',
   preferNot: 'Prefer not to answer',
   other: 'Other',
 })
 
 export const DIETARY_RESTRICTION_OPTIONS = Object.freeze({
   none: 'None',
-  vegetarian: 'Vegetarian',
-  vegan: 'Vegan',
   celiacDisease: 'Celiac Disease',
-  kosher: 'Kosher',
   halal: 'Halal',
+  kosher: 'Kosher',
+  vegetarian: 'Vegetarian',
+  vegan: 'Vegan',
   other: 'Allergies/other',
 })
 
 export const CONTRIBUTION_ROLE_OPTIONS = Object.freeze({
-  beginner: 'Beginner',
   designer: 'Designer',
   developer: 'Developer',
   pm: 'Product/project manager',
@@ -219,8 +218,8 @@ export const HACKER_APPLICATION_TEMPLATE = Object.freeze({
       white: false,
       otherAsian: false,
       otherPacificIslander: false,
-      other: false,
       preferNot: false,
+      other: false,
     },
     dietaryRestriction: {
       none: false,
@@ -243,7 +242,6 @@ export const HACKER_APPLICATION_TEMPLATE = Object.freeze({
   skills: {
     firstTimeHacker: null,
     contributionRole: {
-      beginner: false,
       designer: false,
       developer: false,
       pm: false,