Range & Dropdown category select UI

public/assets/images/signup/categories/cog-outline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.362" height="17.196" viewBox="0 0 17.362 17.196">
+  <path id="cog-outline" d="M20.433,11.541l-1.089-.175a.334.334,0,0,1-.275-.285c-.021-.134-.042-.268-.071-.4a.337.337,0,0,1,.163-.36l.964-.535a.336.336,0,0,0,.163-.414l-.167-.459a.331.331,0,0,0-.392-.209l-1.08.209a.334.334,0,0,1-.359-.172q-.094-.175-.2-.351a.341.341,0,0,1,.029-.4l.722-.832a.334.334,0,0,0,.012-.443l-.313-.376a.329.329,0,0,0-.438-.063l-.947.569a.334.334,0,0,1-.392-.037c-.1-.088-.2-.176-.309-.259a.334.334,0,0,1-.1-.38l.392-1.033a.334.334,0,0,0-.137-.424L16.18,4.47a.334.334,0,0,0-.434.092l-.695.87a.3.3,0,0,1-.355.1s-.234-.1-.409-.155a.334.334,0,0,1-.228-.321l.017-1.1A.337.337,0,0,0,13.8,3.6l-.484-.084a.337.337,0,0,0-.38.234L12.578,4.8a.334.334,0,0,1-.325.226h-.409a.337.337,0,0,1-.325-.226l-.359-1.045a.337.337,0,0,0-.38-.234L10.3,3.6a.337.337,0,0,0-.275.351l.017,1.1a.334.334,0,0,1-.229.322l-.4.155a.333.333,0,0,1-.367-.122l-.689-.849a.334.334,0,0,0-.433-.09l-.426.247a.331.331,0,0,0-.138.421l.392,1.033a.337.337,0,0,1-.1.38c-.1.084-.209.172-.309.259a.334.334,0,0,1-.392.037L6,6.276a.334.334,0,0,0-.438.063l-.313.376a.334.334,0,0,0,.012.443l.722.832a.334.334,0,0,1,.029.4q-.106.167-.2.351a.338.338,0,0,1-.359.172L4.378,8.7a.334.334,0,0,0-.392.209l-.167.459a.336.336,0,0,0,.163.414l.962.536a.331.331,0,0,1,.163.36c-.025.134-.05.264-.071.4a.337.337,0,0,1-.275.285l-1.089.175a.338.338,0,0,0-.3.331v.489a.328.328,0,0,0,.3.331l1.089.175a.334.334,0,0,1,.275.285c.021.134.042.268.071.4a.337.337,0,0,1-.163.36l-.963.535a.336.336,0,0,0-.163.414l.167.459a.331.331,0,0,0,.392.209l1.08-.209a.334.334,0,0,1,.359.172q.094.175.2.351a.341.341,0,0,1-.029.4l-.722.833a.334.334,0,0,0-.012.443l.313.376A.329.329,0,0,0,6,17.946l.947-.569a.334.334,0,0,1,.392.037c.1.088.2.176.309.259a.334.334,0,0,1,.1.38l-.392,1.033a.334.334,0,0,0,.138.423l.426.247a.334.334,0,0,0,.434-.092l.7-.861a.307.307,0,0,1,.343-.109c.142.058.238.092.413.151a.334.334,0,0,1,.229.322l-.017,1.1a.337.337,0,0,0,.275.351l.484.084a.337.337,0,0,0,.38-.234l.359-1.044a.334.334,0,0,1,.325-.226h.409a.337.337,0,0,1,.325.226l.359,1.044a.337.337,0,0,0,.38.234l.484-.084a.337.337,0,0,0,.275-.351l-.017-1.1a.334.334,0,0,1,.229-.322c.175-.059.292-.1.4-.147a.285.285,0,0,1,.347.088l.709.874a.334.334,0,0,0,.435.091l.426-.247a.331.331,0,0,0,.138-.423l-.392-1.033a.337.337,0,0,1,.1-.38c.1-.084.209-.171.309-.259a.334.334,0,0,1,.392-.037l.944.571a.334.334,0,0,0,.438-.063l.313-.376a.334.334,0,0,0-.012-.443l-.722-.832a.334.334,0,0,1-.029-.4q.106-.169.2-.351a.338.338,0,0,1,.359-.172l1.08.209a.334.334,0,0,0,.392-.209l.167-.459a.336.336,0,0,0-.163-.414l-.964-.535a.331.331,0,0,1-.163-.36c.025-.134.05-.264.071-.4a.337.337,0,0,1,.275-.285l1.089-.175a.338.338,0,0,0,.3-.331v-.49a.344.344,0,0,0-.3-.323ZM12.056,6.1a6,6,0,0,1,5.817,4.513.668.668,0,0,1-.648.83H12.833a.668.668,0,0,1-.581-.338L10.078,7.28a.668.668,0,0,1,.411-.976,6.133,6.133,0,0,1,1.567-.2Zm-6.01,6.01A6.01,6.01,0,0,1,7.868,7.8a.668.668,0,0,1,1.051.145L11.1,11.78a.668.668,0,0,1,0,.662L8.9,16.27a.668.668,0,0,1-1.051.14,6.008,6.008,0,0,1-1.8-4.3Zm6.01,6.01a6.131,6.131,0,0,1-1.594-.207.668.668,0,0,1-.407-.978l2.195-3.821a.668.668,0,0,1,.579-.334h4.4a.668.668,0,0,1,.648.83,6,6,0,0,1-5.819,4.51Z" transform="translate(-3.374 -3.516)" fill="#dba81f"/>
+</svg>

