Change styles for lender card and radio buttons and content for quest…

…ion 2, styles for hovered, focused and active text button
bn-digital · May 24, 2024 · 3fb0c73 · 3fb0c73
1 parent 843c375
commit 3fb0c73
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 139 deletions.
diff --git a/src/components/lender-card/LenderCard.scss b/src/components/lender-card/LenderCard.scss
@@ -1,41 +1,53 @@
 .lender-card {
-  position: relative;
   width: 100%;
   height: 100%;
+  padding: 8px;
+
+  .ant-input-affix-wrapper &:hover {
+    border-color: #4169f6;
+
+    .name {
+      color: #4169f6;
+    }
+  }
+
   .image-container {
-    z-index: 0;
-    position: absolute;
-    left: 0;
-    top: 8px;
     width: 100%;
-    height: 60%;
+    height: 64px;
+    margin-bottom: 16px;
 
     img {
+      display: block;
       width: 100%;
       height: 100%;
       object-fit: contain;
     }
   }
 
   .content {
-    display: flex;
-    background-color: transparent;
     width: 100%;
-    z-index: 2;
-    position: absolute;
-    bottom: 5px;
-    left: 5px;
+    display: flex;
+    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: 5px;
-      background-color: #f0f0f0;
+      background-color: #e7e7e9;
+    }
+
+    .label {
+      font-family: "Inter Medium";
+      font-size: 16px;
+      line-height: 1.5;
+    }
 
+    .name {
+      color: #101012;
     }
   }
 

diff --git a/src/components/lender-card/LenderCard.tsx b/src/components/lender-card/LenderCard.tsx
@@ -10,38 +10,36 @@ import halifax from '../../assets/halifax.png'
 const {Title, Text} = Typography
 
 type Props = {
-    number: string
-    name: string
+  number: string
+  name: string
 }
 
 const LenderCard: FC<Props> = ({number, name}) => {
-    let imageUrl
-    switch (number) {
-        case '1': imageUrl = accord
-            break;
-        case '2': imageUrl = barclays
-            break;
-        case '3': imageUrl = coventry
-            break;
-        case '4': imageUrl = halifax
-            break;
-        default: imageUrl = accord
-    }
-    return (
-        <div className={'lender-card'}>
-            <div className="image-container">
-                <img src={imageUrl} alt="logo"/>
-            </div>
-            <div className="content">
-                <div className="check-box">
-                    <Text style={{fontSize: 12}}>{number}</Text>
-                </div>
-                <Text style={{fontSize: 10}}>{name}</Text>
-            </div>
-            <div className="selected-overlay"/>
-
+  let imageUrl
+  switch (number) {
+    case '1': imageUrl = accord
+      break;
+    case '2': imageUrl = barclays
+      break;
+    case '3': imageUrl = coventry
+      break;
+    case '4': imageUrl = halifax
+      break;
+    default: imageUrl = accord
+  }
+  return (
+    <div className={'lender-card'}>
+      <div className="image-container">
+        <img src={imageUrl} alt="logo"/>
+      </div>
+      <div className="content">
+        <div className="check-box">
+          <Text className={'label'}>{number}</Text>
         </div>
-    );
+        <Text className={'label name'}>{name}</Text>
+      </div>
+    </div>
+  );
 };
 
 export default LenderCard;
diff --git a/src/components/themeContext/index.tsx b/src/components/themeContext/index.tsx
@@ -29,6 +29,9 @@ export const theme : ThemeConfig = {
       colorText: "#101012",
       borderRadiusLG: 4,
       fontFamily: "Inter Medium",
+    },
+    Radio: {
+      // colorBorder: "#B9B9BA",
     }
   },
   token: {

diff --git a/src/pages/form/Form.scss b/src/pages/form/Form.scss
@@ -16,45 +16,32 @@
       font-family: "Inter Medium";
     }
   }
