added a fxn that changes bg color on page refresh

src/app/modules/auth/AuthLayout.tsx

@@ -1,10 +1,47 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import {Outlet, Link} from 'react-router-dom'
 import {toAbsoluteUrl} from '../../../_res/helpers'
 
 const AuthLayout = () => {
+  //initial background color
+  let [bgColor, setBgColor] = useState({
+    backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
+  })
+
+  // function to determine background color
+  let changeBgColor = () => {
+    // let randomNum = Math.round(Math.random() * 3)
+    let randomNum = Number(localStorage.getItem('bg-num'))
+    if(randomNum){
+      if(randomNum <= 1){
+        setBgColor({
+          backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
+        })
+        localStorage.setItem('bg-num', '2')
+      }else if(randomNum <= 2){
+        setBgColor({
+          backgroundImage: 'linear-gradient(70deg, #eee, #fff)'
+        })
+        localStorage.setItem('bg-num', '3')
+      }else{
+        setBgColor({
+          backgroundImage: 'linear-gradient(70deg, #d5e1f5, #75a5f0)'
+        })
+        localStorage.setItem('bg-num', '1')
+      }
+    }else{
+      setBgColor({
+        backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
+      })
+      localStorage.setItem('bg-num', '1')
+    }
+  }
+
   useEffect(() => {
+
+    changeBgColor() // calls the change color function after page loads
+
     const root = document.getElementById('root')
     if (root) {
       root.style.height = '100%'
@@ -17,11 +54,15 @@ const AuthLayout = () => {
   }, [])
 
   return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid h-100'>
+    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto'>
       {/* begin::Body */}
-      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
+      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1 vh-100'>
         {/* begin::Form */}
         <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
+          <div className='text-center mb-11'>
+          {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
+          <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
+        </div>
           {/* begin::Wrapper */}
           <div className='w-lg-500px p-10'>
             <Outlet />
@@ -60,59 +101,54 @@ const AuthLayout = () => {
 
       {/* begin::Aside */}
       <div
-        className='position-relative d-flex flex-lg-row-fluid w-lg-50 order-1 order-lg-2'
+        className='position-relative d-flex flex-lg-row-fluid w-lg-50 p-10 order-1 order-lg-2'
-        // style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg.png')})`}}
+        style={{backgroundImage: `${bgColor.backgroundImage}`}}
-        style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg-new.svg')})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'left top'}}
       >
-        {/* overlay div section */}
-        {/* <div className='position-absolute w-100 h-100 top-0 left-0' style={{backgroundColor: 'rgba(0, 0, 0, .4)', zIndex: '1'}}></div> */}
         {/* begin::Content */}
-        <div className='position-relative d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
+        <div className='position-relative d-flex flex-column flex-center px-5 px-md-15 w-100'>
           {/* begin::Logo */}
-          {/* <Link to='/' className='mb-12'>
+          <Link to='/' className='mb-12'>
             <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-          </Link> */}
+          </Link>
           {/* end::Logo */}
 
-          {/* begin::Image */}
-          {/* <img
-            className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20'
-            src={toAbsoluteUrl('/media/misc/auth-screens.png')}
-            alt=''
-          /> */}
           {/* <img
             className='mx-auto w-350px w-md-50 w-xl-500px mb-10 mb-lg-20 rounded'
             src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
             alt=''
             style={{boxShadow: '0px 0px 10px white'}}
           /> */}
-          {/* end::Image */}
+           <div className='mx-auto w-75 w-xl-500px mb-10 mb-lg-20 rounded'>
-          <div className='w-100 w-md-75 rounded p-3 p-lg-5' style={{backgroundColor: 'rgba(0, 0, 0, .8)', boxShadow: '0px 0px 10px white'}}>
+            <img
-            {/* begin::Title */}
+              className='img-fluid rounded'
-            <h1 className='text-white fs-2qx fw-bolder text-center mb-7 py-3'>
+              src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
-              Fast, Efficient and Productive
+              alt=''
-            </h1>
+              style={{boxShadow: '0px 0px 10px white'}}
-            {/* end::Title */}
+              />
-
-            {/* begin::Text */}
-            {/* <div className='text-white fs-base text-center'>
-              In this kind of post,{' '}
-              <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
-                the blogger
-              </a>
-              introduces a person they’ve interviewed <br /> and provides some background information
-              about
-              <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
-                the interviewee
-              </a>
-              and their <br /> work following this is a transcript of the interview.
-            </div> */}
-            <div className='text-white fs-base text-center py-3'>
-              <p>Improve quality of life for the world's population by <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>building</a> the future global transportation platform.</p>
-              <p>Increasing accessibility and personal choices, <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>while reducing</a> travel time traffic congestion, pollution, and loss to local GDP</p>
-            </div>
-            {/* end::Text */}
           </div>
+          {/* end::Image */}
+            <div className='w-100 w-md-75'>
+              {/* begin::Title */}
+              <h1 className='text-dark fs-2qx fw-bolder text-center mb-7'>
+                Fast, Efficient and Productive
+              </h1>
+              {/* end::Title */}
+
+              {/* begin::Text */}
+              <div className='text-dark fs-base text-center'>
+                In this kind of post,{' '}
+                <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
+                  the blogger
+                </a>
+                introduces a person they’ve interviewed <br /> and provides some background information
+                about {' '}
+                <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
+                  the interviewee
+                </a>
+                and their <br /> work following this is a transcript of the interview.
+              </div>
+              {/* end::Text */}
+            </div>
         </div>
         {/* end::Content */}
       </div>

src/app/modules/auth/components/ForgotPassword.tsx

@@ -51,11 +51,6 @@ export function ForgotPassword() {
       onSubmit={formik.handleSubmit}
     >
       <div className='text-center mb-10'>
-        {/* begin::Title */}
-        {/* <h1 className='text-dark fw-bolder mb-3'>Forgot Password ?</h1> */}
-        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-        {/* end::Title */}
-
         {/* begin::Link */}
         <div className='text-gray-500 fw-semibold fs-6'>
           Enter your email to reset your password.

src/app/modules/auth/components/Login.tsx

@@ -63,11 +63,6 @@ export function Login() {
       id='kt_login_signin_form'
     >
       {/* begin::Heading */}
-      <div className='text-center mb-11'>
-        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
-        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-      </div>
-      {/* begin::Heading */}
 
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>
@@ -125,11 +120,6 @@ export function Login() {
           <div className='alert-text font-weight-bold'>{formik.status}</div>
         </div>
       ) : (
-        // <div className='mb-10 bg-light-info p-8 rounded'>
-        //   <div className='text-info'>
-        //     Any text before login box - please configure
-        //   </div>
-        // </div>
         null
       )}
 

src/app/modules/auth/components/Registration.tsx

@@ -86,16 +86,6 @@ export function Registration() {
       id='kt_login_signup_form'
       onSubmit={formik.handleSubmit}
     >
-      {/* begin::Heading */}
-      <div className='text-center mb-11'>
-        {/* begin::Title */}
-        {/* <h1 className='text-dark fw-bolder mb-3'>Sign Up</h1> */}
-        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-        {/* end::Title */}
-
-        {/* <div className='text-gray-500 fw-semibold fs-6'>Your Social Campaigns</div> */}
-      </div>
-      {/* end::Heading */}
 
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>