public/assets/images/signup/categories/headset.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.002" height="20.003" viewBox="0 0 16.002 20.003">
+  <g id="headset" transform="translate(-4.5)">
+    <path id="Path_310" data-name="Path 310" d="M12.5,1.334A6.668,6.668,0,0,0,5.834,8v6H4.5V8a8,8,0,1,1,16,0v6H19.169V8A6.668,6.668,0,0,0,12.5,1.334Z" fill="#51ccc7" fill-rule="evenodd"/>
+    <path id="Path_311" data-name="Path 311" d="M16.5,17.084a1.334,1.334,0,0,1,1.334-1.334H20.5v5.334a1.334,1.334,0,0,1-1.334,1.334H17.835A1.334,1.334,0,0,1,16.5,21.084Zm-8,0A1.334,1.334,0,0,0,7.167,15.75H4.5v5.334a1.334,1.334,0,0,0,1.334,1.334H7.167A1.334,1.334,0,0,0,8.5,21.084Z" transform="translate(0 -6.415)" fill="#51ccc7"/>
+    <path id="Path_312" data-name="Path 312" d="M24.876,19.125a.667.667,0,0,1,.667.667v4a3.334,3.334,0,0,1-3.334,3.334H17.542a.667.667,0,1,1,0-1.334h4.667a2,2,0,0,0,2-2v-4A.667.667,0,0,1,24.876,19.125Z" transform="translate(-5.041 -7.79)" fill="#51ccc7" fill-rule="evenodd"/>
+    <path id="Path_313" data-name="Path 313" d="M14.625,30.584a1.334,1.334,0,0,1,1.334-1.334h1.334a1.334,1.334,0,0,1,0,2.667H15.959A1.334,1.334,0,0,1,14.625,30.584Z" transform="translate(-4.124 -11.914)" fill="#51ccc7"/>
+  </g>
+</svg>

public/assets/images/signup/categories/industry.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.409" height="18.023" viewBox="0 0 19.409 18.023">
+  <path id="industry" d="M21.333,5.127a.693.693,0,0,0-.693,0L14.727,8.059V5.716a.693.693,0,0,0-1-.617L7.8,8.059V2.943A.693.693,0,0,0,7.1,2.25H2.943a.693.693,0,0,0-.693.693V20.273H21.659V5.716a.693.693,0,0,0-.326-.589ZM16.114,18.886H13.341V14.034h2.773Zm4.159,0H17.5V13.341a.693.693,0,0,0-.693-.693H12.648a.693.693,0,0,0-.693.693v5.545H3.636V3.636H6.409V10.3l6.932-3.466V10.3l6.932-3.466Z" transform="translate(-2.25 -2.25)" fill="#ea7e7d"/>
+</svg>

