Merge pull request #51 from Bostonhacks/application-styles

Minor styling changes, added Sign Up Button
Bostonhacks · Sep 25, 2023 · 1e8f998 · 1e8f998
2 parents 0c72b33 + ca0d8a6
commit 1e8f998
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 32 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -19,6 +19,7 @@ const router = createBrowserRouter(
       {/* <Route path="portal" element={<Portal />} /> */}
       <Route path="login" element={<Login />} />
       <Route path="dashboard" element={<Dashboard />} />
+      <Route path="application" element={<Application />}/>
     </Route>
   )
 );

diff --git a/src/assets/images/ApplicationPage/RegisterButton.svg b/src/assets/images/ApplicationPage/RegisterButton.svg
diff --git a/src/components/ApplicationPageComponents/ApplicationOptions.js b/src/components/ApplicationPageComponents/ApplicationOptions.js
@@ -376,7 +376,7 @@ const educationLevels = [
   'Prefer not to answer',
 ];
 
-const sleepAccomodations = ['yes', 'no', 'maybe'];
+const sleepAccomodations = ['Yes', 'No', 'Maybe'];
 
 const programmingList = [
   'A# .NET',

diff --git a/src/pages/Application.jsx b/src/pages/Application.jsx
@@ -13,6 +13,7 @@ import Select from 'react-select';
 
 // Import assets.
 import BackgroundScroll from '../assets/images/ApplicationPage/ScrollBackground.svg';
+import RegisterButton from '../assets/images/ApplicationPage/RegisterButton.svg';
 
 // Importing options for some of the questions.
 import {
@@ -195,15 +196,17 @@ const Application = ({ applicationId }) => {
     setProgrammingInputs(values);
   };
 
-  // TODO: Form validation, mobile view, Check for logged in
+  // TODO: Form validation, mobile view, Check for logged in, form submission
   // Redirect user to login page if they are not logged in.
 
+  /*
   useEffect(() => {
     if (loading) return;
 
     console.log(user);
     if (!user) navigate('/login');
   }, [user, loading, navigate]);
+  */
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -240,7 +243,7 @@ const Application = ({ applicationId }) => {
           transform: 'translate(-50%, -50%)',
         }}
       >
-        <div className="h-[65vh] w-[80vh] overflow-scroll">
+        <div className="h-[80vh] w-[90vh] overflow-auto">
           {/* Form Title */}
           <div className="text-center font-minecraft">
             <h2 className="text-[#453119] text-[60px] font-bold">
@@ -262,7 +265,7 @@ const Application = ({ applicationId }) => {
               </h3>
 
               {/* General Information Form Fields */}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="md:grid md:grid-cols-2 md:gap-4">
                 <div>
                   <label className="ml-1 font-bold">First Name</label>
                   <input
@@ -375,8 +378,8 @@ const Application = ({ applicationId }) => {
               </h3>
 
               {/* Address Information Form Fields */}
-              <div className="grid grid-cols-2 gap-4">
-                <div className="col-span-2">
+              <div className="md:grid md:grid-cols-2 md:gap-4">
+                <div className="md:col-span-2">
                   <label className="ml-1 font-bold">Address</label>
                   <input
                     placeholder="Address"
@@ -414,7 +417,7 @@ const Application = ({ applicationId }) => {
                 <div>
                   <label className="ml-1 font-bold">State</label>
                   <small className="ml-2">
-                    Select <i>"Outside US"</i> if not applicable
+                    Select <i>"Outside US"</i> if NA
                   </small>
                   <Controller
                     name="state"
@@ -451,7 +454,7 @@ const Application = ({ applicationId }) => {
               </h3>
 
               {/* Education Form Fields */}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="md:grid md:grid-cols-2 md:gap-4">
                 <div>
                   <label className="ml-1 font-bold">College</label>
                   <input
@@ -518,7 +521,7 @@ const Application = ({ applicationId }) => {
               </h3>
 
               {/* Experience Form Fields */}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="md:grid md:grid-cols-2 md:gap-4">
                 <div>
                   <label className="ml-1 font-bold">
                     How many hackathons have you been to before?
@@ -613,7 +616,7 @@ const Application = ({ applicationId }) => {
               </h3>
 
               {/* Misc Form Fields */}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="md:grid md:grid-cols-2 md:gap-4">
                 <div>
                   <label className="ml-1 font-bold">Dietary Restrictions</label>
                   <input
@@ -625,43 +628,44 @@ const Application = ({ applicationId }) => {
 
                 <div>
                   <label className="ml-1 font-bold">
-                    Do you need sleep accommodations?
+                    What is your T-Shirt size?
                   </label>
                   <Controller
-                    name="sleep"
+                    name="shirtSize"
                     control={control}
                     render={({ field }) => (
                       <Select
                         styles={selectFieldStyles}
-                        options={sleepAccomodations.map(
-                          (educationLevelOption) => {
-                            return {
-                              label: educationLevelOption,
-                              value: educationLevelOption,
-                            };
-                          }
-                        )}
+                        options={shirtSizes.map((educationLevelOption) => {
+                          return {
+                            label: educationLevelOption,
+                            value: educationLevelOption,
+                          };
+                        })}
                         {...field}
                       />
                     )}
                   />
                 </div>
+
                 <div>
                   <label className="ml-1 font-bold">
-                    What is your T-Shirt size?
+                    Do you need sleep accommodations?
                   </label>
                   <Controller
-                    name="shirtSize"
+                    name="sleep"
                     control={control}
                     render={({ field }) => (
                       <Select
                         styles={selectFieldStyles}
-                        options={shirtSizes.map((educationLevelOption) => {
-                          return {
-                            label: educationLevelOption,
-                            value: educationLevelOption,
-                          };
-                        })}
+                        options={sleepAccomodations.map(
+                          (sleepOption) => {
+                            return {
+                              label: sleepOption,
+                              value: sleepOption,
+                            };
+                          }
+                        )}
                         {...field}
                       />
                     )}
@@ -679,7 +683,7 @@ const Application = ({ applicationId }) => {
               </h3>
 
               {/* Links Form Fields */}
-              <div className="grid grid-cols-2 gap-4">
+              <div className="md:grid md:grid-cols-2 md:gap-4">
                 <div>
                   <label className="ml-1 font-bold">Github URL</label>
                   <input
@@ -719,7 +723,8 @@ const Application = ({ applicationId }) => {
                 (Min 50 Max 400 Characters):
               </p>
               <textarea
-                className="w-full h-[200px] resize-none p-1 rounded-xl"
+                placeholder="Tell us more!"
+                className="w-full h-[200px] resize-none p-1 rounded-xl px-4 bg-[#A79581] placeholder-white text-white shadow-inner shadow-black/25"
                 {...register('bostonhacks', {
                   required: true,
                   maxLength: 400,
@@ -802,6 +807,9 @@ const Application = ({ applicationId }) => {
               </div>
             </div>
 
+
+
+
             <hr className="border border-black w-3/4 mx-auto" />
 
             <div className="my-[50px]">
@@ -819,9 +827,10 @@ const Application = ({ applicationId }) => {
             </div>
             <div className="w-full flex justify-end">
               <input
+                style={{ backgroundImage: "url(" + RegisterButton + ")"}}
                 type="submit"
-                className="bg-green-600 p-2 rounded-lg cursor-pointer hover:bg-slate-400"
-                value="Submit!"
+                className="cursor-pointer w-[150px] h-[75px] bg-contain bg-no-repeat"
+                value=""
               />
             </div>
           </form>