Merge pull request #7 from bn-digital/task-9-task-10-theme-and-layout…

…-setup Task 9 task 10 theme and layout setup
bn-digital · May 23, 2024 · 6c2a310 · 6c2a310
2 parents dbef6c8 + 95ad4ec
commit 6c2a310
Show file tree

Hide file tree

Showing 12 changed files with 222 additions and 145 deletions.
diff --git a/src/assets/fonts/Inter-Bold.ttf b/src/assets/fonts/Inter-Bold.ttf
diff --git a/src/assets/fonts/Inter-Medium.ttf b/src/assets/fonts/Inter-Medium.ttf
diff --git a/src/assets/fonts/Inter-SemiBold.ttf b/src/assets/fonts/Inter-SemiBold.ttf
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -1,20 +1,6 @@
 #root {
-  max-width: 1280px;
+  max-width: 1440px;
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {

diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss
@@ -1,21 +1,32 @@
 .app-header {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 70px;
-  width: 100%;
+  height: 100vh;
+  padding: 200px 56px 0 64px;
   background-color: #ffffff;
+
   .header-content-wrapper {
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .title-box {
-      flex: 1 1 auto;
-      margin-top: 10px;
-      &.ant-typography {
-        color: gray;
+    text-align: start;
+
+    .nav-link {
+      margin-bottom: 24px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      line-height: 1.5;
+      font-family: "Inter Bold";
+      font-weight: 700;
+      letter-spacing: 0.02em;
+      color: #101012;
+
+      &:focus {
+        border: none;
+        outline: transparent;
       }
     }
+
+    .header-text {
+      font-weight: 500;
+      color: #8d8d8f;
+    }
   }
 }
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,23 +1,23 @@
-import {Button, Typography} from "antd";
+import { Button, Layout, Typography } from "antd";
+import logo from "../../assets/logo.png"
 import './Header.scss'
-import {useLocation, useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
-const {Title} = Typography
+const {Title, Text} = Typography
 const Header = () => {
-    const location = useLocation()
-    const navigate = useNavigate()
-    return (
-        <div className={'app-header'}>
-            <div className="container">
-                <div className="header-content-wrapper">
-                    <Title level={3} className={'title-box'}>{'Mortgage Mathematics'}</Title>
-                    {location.pathname !== '/' && (
-                        <Button type={'ghost'} onClick={() => navigate('/')}>{'Home'}</Button>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
+  const navigate = useNavigate()
+  return (
+    <Layout.Sider width={480} theme={"light"} className={'app-header'}>
+      <div className={'header-content-wrapper'}>
+        <Button type={'ghost'} onClick={() => navigate('/')} className={"nav-link"}>
+          <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>
+      </div>
+    </Layout.Sider>
+  );
 };
 
 export default Header;
diff --git a/src/components/layout/DefaultLayout.tsx b/src/components/layout/DefaultLayout.tsx
@@ -1,7 +1,8 @@
-import {Layout, Spin} from 'antd'
+import { ConfigProvider, Layout, Spin } from 'antd'
 import { FC, Suspense, useState } from 'react'
 import { Outlet } from 'react-router'
 import { Context, defaultValues } from '../context/Context'
+import { theme } from "../themeContext";
 import { Modal } from '../modal/Modal'
 import ModalContent from '../modal/ModalContent'
 import Header from "../header/Header";
@@ -25,15 +26,17 @@ const DefaultLayout: FC = () => {
         setDocumentInfo,
       }}
     >
-      <Layout>
+      <ConfigProvider theme={theme}>
+        <Layout>
           {currentUrl !== '/pdf-report' && <Header />}
-            <Suspense fallback={<Spin />}>
-              <Outlet />
-            </Suspense>
-      </Layout>
-      <Modal open={isModalOpen}>
-        <ModalContent />
-      </Modal>
+          <Suspense fallback={<Spin />}>
+            <Outlet />
+          </Suspense>
+        </Layout>
+        <Modal open={isModalOpen}>
+          <ModalContent />
+        </Modal>
+      </ConfigProvider>
     </Context.Provider>
   )
 }

diff --git a/src/components/themeContext/index.tsx b/src/components/themeContext/index.tsx
@@ -0,0 +1,43 @@
+import { ThemeConfig} from "antd/es/config-provider/context";
+
+export const theme : ThemeConfig = {
+  components: {
+    Button: {
+      colorPrimary: "#4169F6",
+      colorPrimaryHover: "#1B47E4",
+      colorPrimaryActive: "#1B47E4",
+      colorPrimaryText: "#FFFFFF",
+      colorText: "#4169F6",
+      fontSize: 16,
+      lineHeight: 1,
+      borderRadius: 8,
+    },
+    Typography: {
+      fontSizeHeading1: 32,
+      fontSizeHeading2: 24,
+      fontSize: 14,
+      lineHeightHeading1: 1.25,
+      lineHeightHeading2: 1.33,
+      colorTextHeading: "#101012",
+      colorText: "#4B4C4E",
+      colorTextDescription: "#8D8D8F",
+      lineHeight: 1.71,
+    },
+    Input: {
+      borderRadius: 4,
+      colorBorder: "#B9B9BA",
+      colorErrorBorder: "#F6414C",
+      colorErrorText: "#F6414C",
+      fontSize: 16,
+      lineHeight: 24,
+      colorTextPlaceholder: "#A0A0A2",
+      paddingContentHorizontal: 16,
+      paddingContentVertical: 8,
+    }
+  },
+  token: {
+    colorPrimary: "#4169F6",
+    colorBgLayout: "#F9F8FA",
+  }
+}
+
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -1,15 +1,19 @@
 import {Button, Typography} from "antd";
 import {useNavigate} from "react-router-dom";
 
-const {Title} = Typography
+const {Title, Paragraph} = Typography
 
 const HomePage = () => {
     const navigate = useNavigate()
     return (
-        <div>
-            <Title>{'Welcome to Mortgage Mathematics'}</Title>
-            <Button style={{minWidth: 150}} size={'large'} type={'primary'} onClick={()=>navigate('/form/1')}>{'Start'}</Button>
-        </div>
+        <section>
+          <div className={'container'}>
+            <Paragraph className={'subtitle'}>{'Ready to start'}</Paragraph>
+            <Title level={2}>{'Ready to find your refinance options?'}</Title>
+            <Paragraph className={'description'}>{'To start, find your latest mortgage statement. This will give you the numbers you need to fill the fields in the calculator.'}</Paragraph>
+            <Button type={'primary'} onClick={()=>navigate('/form/1')}>{'Start'}</Button>
+          </div>
+        </section>
     );
 };
 

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,42 +1,50 @@
-.ant-layout {
-    background: none;
-}
+//.ant-layout {
+//    background: none;
+//}
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    height: 100%;
+  max-width: 960px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 200px 176px 100px 144px;
 }
-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-ghost {
-    border: 1px solid gray;
-    &:focus {
-        border: none;
-        outline: transparent;
-    }
+.subtitle.ant-typography {
+  margin-bottom: 16px;
+  color: #8D8D8F;
 }
-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;
-    }
+
+.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;
+//    }
+//}