public/assets/images/signup/categories/laptop.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.409" height="15.25" viewBox="0 0 19.409 15.25">
+  <g id="laptop" transform="translate(-2.25 -6.756)">
+    <path id="Path_301" data-name="Path 301" d="M19.75,19.233H5.886A1.388,1.388,0,0,1,4.5,17.847v-9.7A1.388,1.388,0,0,1,5.886,6.756H19.75a1.388,1.388,0,0,1,1.386,1.386v9.7a1.388,1.388,0,0,1-1.386,1.386ZM5.886,8.142v9.7H19.75v-9.7Z" transform="translate(-0.864)" fill="#51ccc7"/>
+    <path id="Path_302" data-name="Path 302" d="M2.25,29.256H21.659v1.386H2.25Z" transform="translate(0 -8.636)" fill="#51ccc7"/>
+  </g>
+</svg>

public/assets/images/signup/categories/line-chart-line.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.108" height="16.338" viewBox="0 0 20.108 16.338">
+  <g id="line-chart-line" transform="translate(-2 -5)">
+    <path id="Path_308" data-name="Path 308" d="M20.851,5H3.257A1.257,1.257,0,0,0,2,6.257V20.081a1.257,1.257,0,0,0,1.257,1.257H20.851a1.257,1.257,0,0,0,1.257-1.257V6.257A1.257,1.257,0,0,0,20.851,5ZM3.257,20.081V6.257H20.851V20.081Z" fill="#51ccc7"/>
+    <path id="Path_309" data-name="Path 309" d="M11.878,14.166,8.1,19.662,5.55,17.409l.666-.753,1.7,1.5,3.975-5.776,4.242,6.293,4.244-5.608.8.607L16.08,20.4Z" transform="translate(-1.319 -2.743)" fill="#51ccc7"/>
+  </g>
+</svg>

public/assets/images/signup/categories/medical-cross.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="medical-cross" d="M13.425,1.125h-6.6v5.7h-5.7v6.6h5.7v5.7h6.6v-5.7h5.7v-6.6h-5.7Zm4.5,6.9v4.2h-5.7v5.7h-4.2v-5.7h-5.7v-4.2h5.7v-5.7h4.2v5.7Z" transform="translate(-1.125 -1.125)" fill="#ea7e7d"/>
+</svg>

public/assets/images/signup/categories/money.svg

@@ -0,0 +1,7 @@
+<svg id="money" xmlns="http://www.w3.org/2000/svg" width="23.162" height="18.529" viewBox="0 0 23.162 18.529">
+  <path id="Path_329" data-name="Path 329" d="M21.2,4.5H1.125V19.941H21.2ZM19.654,18.4H2.669V6.044H19.654Z" transform="translate(-1.125 -4.5)" fill="#2cc38c"/>
+  <path id="Path_330" data-name="Path 330" d="M24.507,10.125V23.25H6.75v1.544h19.3V10.125Z" transform="translate(-2.89 -6.265)" fill="#2cc38c"/>
+  <path id="Path_331" data-name="Path 331" d="M14.162,17.812a3.641,3.641,0,0,0,3.475-3.779,3.641,3.641,0,0,0-3.475-3.779,3.641,3.641,0,0,0-3.475,3.779A3.641,3.641,0,0,0,14.162,17.812Zm0-6.015a2.1,2.1,0,0,1,1.93,2.235,2.1,2.1,0,0,1-1.93,2.235,2.1,2.1,0,0,1-1.93-2.235A2.1,2.1,0,0,1,14.162,11.8Z" transform="translate(-4.125 -6.305)" fill="#2cc38c"/>
+  <path id="Path_332" data-name="Path 332" d="M5.625,9.563H7.169v8.493H5.625Z" transform="translate(-2.537 -6.088)" fill="#2cc38c"/>
+  <path id="Path_333" data-name="Path 333" d="M23.625,9.563h1.544v8.493H23.625Z" transform="translate(-8.184 -6.088)" fill="#2cc38c"/>
+</svg>

public/assets/images/signup/categories/night-lightning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.236" height="17.196" viewBox="0 0 9.236 17.196">
+  <path id="night-lightning" d="M12.85,25.544q-.063.346.236.346h3.638L14.5,32.9h.488l7.024-9.37a.2.2,0,0,0,.039-.228.225.225,0,0,0-.228-.118H18.158l3.858-7.118q.189-.362-.236-.362H16.835a.433.433,0,0,0-.346.236Z" transform="translate(-12.839 -15.702)" fill="#f8c657"/>
+</svg>

