Implemented Illustrations in Registration Page (#233)

* Added backgrounds; reduced text size; started characters

* Implemented backgrounds; characters; further mobile and desktop optimizations

* Fixed sizing for other option textbox for checkboxes

* Convert the characters and backgrounds to SVG

* Resolved Review Info padding bug

* Resolved Navbar padding issue

* adjust illustrations

* Implemented navbar support for mobile

* Removed contentRef

---------

Co-authored-by: J164 <[email protected]>

Author: miguelaenlle

components/Form/Checkboxes/Checkboxes.module.scss

@@ -1,7 +1,7 @@
 .container {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 1.5rem;
 }
 
 .checkboxes {

components/Form/Checkboxes/RadioButton/RadioButton.module.scss

@@ -20,8 +20,10 @@
 
         border-radius: 0.25em;
         @media (max-width: 768px) {
-            width: 24px;
-            height: 24px;
+            min-width: 28px;
+            min-height: 28px;
+            width: 28px;
+            height: 28px;
         }
     }
 
@@ -48,7 +50,7 @@
         // hide it
 
         @media (max-width: 768px) {
-            font-size: 20px;
+            font-size: 16px;
         }
         display: none;
     }

components/Form/Checkboxes/StyledCheckbox/StyledCheckbox.module.scss

@@ -21,8 +21,10 @@
         border: 2px solid #ffffff;
         border-radius: 0.25em;
         @media (max-width: 768px) {
-            width: 24px;
-            height: 24px;
+            min-width: 28px;
+            min-height: 28px;
+            width: 28px;
+            height: 28px;
         }
     }
 
@@ -37,7 +39,4 @@
     .checkbox {
         display: none;
     }
-    @media (max-width: 768px) {
-        font-size: 20px;
-    }
 }

components/Form/Checkboxes/StyledInput/StyledInput.module.scss

@@ -22,6 +22,9 @@
     &:invalid {
         border: 4px solid rgb(224, 57, 7);
     }
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
 }
 
 .multiline {

components/Form/DropdownBox/Dropdown.module.scss

@@ -3,12 +3,12 @@
     flex-direction: column;
     position: relative;
     width: 100%;
-    gap: 0.5rem;
+    gap: 1rem;
 }
 
 .dropdownButton {
     width: 100%;
-    padding: 11px;
+    padding: 10px;
     font-size: 20px;
     color: #a19366;
     background-color: #ffffff;
@@ -21,10 +21,15 @@
     &:focus {
         outline: 4px solid #ad8e28;
     }
+
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
 }
 
 .dropdownIcon {
-    font-size: 16px;
+    font-size: 14px;
+    height: 22px;
     color: #757575;
 }
 
@@ -51,6 +56,10 @@
     transition:
         opacity 0.3s ease,
         height 0.3s ease;
