From 843c37555770e56ba840d889a30a835888eead9e Mon Sep 17 00:00:00 2001 From: MarynaPotiievska Date: Fri, 24 May 2024 11:41:44 +0300 Subject: [PATCH] Change styles of form's title, buttons and inputs and content for question 1 --- src/components/app/App.css | 1 - src/components/form-footer/FormFooter.tsx | 6 +-- src/components/step-title/StepTitle.tsx | 18 ++++---- src/components/themeContext/index.tsx | 10 ++--- src/pages/form/Form.scss | 35 ++++++---------- src/pages/form/Form.tsx | 42 +++++++++---------- src/pages/form/FormStep01.tsx | 51 +++++++++++------------ src/styles/index.css | 4 ++ 8 files changed, 78 insertions(+), 89 deletions(-) diff --git a/src/components/app/App.css b/src/components/app/App.css index 6d1732a..bf470ea 100644 --- a/src/components/app/App.css +++ b/src/components/app/App.css @@ -1,5 +1,4 @@ #root { - max-width: 1440px; margin: 0 auto; } diff --git a/src/components/form-footer/FormFooter.tsx b/src/components/form-footer/FormFooter.tsx index 1a0efc3..79a63f5 100644 --- a/src/components/form-footer/FormFooter.tsx +++ b/src/components/form-footer/FormFooter.tsx @@ -9,17 +9,17 @@ type Props = { const FormFooter: FC = ({isPreviewButton = true, isLastStep = false}) => { const navigate = useNavigate() return ( - + {isPreviewButton && ( + style={{marginRight: 12}}>{'Back'} )} {isLastStep && ( )} {!isLastStep && ( - + )} diff --git a/src/components/step-title/StepTitle.tsx b/src/components/step-title/StepTitle.tsx index 7418d2e..f0ba7f0 100644 --- a/src/components/step-title/StepTitle.tsx +++ b/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 = ({title, subtitle}) => { - return ( -
- {title} - {subtitle} -
- ); + return ( +
+ {title} + {subtitle} +
+ ); }; export default StepTitle; diff --git a/src/components/themeContext/index.tsx b/src/components/themeContext/index.tsx index 25cbe94..e96c8e9 100644 --- a/src/components/themeContext/index.tsx +++ b/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: { diff --git a/src/pages/form/Form.scss b/src/pages/form/Form.scss index 707d1cb..dbea4f9 100644 --- a/src/pages/form/Form.scss +++ b/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 { diff --git a/src/pages/form/Form.tsx b/src/pages/form/Form.tsx index bb8a824..8e80f6d 100644 --- a/src/pages/form/Form.tsx +++ b/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 ( -
-
- {`Step ${params.step}/12`} -
- {params.step === '1' && } - {params.step === '2' && } - {params.step === '3' && } - {params.step === '4' && } - {params.step === '5' && } - {params.step === '6' && } - {params.step === '7' && } - {params.step === '8' && } - {params.step === '9' && } - {params.step === '10' && } - {params.step === '11' && } - {params.step === '12' && } -
- ); + const params = useParams() + return ( +
+
+ {`Question ${params.step} of 12`} + {params.step === '1' && } + {params.step === '2' && } + {params.step === '3' && } + {params.step === '4' && } + {params.step === '5' && } + {params.step === '6' && } + {params.step === '7' && } + {params.step === '8' && } + {params.step === '9' && } + {params.step === '10' && } + {params.step === '11' && } + {params.step === '12' && } +
+
+ ); }; export default Form; diff --git a/src/pages/form/FormStep01.tsx b/src/pages/form/FormStep01.tsx index f47932b..534f891 100644 --- a/src/pages/form/FormStep01.tsx +++ b/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 ( -
- -
- - - -
- - - ); + const navigate = useNavigate() + const {setDocumentInfo, documentInfo} = useGeneralContext() + type FormType = { + brokerFee: string + } + const onFinish = (values: FormType) => { + setDocumentInfo({...documentInfo, brokerFee: values.brokerFee }) + navigate('/form/2') + } + return ( +
+ +
+ + + +
+ + + ); }; export default FormStep01; diff --git a/src/styles/index.css b/src/styles/index.css index 4b4cf8f..bb83577 100644 --- a/src/styles/index.css +++ b/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';