public/assets/images/signup/categories/pattern.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.409" height="19.409" viewBox="0 0 19.409 19.409">
+  <path id="pattern" d="M5.738,0H8.847L19.423,10.576v3.108ZM13.7,0l5.724,5.724V8.833L10.59,0H13.7ZM17,0a2.339,2.339,0,0,1,1.716.711,2.335,2.335,0,0,1,.711,1.716V3.981L15.442,0H17Zm0,19.409H15.442L.014,3.981V2.426A2.32,2.32,0,0,1,.355,1.213L18.21,19.068A2.32,2.32,0,0,1,17,19.409Zm-6.406,0L.014,8.833V5.724L13.7,19.409H10.59Zm-4.852,0L.014,13.685V10.576l8.833,8.833H5.738Zm-3.3,0A2.339,2.339,0,0,1,.725,18.7a2.335,2.335,0,0,1-.711-1.716V15.428l3.981,3.981H2.44ZM2.44,0H3.995L19.423,15.428v1.554a2.32,2.32,0,0,1-.341,1.213L1.227.341A2.32,2.32,0,0,1,2.44,0Z" transform="translate(-0.014)" fill="#e2efe5"/>
+</svg>

public/assets/images/signup/categories/sprout.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.635" height="17.698" viewBox="0 0 13.635 17.698">
+  <path id="sprout" d="M18.526,2.25A6.824,6.824,0,0,0,12.176,6.6,4.335,4.335,0,0,0,8.609,4.729H6.75V6.588a4.343,4.343,0,0,0,4.338,4.338h.62v5.609A6.15,6.15,0,0,0,7.945,18.32l.876.876a4.958,4.958,0,0,1,7.629.752l1.03-.69a6.186,6.186,0,0,0-4.533-2.715V10.927h.62a6.825,6.825,0,0,0,6.817-6.817V2.25ZM11.088,9.687a3.1,3.1,0,0,1-3.1-3.1v-.62h.62a3.1,3.1,0,0,1,3.1,3.1v.62Zm8.057-5.578a5.584,5.584,0,0,1-5.578,5.578h-.62v-.62A5.584,5.584,0,0,1,18.526,3.49h.62Z" transform="translate(-6.75 -2.25)" fill="#2cc38c"/>
+</svg>

src/pages/signup/AdditionalQuestions.module.scss

@@ -82,7 +82,7 @@
             box-shadow: 0px 0px 10px black;
             border-radius: 10px;
             height: 55px;
-            font-size: 17px;
+            font-size: 16px;
             color: var(--grey-rock);
             margin-bottom: 30px;
             transition: box-shadow 0.3s, color 0.3s;
@@ -118,8 +118,21 @@
                 &.option {
                     float: right;
                 }
+
+                &.sectorIcon {
+                    margin-right: 10px;
+                }
             }
         }
+
+
+        ion-range {
+            --bar-height: 5px;
+            --bar-background: var(--black-rock);
+            --bar-background-active: var(--shamrock);
+            --knob-size: 20px;
+            --bar-border-radius: 30px;
+        }
         
     }
 }
@@ -176,21 +189,40 @@
     justify-content: center;
 
     .container {
+        width: 100%;
+        height: 90%;
+        overflow: auto;
+        padding: 10% 0;
 
         ul {
             list-style: none;
             padding: 0;
             margin: 0;
             color: white;
+            width: 100%;
+            display: block;
         }
 
-        ion-range {
-            position: absolute;
-            right: 5%;
-            top: 0;
-            transform: rotate(90deg);
-            width: 100px;
-            height: 100%;
+        li {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            width: 100%;
+            padding: 0 10%;
+            font-size: 14px;
+            opacity: 0.5;
+            transition: box-shadow 0.3s, opacity 0.3s;
+
+            &.active {
+                box-shadow: 0px 0px 10px black;
+                opacity: 1;
+            }
+
+            ion-icon {
+                font-size: 20px;
+                margin-right: 20px;
+            }
         }
     }
 }

