Change styles of form's title, buttons and inputs and content for que…

…stion 1

src/components/app/App.css

@@ -1,5 +1,4 @@
 #root {
-  max-width: 1440px;
   margin: 0 auto;
 }
 

src/components/form-footer/FormFooter.tsx

@@ -9,17 +9,17 @@ type Props = {
 const FormFooter: FC<Props> = ({isPreviewButton = true, isLastStep = false}) => {
     const navigate = useNavigate()
     return (
-        <Row justify={'end'} className={'form-footer'}>
+        <Row className={'form-footer'}>
             <Col>
                 {isPreviewButton && (
                     <Button type={'text'} onClick={() => navigate(-1)}
-                            style={{marginRight: 12}}>{'Preview step'}</Button>
+                            style={{marginRight: 12}}>{'Back'}</Button>
                 )}
                 {isLastStep && (
                     <Button type={'primary'} size={'large'} htmlType={'submit'}>{'Submit'}</Button>
                 )}
                 {!isLastStep && (
-                    <Button type={'primary'} size={'large'} htmlType={'submit'}>{'Next step'}</Button>
+                    <Button type={'primary'} htmlType={'submit'}>{'Continue'}</Button>
                 )}
             </Col>
         </Row>

src/components/step-title/StepTitle.tsx

@@ -1,18 +1,18 @@
 import React, {FC} from 'react';
 import {Typography} from "antd";
-import './StepTitle.scss'
+// import './StepTitle.scss'
 type Props = {
-    title: string,
-    subtitle: string
+  title: string,
+  subtitle: string
 }
 const {Title, Paragraph} = Typography
 const StepTitle:FC<Props> = ({title, subtitle}) => {
-    return (
-        <div className={'step-title'}>
-            <Title level={4}>{title}</Title>
-            <Paragraph style={{color: 'gray'}}>{subtitle}</Paragraph>
-        </div>
-    );
+  return (
+    <div className={'step-title'}>
+      <Title level={2}>{title}</Title>
+      <Paragraph className={'description'}>{subtitle}</Paragraph>
+    </div>
+  );
 };
 
 export default StepTitle;

src/components/themeContext/index.tsx

@@ -24,15 +24,11 @@ export const theme : ThemeConfig = {
       lineHeight: 1.71,
     },
     Input: {
-      borderRadius: 4,
       colorBorder: "#B9B9BA",
-      colorErrorBorder: "#F6414C",
-      colorErrorText: "#F6414C",
-      fontSize: 16,
-      lineHeight: 24,
       colorTextPlaceholder: "#A0A0A2",
-      paddingContentHorizontal: 16,
-      paddingContentVertical: 8,
+      colorText: "#101012",
+      borderRadiusLG: 4,
+      fontFamily: "Inter Medium",
     }
   },
   token: {

src/pages/form/Form.scss

@@ -1,32 +1,23 @@
-.form-container {
-  position: relative;
-  width: 600px;
-  background-color: #fff;
-  border: 1px solid #e3e3e3;
-  border-radius: 10px;
-  padding: 30px 30px;
-  margin-top: 30px;
+.ant-form-vertical {
+  width: 640px;
 
-  .form-wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: 300px;
+  .ant-input-affix-wrapper {
+    padding: 8px 15px 8px 16px;
+    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled),
+    .ant-form-item-explain-error {
+      border-color: #f6414c;
 
-    .form-body {
-      flex: 1 1 auto;
+      .ant-input-prefix {
+        color: #101012;
+      }
+    }
 
+    .ant-input-prefix {
+      font-family: "Inter Medium";
     }
   }
 
-  .step-box {
-    position: absolute;
-    right: 30px;
-    top: 20px;
 
-    .ant-typography {
-      color: #888;
-    }
-  }
 }
 
 .radio-grid-container {

src/pages/form/Form.tsx

@@ -13,28 +13,28 @@ import FormStep10 from "./FormStep10";
 import FormStep11 from "./FormStep11";
 import FormStep12 from "./FormStep12";
 
-const {Text} = Typography
+const {Text, Title, Paragraph} = Typography
 const Form = () => {
-    const params = useParams()
-    return (
-            <div className={'form-container'}>
-                <div className="step-box">
-                    <Text>{`Step ${params.step}/12`}</Text>
-                </div>
-                {params.step === '1' && <FormStep01/>}
-                {params.step === '2' && <FormStep02/>}
-                {params.step === '3' && <FormStep03/>}
-                {params.step === '4' && <FormStep04/>}
-                {params.step === '5' && <FormStep05/>}
-                {params.step === '6' && <FormStep06/>}
-                {params.step === '7' && <FormStep07/>}
-                {params.step === '8' && <FormStep08/>}
-                {params.step === '9' && <FormStep09/>}
-                {params.step === '10' && <FormStep10/>}
-                {params.step === '11' && <FormStep11/>}
-                {params.step === '12' && <FormStep12/>}
-            </div>
-    );
+  const params = useParams()
+  return (
+    <section>
+      <div className={'container'}>
+        <Paragraph className={'subtitle'}>{`Question ${params.step} of 12`}</Paragraph>
+        {params.step === '1' && <FormStep01/>}
+        {params.step === '2' && <FormStep02/>}
+        {params.step === '3' && <FormStep03/>}
+        {params.step === '4' && <FormStep04/>}
+        {params.step === '5' && <FormStep05/>}
+        {params.step === '6' && <FormStep06/>}
+        {params.step === '7' && <FormStep07/>}
+        {params.step === '8' && <FormStep08/>}
+        {params.step === '9' && <FormStep09/>}
+        {params.step === '10' && <FormStep10/>}
+        {params.step === '11' && <FormStep11/>}
+        {params.step === '12' && <FormStep12/>}
+      </div>
+    </section>
+  );
 };
 
 export default Form;

src/pages/form/FormStep01.tsx

@@ -5,32 +5,31 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep01 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    type FormType = {
-        brokerFee: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, brokerFee: values.brokerFee })
-        navigate('/form/2')
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{brokerFee: documentInfo?.brokerFee}} className={'form-wrapper'}>
-            <StepTitle title={'Remortgage broker fee (£)'} subtitle={"Enter the amount payable below"} />
-            <div className="form-body">
-            <Form.Item
-                name={'brokerFee'}
-                label={'Remortgage broker fee (£) '}
-                rules={[
-                    { required: true, message: 'This field is required' },
-                    { message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/ },
-                ]}>
-                <Input size={'large'} placeholder={'Enter remortgage broker fee'} autoFocus={true} prefix={'£'} />
-            </Form.Item>
-            </div>
-            <FormFooter isPreviewButton={false}/>
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  type FormType = {
+    brokerFee: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, brokerFee: values.brokerFee })
+    navigate('/form/2')
+  }
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} requiredMark={false} initialValues={{brokerFee: documentInfo?.brokerFee}} className={'form-wrapper'}>
+      <StepTitle title={'What is your remortgage broker fee?'} subtitle={"Leave it blank if you are not sure"} />
+      <div className="form-body">
+        <Form.Item
+          name={'brokerFee'}
+          rules={[
+            { required: true, message: 'This field is required' },
+            { message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/ },
+          ]}>
+          <Input size={'large'} placeholder={'Enter remortgage broker fee'} autoFocus={true} prefix={'£'} />
+        </Form.Item>
+      </div>
+      <FormFooter isPreviewButton={false}/>
+    </Form>
+  );
 };
 
 export default FormStep01;

src/styles/index.css

@@ -43,6 +43,10 @@ body {
   min-height: 100vh;
 }
 
+.ant-layout {
+  width: fit-content;
+}
+
 h1.ant-typography,
 .ant-typography+h2.ant-typography {
   font-family: 'Inter SemiBold';