[#1584] Redesign onboarding page by using NewLayout

akvo · Sep 4, 2023 · b3c19cd · b3c19cd
1 parent d941ccf
commit b3c19cd
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/frontend/src/modules/onboarding/affiliation-option.jsx b/frontend/src/modules/onboarding/affiliation-option.jsx
@@ -15,6 +15,7 @@ function AffiliationOption({ handleAffiliationChange, next }) {
               handleAffiliationChange(false);
               next();
             }}
+            className="small"
           >
             Yes
           </Button>
@@ -25,6 +26,7 @@ function AffiliationOption({ handleAffiliationChange, next }) {
               handleAffiliationChange(true);
               next(1);
             }}
+            className="small"
           >
             No
           </Button>

diff --git a/frontend/src/modules/onboarding/form-four.jsx b/frontend/src/modules/onboarding/form-four.jsx
@@ -20,6 +20,7 @@ import {
   UploadOutlined,
 } from "@ant-design/icons";
 import { Field } from "react-final-form";
+import FormLabel from "../../components/form-label";
 
 function FormFour({ validate }) {
   return (
@@ -31,11 +32,9 @@ function FormFour({ validate }) {
         <Field name="about" validate={validate}>
           {({ input, meta }) => (
             <div className="field-wrapper">
-              <div class="ant-col ant-form-item-label">
-                <label for="about" class="" title="">
-                  Short Bio
-                </label>
-              </div>
+              <FormLabel for="about" meta={meta}>
+                Short Bio
+              </FormLabel>
               <TextArea
                 onChange={(e) => input.onChange(e.target.value)}
                 placeholder="Max 500 letters"

diff --git a/frontend/src/modules/onboarding/form-three.jsx b/frontend/src/modules/onboarding/form-three.jsx
@@ -66,7 +66,7 @@ function FormThree({
             };
             return (
               <>
-                <div style={{ marginTop: 20, color: "#A5B0C9" }}>
+                <div className="label-text">
                   Can't see what you're looking for?
                 </div>
                 <Select

diff --git a/frontend/src/modules/onboarding/form-two.jsx b/frontend/src/modules/onboarding/form-two.jsx
@@ -66,7 +66,7 @@ function FormTwo({
             };
             return (
               <>
-                <div style={{ marginTop: 20, color: "#A5B0C9" }}>
+                <div className="label-text">
                   Can't see what you're looking for?
                 </div>
                 <Select

diff --git a/frontend/src/modules/onboarding/view.jsx b/frontend/src/modules/onboarding/view.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, notification } from "react";
 import styles from "./styles.module.scss";
-import { Button, Typography, Steps } from "antd";
+import { Typography, Steps } from "antd";
 import { Form } from "react-final-form";
 import AffiliationOption from "./affiliation-option";
 import FormOne from "./form-one";
@@ -13,6 +13,7 @@ import api from "../../utils/api";
 import { setIn } from "final-form";
 import { useRouter } from "next/router";
 import { useDeviceSize } from "../landing/landing";
+import Button from "../../components/button"
 
 function Authentication() {
   const formRef = useRef();
@@ -283,8 +284,8 @@ function Authentication() {
                     />
                   </div>
                   <div className="button-bottom-panel">
-                    <Button className="step-button-next" onClick={() => next()}>
-                      Next {">"}
+                    <Button className="step-button-next" onClick={() => next()} ghost>
+                      Next
                     </Button>
                   </div>
                 </div>
@@ -329,15 +330,16 @@ function Authentication() {
                 />
                 {currentStep > 0 && (
                   <Button className="step-button-back" onClick={previous}>
-                    {"<"} Back
+                    Back
                   </Button>
                 )}
                 {currentStep < 5 && currentStep > 1 && (
                   <Button
                     className="step-button-next abs"
                     onClick={() => next()}
+                    withArrow="link"
                   >
-                    Next {">"}
+                    Next
                   </Button>
                 )}
                 {currentStep === 5 && (
@@ -346,7 +348,7 @@ function Authentication() {
                     onClick={handleSubmit}
                     loading={loading}
                   >
-                    Submit {">"}
+                    Submit
                   </Button>
                 )}
               </div>