src/pages/signup/AdditionalQuestions.tsx

@@ -7,29 +7,63 @@ type Props = { };
 type OwnState = {
     index: number,
     userType: 'INDIVIDUAL' | 'COMPANY' | '',
-    userSector: number,
+    userSector: {
+        value: number,
+        icon: string,
+        text: string
+    } | undefined,
     showPicker: boolean,
 };
 
 const slideOpts = {
-    initialSlide: 3,
+    initialSlide: 2,
     speed: 400,
     followFinger: false,
     draggable: false,
+    longSwipes: false,
+    noSwiping: true
 };
 
 const jobSectors = [{
     value: 1,
+    icon: 'assets/images/signup/categories/laptop.svg',
     text: 'Information Technology',
 }, {
     value: 2,
+    icon: 'assets/images/signup/categories/medical-cross.svg',
     text: 'Health Care'
 }, {
     value: 3,
+    icon: 'assets/images/signup/categories/money.svg',
     text: 'Finance'
 }, {
     value: 4,
+    icon: 'assets/images/signup/categories/headset.svg',
     text: 'Communication Services'
+}, {
+    value: 5,
+    icon: 'assets/images/signup/categories/industry.svg',
+    text: 'Industrials'
+}, {
+    value: 6,
+    icon: 'assets/images/signup/categories/line-chart-line.svg',
+    text: 'Consumer Staples'
+}, {
+    value: 7,
+    icon: 'assets/images/signup/categories/night-lightning.svg',
+    text: 'Energy'
+}, {
+    value: 8,
+    icon: 'assets/images/signup/categories/cog-outline.svg',
+    text: 'Utilities'
+}, {
+    value: 9,
+    icon: 'assets/images/signup/categories/sprout.svg',
+    text: 'Real Estate'
+}, {
+    value: 10,
+    icon: 'assets/images/signup/categories/pattern.svg',
+    text: 'Others'
 }];
 
 
@@ -43,7 +77,7 @@ class AdditionalQuestions extends Component<Props, OwnState> {
             index: 0,
             userType: 'INDIVIDUAL',
             showPicker: false,
-            userSector: 0,
+            userSector: undefined,
         };
 
         
@@ -98,7 +132,7 @@ class AdditionalQuestions extends Component<Props, OwnState> {
                     </div>
                     <div className={styles.choiceContainer}>
                         <div className={styles.optionButtons}>
-                            <button className={styles.optionButton} onClick={ () => this.setState({ showPicker: true })}> { this.state.userSector ? <span> { this.state.userSector } </span> : <span> Select an Option </span> } <IonIcon className={styles.option} src='assets/images/signup/options.svg'></IonIcon> </button>
+                            <button className={styles.optionButton} onClick={ () => this.setState({ showPicker: true })}> { this.state.userSector ? <span> <IonIcon className={styles.sectorIcon} src={this.state.userSector.icon}></IonIcon> { this.state.userSector.text } </span> : <span> Select an Option </span> } <IonIcon className={styles.option} src='assets/images/signup/options.svg'></IonIcon> </button>
                         </div>
                     </div>
                 </IonSlide>
@@ -110,7 +144,7 @@ class AdditionalQuestions extends Component<Props, OwnState> {
                         <p className={styles.hint}> Select answer below </p>
                     </div>
                     <div className={styles.choiceContainer}>
-                                                
+                        <IonRange mode={'ios'} value={30} min={1} max={100} step={10} snaps={true} />
                     </div>
                 </IonSlide>
 
@@ -139,7 +173,11 @@ class AdditionalQuestions extends Component<Props, OwnState> {
             { this.state.showPicker && <section className={styles.picker}>
                 <div className={styles.container}>
                     <ul>
-                        { jobSectors.map((sector) => <li key={sector.value}> { this.state.userSector === sector.value ? '*' : '' } { sector.value }. { sector.text } </li>) }
+                        { jobSectors.map((sector) => <li key={sector.value} 
+                        className={this.state.userSector === sector ? styles.active : ''}
+                        onClick={() => this.setState({ userSector: sector, showPicker: false })}> 
+                            <IonIcon src={sector.icon}></IonIcon> { sector.text } 
+                        </li>) }
                     </ul>
                 </div>
             </section> }