From a7e97e18903645753645532f89b751f1a24bb3df Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 3 Apr 2024 17:55:55 +0100
Subject: [PATCH] updated layout style

---
 src/components/Footer/Footer.tsx              |   4 +-
 .../GetStarted/ApplicantsAttestation.tsx      |   2 -
 src/components/GetStarted/BasicInfo.tsx       |   2 +-
 src/components/GetStarted/DebitAccount.tsx    | 101 +++++++++++-------
 src/index.css                                 |   3 +-
 .../DashboardLayout/DashboardLayout.tsx       |  31 ++++++
 src/layouts/GetStartedLayout.tsx              |  14 +--
 src/layouts/LetsGetStartedLayout.tsx          |  10 +-
 8 files changed, 111 insertions(+), 56 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index b6b14f7..9e35174 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -5,8 +5,8 @@ export default function Footer() {
   const date = new Date().getFullYear();
 
   return (
-    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
-      <div className="containerMode flex justify-between items-center flex-wrap gap-2">
+    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
+      <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
           {date} @ First City Monument Bank Limited
         </p>
diff --git a/src/components/GetStarted/ApplicantsAttestation.tsx b/src/components/GetStarted/ApplicantsAttestation.tsx
index 38c42dd..a5a2c50 100644
--- a/src/components/GetStarted/ApplicantsAttestation.tsx
+++ b/src/components/GetStarted/ApplicantsAttestation.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import CreditAccount from "./CreditAccount";
 import DebitAccount from "./DebitAccount";
 
 const ApplicantsAttestation: React.FC = () => {
@@ -21,7 +20,6 @@ const ApplicantsAttestation: React.FC = () => {
           </p>
         </div>
       </div>
-      <CreditAccount />
       <DebitAccount />
     </>
   );
diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx
index 93c335e..659045e 100644
--- a/src/components/GetStarted/BasicInfo.tsx
+++ b/src/components/GetStarted/BasicInfo.tsx
@@ -32,7 +32,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
   setInputValues,
   handleNextStep,
 }) => {
-  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
+  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
diff --git a/src/components/GetStarted/DebitAccount.tsx b/src/components/GetStarted/DebitAccount.tsx
index 2ef5c0b..fdf554a 100644
--- a/src/components/GetStarted/DebitAccount.tsx
+++ b/src/components/GetStarted/DebitAccount.tsx
@@ -1,67 +1,90 @@
 import React from "react";
+import {useNavigate} from 'react-router-dom'
 import { Button, InputCompOne } from "..";
+import { RouteHandler } from "../../router/routes";
 
 const DebitAccount: React.FC = () => {
+  const navigate = useNavigate()
   return (
-    <div className="flex flex-col gap-9">
-      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+    <>
+      <div className="w-full rounded py-3 mb-9 bg-[#5C2684] px-5">
         <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-          DEBIT ACCOUNT ( Your salary account for monthly repayment )
+          CREDIT ACCOUNT ( Your account to receive your loan )
         </p>
       </div>
       <InputCompOne
-        parentClass="max-w-[471px] w-full ml-5"
-        label="Bank Name"
-        name="bankName"
+        parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
+        label="Disbursement Account Number "
+        name="disbursementAccountNumber"
+        labelSpan="( Your FCMB Account )"
+        labelSpanClass="text-[12px] text-[#5C2684] ml-1"
         parentInputClass="w-full"
         labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
         input
         inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
       />
 
-      <div className="flex items-center gap-[59px]">
+      <div className="mt-9 flex flex-col gap-9">
+        <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+            DEBIT ACCOUNT ( Your salary account for monthly repayment )
+          </p>
+        </div>
         <InputCompOne
           parentClass="max-w-[471px] w-full ml-5"
-          label="Account Number"
-          name="accountNumber"
+          label="Bank Name"
+          name="bankName"
           parentInputClass="w-full"
           labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
           input
           inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
         />
-        <InputCompOne
-          parentClass="max-w-[471px] w-full ml-5"
-          label="Account Name"
-          name="accountName"
-          parentInputClass="w-full"
-          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          input
-          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-        />
-      </div>
 
-      <div className="max-w-[578px] flex items-center">
-        <input
-          type="checkbox"
-        //   checked={true}
-        defaultChecked
-        //   onChange={onChange}
-          className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
-          style={{ backgroundColor: "#5C2684" }}
+        <div className="flex items-center gap-[59px]">
+          <InputCompOne
+            parentClass="max-w-[471px] w-full ml-5"
+            label="Account Number"
+            name="accountNumber"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            input
+            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+          />
+          <InputCompOne
+            parentClass="max-w-[471px] w-full ml-5"
+            label="Account Name"
+            name="accountName"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            input
+            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+          />
+        </div>
+
+        <div className="max-w-[578px] flex items-center">
+          <input
+            type="checkbox"
+          //   checked={true}
+          defaultChecked
+          //   onChange={onChange}
+            className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
+            style={{ backgroundColor: "#5C2684" }}
+          />
+          <label className="ml-2 text-gray-700">
+            I have read, understood and accept the{" "}
+            <span className="text-[#4545CB]">applicant's attestation</span> and
+            all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
+            for FCMB premium salary loan.
+          </label>
+        </div>
+        <Button
+          className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
+          text="Apply"
+          type="button"
+          onClick={()=>navigate(RouteHandler.dashboardHome, {replace:true})}
         />
-        <label className="ml-2 text-gray-700">
-          I have read, understood and accept the{" "}
-          <span className="text-[#4545CB]">applicant's attestation</span> and
-          all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
-          for FCMB premium salary loan.
-        </label>
       </div>
-      <Button
-        className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
-        text="Apply"
-        type="button"
-      />
-    </div>
+    </>
   );
 };
 
diff --git a/src/index.css b/src/index.css
index 8d31b54..6be9638 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,6 +14,7 @@ body {
 
 @layer components {
   .containerMode {
-    @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
+    /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */
+    @apply container mx-auto px-5 max-w-[1500px]
   }
 }
\ No newline at end of file
diff --git a/src/layouts/DashboardLayout/DashboardLayout.tsx b/src/layouts/DashboardLayout/DashboardLayout.tsx
index 944e7ca..b12412f 100644
--- a/src/layouts/DashboardLayout/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout/DashboardLayout.tsx
@@ -43,6 +43,37 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
         <Aside asideDisplay={asideDisplay} />
       </aside>
       <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+
+        <header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+          <div className='h-14 w-full flex justify-end items-center gap-5'>
+              {/* MENU HAND BURGER */}
+              {/* <div className='w-full'>Welcome Austin Catherine</div> */}
+              <div
+              className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+              onClick={asideDisplay}
+              >
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+                      : "top-1/2 -translate-y-1/2"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 -rotate-45"
+                      : "bottom-0"
+                  }`}
+              ></div>
+              </div>
+          </div>
+        </header>
         <div className="flex p-5 relative">
           <div className="w-full p-5">{children}</div>
         </div>
diff --git a/src/layouts/GetStartedLayout.tsx b/src/layouts/GetStartedLayout.tsx
index 433da80..6d606fa 100644
--- a/src/layouts/GetStartedLayout.tsx
+++ b/src/layouts/GetStartedLayout.tsx
@@ -7,13 +7,15 @@ interface GetStartedLayoutProps {
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
   return (
-    <div className="relative">
-      <Header hideSidebar={true} hideMenu={true} />
-      <div className="flex flex-col min-h-[85vh] justify-between">
+    <div className="containerMode mb-[5.4375rem]">
+      <div className='sticky top-0 bg-white'>
+        <Header hideSidebar={true} hideMenu={true} />
+      </div>
+      <div className="flex flex-col min-h-[70vh] justify-between">
         {children}
-        <div className="self-end w-full">
-          <Footer />
-        </div>
+      </div>
+      <div className="fixed bottom-0 left-0 bg-white w-full">
+        <Footer />
       </div>
     </div>
   );
diff --git a/src/layouts/LetsGetStartedLayout.tsx b/src/layouts/LetsGetStartedLayout.tsx
index 3562653..38c7e93 100644
--- a/src/layouts/LetsGetStartedLayout.tsx
+++ b/src/layouts/LetsGetStartedLayout.tsx
@@ -4,20 +4,20 @@ import layoutImage from "../assets/images/test1-reverse.png";
 
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
-      <div className="grid md:grid-cols-2 h-[770px]">
+    <div className='containerMode mb-[5.4375rem]'>
+      <div className="w-full min-h-[90vh] grid lg:grid-cols-2">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}
         </div>
-        <div className="w-full">
-          <img src={layoutImage} alt="" className="w-full h-full" />
+        <div className="w-full h-96 lg:h-full bg-[url(../src/assets/images/test1-reverse.png)] bg-cover bg-no-repeat">
+          {/* <img src={layoutImage} alt="" className="w-full h-full object-cover" /> */}
         </div>
       </div>
       <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
         <Footer />
       </div>
-    </>
+    </div>
   );
 };