-
-
 }
 
 .radio-grid-container {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 100px;
-  grid-auto-rows: 100px;
-  gap: 5px;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 120px;
+  grid-auto-rows: 120px;
+  gap: 32px;
 
   .ant-radio-button-wrapper {
-    border: 1px solid #e0e0e0;
+    border: 1px solid #b9b9ba;
     border-radius: 4px;
     height: 100%;
     padding-inline: 0;
     overflow: hidden;
 
-    .lender-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;
+
+      .name {
+        color: #4169f6;
       }
     }
 
     &.ant-radio-button-wrapper-checked {
-      border: 1px solid #b8b8b8;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-
-      .lender-card {
-        .selected-overlay {
-          opacity: 1;
-        }
-      }
+      border: 2px solid #4169f6;
     }
   }
 

diff --git a/src/pages/form/FormStep02.tsx b/src/pages/form/FormStep02.tsx
@@ -11,43 +11,52 @@ const {Title, Text, Paragraph} = Typography
 
 
 const FormStep02 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [lenderValue, setLenderValue] = useState(documentInfo?.lender);
-    type FormType = {
-        lender: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setLenderValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, lender: values.lender})
-        navigate('/form/3')
-    }
-    const options = [
-        {label: <LenderCard number={'1'} name={'Accord Mortgage'}/>, value: 'Accord Mortgage'},
-        {label: <LenderCard number={'2'} name={'Barclays'}/>, value: 'Barclays'},
-        {label: <LenderCard number={'3'} name={'The Coventry'}/>, value: 'The Coventry'},
-        {label: <LenderCard number={'4'} name={'Halifax'}/>, value: 'Halifax'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{lender: documentInfo?.lender}} className={'form-wrapper'}>
-            <StepTitle title={'Current Lender'} subtitle={"Who is your client's mortgage with"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'lender'}
-                    label={'Current Lender'}
-                    rules={[
-                        {required: true, message: 'Select your current lender'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={lenderValue} optionType="button"
-                                 className={'radio-grid-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [lenderValue, setLenderValue] = useState(documentInfo?.lender);
+  type FormType = {
+    lender: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setLenderValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, lender: values.lender})
+    navigate('/form/3')
+  }
+  const options = [
+    {label: <LenderCard number={'1'} name={'Accord'}/>, value: 'Accord Mortgage'},
+    {label: <LenderCard number={'2'} name={'Barclays'}/>, value: 'Barclays'},
+    {label: <LenderCard number={'3'} name={'Coventry'}/>, value: 'The Coventry'},
+    {label: <LenderCard number={'4'} name={'Halifax'}/>, value: 'Halifax'},
+  ]
+  return (
+    <Form
+      layout={'vertical'}
+      onFinish={onFinish}
+      autoComplete={'off'}
+      initialValues={{lender: documentInfo?.lender}}
+      className={'form-wrapper'}
+    >
+      <StepTitle title={'Select your current Lender'} subtitle={"Who holds your current mortgage?"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'lender'}
+          rules={[
+            {required: true, message: 'Select your current lender'},
+          ]}>
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={lenderValue}
+            optionType={"button"}
+            className={'radio-grid-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep02;
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,6 +1,3 @@
-//.ant-layout {
-//    background: none;
-//}
 .container {
   max-width: 960px;
   height: 100%;
@@ -16,35 +13,13 @@
 .description.ant-typography {
   max-width: 416px;
   margin-bottom: 32px;
-
 }
 
-
-
-//button.ant-btn-text {
-//    border: none;
-//    background: none;
-//
-//    &:hover {
-//        border: none;
-//        background-color: transparent !important;
-//    }
-//    &:focus {
-//        border: none;
-//        background-color: transparent !important;
-//        outline: transparent;
-//    }
-//}
-//button.ant-btn-primary {
-//    border: 1px solid #5c5c5c;
-//    background-color: #5c5c5c;
-//    &:hover {
-//        border: 1px solid #5c5c5c;
-//        background-color: #4b4b4b !important;
-//    }
-//    &:focus {
-//        border: none;
-//        background-color:  #4b4b4b !important;
-//        outline: none;
-//    }
-//}
+button.ant-btn-text {
+  &:not(:disabled):hover,
+  &:not(:disabled):focus,
+  &:not(:disabled):active {
+    border-color: #ffffff;
+    background: linear-gradient(0deg, rgba(27, 71, 228, 0.2), rgba(27, 71, 228, 0.2));
+  }
+}