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%'
@@ -65,8 +102,7 @@ const AuthLayout = () => {
       {/* begin::Aside */}
       <div
         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={{backgroundColor: '#E6E7F9'}}
       >
         {/* begin::Content */}
         <div className='position-relative d-flex flex-column flex-center px-5 px-md-15 w-100'>
@@ -76,12 +112,20 @@ const AuthLayout = () => {
           </Link>
           {/* end::Logo */}
 
-          <img
+          {/* <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'}}
-          />
+          /> */}
+           <div className='mx-auto w-75 w-xl-500px mb-10 mb-lg-20 rounded'>
+            <img
+              className='img-fluid rounded'
+              src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
+              alt=''
+              style={{boxShadow: '0px 0px 10px white'}}
+              />
+          </div>
           {/* end::Image */}
             <div className='w-100 w-md-75'>
               {/* begin::Title */}