Create profile UI

public/assets/images/signup/profile-pictures/upload.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14.228" viewBox="0 0 18 14.228">
+  <g id="upload" transform="translate(0 -3.044)">
+    <path id="Path_581" data-name="Path 581" d="M.562,10.522a.562.562,0,0,1,.562.562v3.937A1.125,1.125,0,0,0,2.25,16.147h13.5a1.125,1.125,0,0,0,1.125-1.125V11.085a.562.562,0,1,1,1.125,0v3.937a2.25,2.25,0,0,1-2.25,2.25H2.25A2.25,2.25,0,0,1,0,15.022V11.085a.562.562,0,0,1,.562-.562ZM5.625,6.983a.562.562,0,0,0,.8,0L9,4.4l2.579,2.579a.562.562,0,1,0,.8-.795L9.4,3.21a.562.562,0,0,0-.8,0L5.625,6.187a.562.562,0,0,0,0,.8Z" fill="#2cc38c" fill-rule="evenodd"/>
+    <path id="Path_582" data-name="Path 582" d="M17.437,4.5A.562.562,0,0,1,18,5.062v9a.562.562,0,1,1-1.125,0v-9A.562.562,0,0,1,17.437,4.5Z" transform="translate(-8.438 -0.728)" fill="#2cc38c" fill-rule="evenodd"/>
+  </g>
+</svg>

src/pages/signup/AdditionalQuestions.module.scss

@@ -221,21 +221,27 @@
         }
         
         .profileImages {
-            display: grid;
-            width: 100%;
+            display: flex;
+            width: 100vw;
             list-style: none;
             height: 100%;
+            left: -7%;
+            position: relative;
             overflow-y: hidden;
             overflow-x: auto;
-            grid-template-columns: 50px 50px 50px 50px;
-            grid-template-rows: auto;
+            justify-content: flex-start;
+            flex-direction: column;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            
             
             button {
-                width: 15vw;
-                height: 15vw;
+                margin: 0 auto;
+                display: block;
+                width: 19vw;
+                height: 19vw;
                 border-radius: 50%;
                 font-size: 10px;
-                display: inline-block;
                 outline: none;
                 background-color: var(--ash-dust);
                 color: var(--black-rock);
@@ -248,6 +254,22 @@
                     border-width: 2px;
                     box-shadow: 0px 0px 10px 0px var(--shamrock);
                 }
+
+                &.upload {
+                    background-color: transparent;
+                    border-color: var(--shamrock);
+                    border-width: 2px;
+                    font-size: 12px;
+                    color: var(--shamrock);
+
+                    ion-icon {
+                        width: 30px;
+                        height: 30px;
+                        font-size: 20px;
+                        display: block;
+                        margin: 0 auto;
+                    }
+                }
             }
 
             ion-icon {
@@ -296,7 +318,7 @@
     height: 60px;
     --border-color: var(--rock);
     --color: var(--rock);
-    --background: transparent;
+    --background: var(--charcoal);
     --border-radius: 50%;
     --border-width: 2px;
     transition: opacity 0.3;

src/pages/signup/AdditionalQuestions.tsx

@@ -241,6 +241,12 @@ const AdditionalQuestions: React.FC = () => {
                 </div>
                 <div className={styles.choiceContainer}>
                     <ul className={styles.profileImages}>
+                        <li>
+                            <button className={styles.upload}>
+                                <IonIcon src={'assets/images/signup/profile-pictures/upload.svg'}></IonIcon>
+                                <label> Upload </label>
+                            </button>
+                        </li>
                         { profileImages.map((image) => {
                             return <li key={image}>
                                 <button className={selectedImage === image ? styles.active : ''}>