Change styles for radio option card and radio buttons and content for…

… question 3
bn-digital · May 24, 2024 · aa55711 · aa55711
1 parent 3fb0c73
commit aa55711
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 84 deletions.
diff --git a/src/components/radio-option-card/RadioOptionCard.scss b/src/components/radio-option-card/RadioOptionCard.scss
@@ -1,27 +1,37 @@
 .radio-option-card {
-  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
 
   .content {
-    padding-left: 10px;
     display: flex;
     align-items: center;
     background-color: transparent;
-    z-index: 2;
+    gap: 8px;
+
     .check-box {
-      width: 20px;
-      height: 20px;
+      width: 24px;
+      height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid #d1d1d1;
+      border: 1px solid #b9b9ba;
       border-radius: 2px;
-      margin-right: 8px;
-      background-color: #f0f0f0;
+      background-color: #e7e7e9;
+
+      .order {
+        font-family: "Inter Bold";
+        font-size: 12px;
+        line-height: 2;
+      }
+    }
 
+    .label {
+      font-family: "Inter Medium";
+      font-size: 16px;
+      line-height: 1.5;
+      color: #101012;
     }
   }
 

diff --git a/src/components/radio-option-card/RadioOptionCard.tsx b/src/components/radio-option-card/RadioOptionCard.tsx
@@ -5,22 +5,21 @@ import './RadioOptionCard.scss'
 const {Title, Text} = Typography
 
 type Props = {
-    number: string
-    name: string
+  number: string
+  name: string
 }
 
 const RadioOptionCard: FC<Props> = ({number, name}) => {
-    return (
-        <div className={'radio-option-card'}>
-            <div className="content">
-                <div className="check-box">
-                    <Text style={{fontSize: 12}}>{number}</Text>
-                </div>
-                <Text style={{fontSize: 12}}>{name}</Text>
-            </div>
-            <div className="selected-overlay"/>
+  return (
+    <div className={'radio-option-card'}>
+      <div className="content">
+        <div className="check-box">
+          <Text className={'order'}>{number}</Text>
         </div>
-    );
+        <Text className={'label'}>{name}</Text>
+      </div>
+    </div>
+  );
 };
 
 export default RadioOptionCard;
diff --git a/src/pages/form/Form.scss b/src/pages/form/Form.scss
@@ -3,8 +3,7 @@
 
   .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 {
+    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled) {
       border-color: #f6414c;
 
       .ant-input-prefix {
@@ -18,6 +17,10 @@
   }
 }
 
+.ant-form-item .ant-form-item-explain-error {
+  color: #f6414c;
+}
+
 .radio-grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -47,40 +50,28 @@
 
 }
 .radio-column-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 40px;
-  grid-auto-rows: 40px;
-  gap: 5px;
+  height: 248px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 
   .ant-radio-button-wrapper {
-    border: 1px solid #e0e0e0;
+    border: 1px solid #b9b9ba;
     border-radius: 4px;
-    height: 100%;
-    padding-inline: 0;
+    height: 56px;
+    padding: 16px;
     overflow: hidden;
 
-    .radio-option-card {
-      .selected-overlay {
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.2);
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0;
+    &:hover {
+      border-color: #4169f6;
+
+      .label {
+        color: #4169f6;
       }
     }
 
     &.ant-radio-button-wrapper-checked {
-      border: 1px solid #b8b8b8;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-
-      .radio-option-card {
-        .selected-overlay {
-          opacity: 1;
-        }
-      }
+      border: 2px solid #4169f6;
     }
   }
 }
diff --git a/src/pages/form/FormStep03.tsx b/src/pages/form/FormStep03.tsx
@@ -12,43 +12,53 @@ const {Title, Text, Paragraph} = Typography
 
 
 const FormStep03 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [value, setValue] = useState(documentInfo?.subAccounts);
-    type FormType = {
-        subAccounts: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, subAccounts: values.subAccounts})
-        navigate('/form/4')
-    }
-    const options = [
-        {label: <RadioOptionCard number={'A'} name={'1 sub account'}/>, value: '1 sub account'},
-        {label: <RadioOptionCard number={'B'} name={'2 sub accounts'}/>, value: '2 sub accounts'},
-        {label: <RadioOptionCard number={'C'} name={'3 sub accounts'}/>, value: '3 sub accounts'},
-        {label: <RadioOptionCard number={'D'} name={'4 sub accounts'}/>, value: '4 sub accounts'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{subAccounts: documentInfo?.subAccounts}} className={'form-wrapper'}>
-            <StepTitle title={'Mortgage Parts'} subtitle={"How many sub accounts does this mortgage have?"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'subAccounts'}
-                    label={'Sub accounts amount'}
-                    rules={[
-                        {required: true, message: 'Select your sub accounts amount'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={value} optionType="button"
-                                 className={'radio-column-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [value, setValue] = useState(documentInfo?.subAccounts);
+  type FormType = {
+    subAccounts: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, subAccounts: values.subAccounts})
+    navigate('/form/4')
+  }
+  const options = [
+    {label: <RadioOptionCard number={'1'} name={'1 sub account'}/>, value: '1 sub account'},
+    {label: <RadioOptionCard number={'2'} name={'2 sub accounts'}/>, value: '2 sub accounts'},
+    {label: <RadioOptionCard number={'3'} name={'3 sub accounts'}/>, value: '3 sub accounts'},
+    {label: <RadioOptionCard number={'4'} name={'4 sub accounts'}/>, value: '4 sub accounts'},
+  ]
+  return (
+    <Form
+      layout={'vertical'}
+      onFinish={onFinish}
+      autoComplete={'off'}
+      initialValues={{subAccounts: documentInfo?.subAccounts}}
+      className={'form-wrapper'}
+    >
+      <StepTitle title={'Select the number of your mortgage parts'} subtitle={"How many sub accounts does this mortgage have?"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'subAccounts'}
+          rules={[
+            {required: true, message: 'Select your sub accounts amount'},
+          ]}
+        >
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={value}
+            optionType="button"
+            className={'radio-column-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep03;