+
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
 }
 
 .dropdownOptions.open {
@@ -65,6 +74,9 @@
     font-size: 18px;
     color: #ad8e28;
     cursor: pointer;
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
 }
 
 .dropdownOptions li:hover {

components/Form/DropdownBox/Dropdown.tsx

@@ -197,7 +197,7 @@ const Dropdown: React.FC<DropdownProps> = ({
                             <svg
                                 width="22"
                                 height="22"
-                                viewBox="0 0 24 24"
+                                viewBox="0 0 22 22"
                                 fill="currentColor"
                             >
                                 <polygon points="12,8 4,16 20,16" />
@@ -206,7 +206,7 @@ const Dropdown: React.FC<DropdownProps> = ({
                             <svg
                                 width="22"
                                 height="22"
-                                viewBox="0 0 24 24"
+                                viewBox="0 0 22 22"
                                 fill="currentColor"
                             >
                                 <polygon points="4,8 20,8 12,16" />

components/Form/FileUpload/FileUpload.module.scss

@@ -8,7 +8,7 @@
 .fileUpload {
     background-color: white;
     width: 100%;
-    padding: 5rem;
+    padding: 5rem 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -18,7 +18,7 @@
     position: relative;
 
     .text {
-        font-size: 24px;
+        font-size: 20px;
         color: #6c6c6c;
         font-style: normal;
         font-weight: 400;
@@ -32,7 +32,7 @@
     label {
         background-color: #33b1c1;
         font-weight: 400;
-        font-size: 24px;
+        font-size: 20px;
         color: white;
         padding: 1rem 5rem;
         display: flex;

components/Form/NavigationButton/NavigationButton.module.scss

@@ -14,7 +14,7 @@
     padding-left: 30px;
     padding-right: 30px;
     text-transform: uppercase;
-    font-size: 28px;
+    font-size: 24px;
     height: auto;
     cursor: pointer;
 

components/Form/TextInput/TextInput.module.scss

@@ -1,7 +1,7 @@
 .container {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 1rem;
 }
 
 .input {
@@ -23,6 +23,10 @@
     &:focus {
         outline: 4px solid #ad8e28;
     }
+
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
 }
 
 .invalid {

components/Form/TextInput/TextInput.tsx

@@ -64,7 +64,7 @@ const TextInput: React.FC<TextInputProps> = ({
                     {...props}
                 />
             )}
-            <h4>{showFeedback && meta.error}</h4>
+            {showFeedback && <h4>{meta.error}</h4>}
         </div>
     );
 };

components/ProgressBar/ProgressBar.module.scss

@@ -6,7 +6,7 @@
     grid-template-rows: 1fr;
     grid-template-columns: 1fr;
     margin-top: 1rem;
-    padding: 1rem;
+    padding: 1rem 0.75rem;
 
     .progressBar {
         position: relative;
@@ -67,7 +67,8 @@
 
 @media (max-width: 768px) {
     .progressStepper {
-        padding: 0;
+        padding: 0 0.5rem;
+        padding-top: 0.75rem;
         .progressBar {
             height: 2px;
         }

components/Registration/Pages/PersonalInfo/PersonalInfo.module.scss

@@ -1,10 +1,10 @@
 .container {
     display: flex;
     flex-direction: column;
-    gap: 3rem;
+    gap: 1.5rem;
 
     @media (max-width: 768px) {
-        gap: 2rem;
+        gap: 1rem;
     }
 }
 
@@ -15,7 +15,7 @@
     align-items: flex-start;
     @media (max-width: 768px) {
         flex-direction: column;
-        gap: 2rem;
+        gap: 1rem;
     }
 }
 

components/Registration/Pages/ReviewInfo/ReviewInfo.module.scss

@@ -14,5 +14,5 @@
 .reviewButtons {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: 1rem;
 }

components/Registration/Registration.module.scss

@@ -1,26 +1,47 @@
 .container {
-    margin-top: 13%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    width: 100%;
+    width: 1750px;
     padding: 5rem 1rem;
-    gap: 4rem;
+    padding-top: 2rem;
+    gap: 3rem;
     min-height: 100vh;
-    position: relative;
+    background-repeat: no-repeat;
+    background-size: 1750px;
+
+    @media (max-width: 1024px) {
+        background-size: 1256px;
+        max-height: 100vh;
+        overflow-y: auto;
+    }
+
     @media (max-width: 768px) {
-        padding: 4rem 1.5rem;
-        padding-bottom: 25rem;
-        // Lots of bottom padding for mobile keyboard
+        background-size: 400px;
+        gap: 2rem;
+        padding-bottom: 25rem; // bottom padding is for mobile keyboard
+    }
+}
+
+.contentWrapper {
+    margin-top: 126px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 3rem;
+    width: 80%;
+    @media (max-width: 768px) {
+        margin-top: 68px;
     }
 }
 
 .form {
     width: 100%;
     h1 {
         font-weight: 900;
-        font-size: 72px;
+        font-size: 36px;
         color: white;
         // font-size: 56px;
         @media (max-width: 768px) {
@@ -31,26 +52,27 @@
 
     h4 {
         font-weight: 400;
-        font-size: 24px;
-        color: white;
+        font-size: 20px;
+        color: red;
+        @media (max-width: 768px) {
+            font-size: 16px;
+        }
     }
 
     label,
     h3 {
         font-weight: 600;
-        font-size: 40px;
+        font-size: 20px;
         color: white;
-        // font-size: 28px;
         @media (max-width: 768px) {
-            font-size: 22px;
+            font-size: 18px;
         }
         color: white;
     }
 
     display: flex;
     flex-direction: column;
-    gap: 6rem;
-    max-width: 900px;
+    gap: 3rem;
 }
 
 .navigation {
@@ -59,3 +81,35 @@
     align-items: center;
     width: 100%;
 }
+
+.formWrapper {
+    display: flex;
+    width: 100%;
+    gap: 3rem;
+
+    max-width: 1200px;
+}
+
+.formContent {
+    flex: 2;
+}
+
+.character {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    flex: 0.5;
+    img {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+        // scale up 1.5x
+    }
+    @media (max-width: 1000px) {
+        flex: 1;
+    }
+
+    @media (max-width: 768px) {
+        display: none;
+    }
+}