fixed selectbox label

relates #209
GSG-G8 · Jun 11, 2020 · 0cb4634 · 0cb4634
1 parent b359910
commit 0cb4634
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 65 deletions.
diff --git a/client/src/components/application/NonlinearStepper/GeneralInfo.js b/client/src/components/application/NonlinearStepper/GeneralInfo.js
@@ -10,10 +10,8 @@ import InputText from '../../common/TextField';
 import SelectBox from '../SelectBox';
 import Typography from '../../common/Typography';
 import selectBoxQuestions from './questions';
-// import { GeneralInfoStyles } from './style';
 
 const GeneralInfos = ({ handleFormInput, formValues, errorMsg }) => {
-  // const classes = GeneralInfoStyles();
   const {
     GazaAreas,
     GazaUniversities,
@@ -91,38 +89,39 @@ const GeneralInfos = ({ handleFormInput, formValues, errorMsg }) => {
           errorMsg.includes('Error Mobile Number')
         }
       />
-      <br />
-
-      <SelectBox
-        className="nonlinearSelect"
-        label="Age"
-        name="age"
-        items={['<18', '18-20', '21-25', '26-30', '31-35', '36-40', '40+']}
-        setVal={handleFormInput}
-        value={formValues.age}
-        isError={errorMsg.includes('Age is required')}
-      />
-      <SelectBox
-        className="nonlinearSelect"
-        label="Address"
-        name="address"
-        items={formValues.location === 'gaza' ? GazaAreas : KhalilAreas}
-        setVal={handleFormInput}
-        value={formValues.address}
-        isError={errorMsg.includes('Address is required')}
-      />
-      <SelectBox
-        className="nonlinearSelect"
-        label="university"
-        name="university"
-        items={
-          formValues.location === 'gaza' ? GazaUniversities : KhalilUniversities
-        }
-        setVal={handleFormInput}
-        value={formValues.university}
-        isError={errorMsg.includes('Select your university')}
-      />
-      <br />
+      <div className="general_selects">
+        <SelectBox
+          className="nonlinearSelect"
+          label="Age"
+          name="age"
+          items={['<18', '18-20', '21-25', '26-30', '31-35', '36-40', '40+']}
+          setVal={handleFormInput}
+          value={formValues.age}
+          isError={errorMsg.includes('Age is required')}
+        />
+        <SelectBox
+          className="nonlinearSelect"
+          label="Address"
+          name="address"
+          items={formValues.location === 'gaza' ? GazaAreas : KhalilAreas}
+          setVal={handleFormInput}
+          value={formValues.address}
+          isError={errorMsg.includes('Address is required')}
+        />
+        <SelectBox
+          className="nonlinearSelect"
+          label="university"
+          name="university"
+          items={
+            formValues.location === 'gaza'
+              ? GazaUniversities
+              : KhalilUniversities
+          }
+          setVal={handleFormInput}
+          value={formValues.university}
+          isError={errorMsg.includes('Select your university')}
+        />
+      </div>
 
       <Typography className="label">Specialization</Typography>
 
@@ -134,36 +133,35 @@ const GeneralInfos = ({ handleFormInput, formValues, errorMsg }) => {
         onChange={handleFormInput}
         isError={errorMsg.includes('Insert your Specialization')}
       />
-      <br />
-
-      <SelectBox
-        className="nonlinearSelect"
-        label="Coding Experience"
-        name="codingExperience"
-        items={codeExperience}
-        setVal={handleFormInput}
-        value={formValues.codingExperience}
-        isError={errorMsg.includes('Select your coding experience')}
-      />
-      <SelectBox
-        className="nonlinearSelect"
-        label="Primary Motivation"
-        name="primaryMotivation"
-        items={primaryMotivationForm}
-        setVal={handleFormInput}
-        value={formValues.primaryMotivation}
-        isError={errorMsg.includes('Select your primary motivation first')}
-      />
-      <SelectBox
-        className="nonlinearSelect"
-        label="How did you hear about the Code Academy"
-        name="caReading"
-        items={advertisement}
-        setVal={handleFormInput}
-        value={formValues.caReading}
-        isError={errorMsg.includes('Select how did you hear about Us first')}
-      />
-      <br />
+      <div className="general_selects">
+        <SelectBox
+          className="nonlinearSelect"
+          label="Coding Experience"
+          name="codingExperience"
+          items={codeExperience}
+          setVal={handleFormInput}
+          value={formValues.codingExperience}
+          isError={errorMsg.includes('Select your coding experience')}
+        />
+        <SelectBox
+          className="nonlinearSelect"
+          label="Primary Motivation"
+          name="primaryMotivation"
+          items={primaryMotivationForm}
+          setVal={handleFormInput}
+          value={formValues.primaryMotivation}
+          isError={errorMsg.includes('Select your primary motivation first')}
+        />
+        <SelectBox
+          className="nonlinearSelect"
+          label="How did you hear about the Code Academy"
+          name="caReading"
+          items={advertisement}
+          setVal={handleFormInput}
+          value={formValues.caReading}
+          isError={errorMsg.includes('Select how did you hear about Us first')}
+        />
+      </div>
 
       <Typography className="label">CV Link</Typography>
 

diff --git a/client/src/components/application/NonlinearStepper/index.js b/client/src/components/application/NonlinearStepper/index.js
@@ -164,7 +164,9 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
             <Stepper nonLinear activeStep={activeStep}>
               {steps.map((label, index) => (
                 <Step key={label}>
-                  <StepButton onClick={handleStep(index)}>{label}</StepButton>
+                  <StepButton onClick={() => handleStep(index)}>
+                    {label}
+                  </StepButton>
                 </Step>
               ))}
             </Stepper>

diff --git a/client/src/components/application/NonlinearStepper/style.css b/client/src/components/application/NonlinearStepper/style.css
@@ -106,6 +106,11 @@
   text-align: left;
 }
 
+.general_selects{
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
 
 @media only screen and (max-width: 1150px) {