Task 11 set up questions

Task 11 set up questions

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: 16}}>{'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/header/Header.scss

@@ -1,4 +1,5 @@
 .app-header {
+  position: relative;
   height: 100vh;
   padding: 200px 56px 0 64px;
   background-color: #ffffff;
@@ -25,8 +26,28 @@
     }
 
     .header-text {
+      display: block;
+      max-width: 330px;
       font-weight: 500;
       color: #8d8d8f;
     }
   }
+
+  .rights {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 31px 65px 30px 65px;
+
+    span {
+      font-family: "Inter Medium";
+      font-size: 14px;
+      line-height: 1.15;
+      color: #8d8d8f;
+    }
+  }
 }

src/components/header/Header.tsx

@@ -1,8 +1,10 @@
 import { Button, Layout, Typography } from "antd";
 import logo from "../../assets/logo.png"
+import bnLogo from "../../assets/bn-logo.png"
 import './Header.scss'
 import { useNavigate } from "react-router-dom";
 
+
 const {Title, Text} = Typography
 const Header = () => {
   const navigate = useNavigate()
@@ -13,8 +15,12 @@ const Header = () => {
           <img src={logo}/>
           {'Mortgage Calculator'}</Button>
         <Title level={1}>{'Find your refinance options'}</Title>
-        <Text className={'header-text'}>{'Mortgage refinancing is when you replace your current home loan with a new one.\n' +
-          'This is a demo of a form submission.'}</Text>
+        <Text className={'header-text'}>{'Mortgage refinancing is when you replace your current home loan with a new one.'}</Text>
+        <Text className={'header-text'}>{'This is a demo of a form submission.'}</Text>
+      </div>
+      <div className={'rights'}>
+        <Text>{'created by'}</Text>
+        <img src={bnLogo}/>
       </div>
     </Layout.Sider>
   );

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;
     }
   }
 

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;

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;
     }
   }
 

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;

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,19 @@ 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",
+    },
+    DatePicker: {
+      colorBorder: "#B9B9BA",
+      colorTextPlaceholder: "#A0A0A2",
+      colorText: "#101012",
+      borderRadiusLG: 4,
+      fontFamily: "Inter Medium",
+      fontSize: 16,
     }
   },
   token: {