added a function to change bg color

src/app/modules/auth/AuthLayout.tsx

@@ -1,10 +1,44 @@
 /* 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 STATE FOR BACKGROUND IMAGE
+  let [bgImage, setBgImage] = useState({
+    filter: 'grayscale(0%)'
+  })
+
+  // FUNCTION TO CHANGE BACKGROUND IMAGE
+  let changeBg = () => {
+    // let randomNum = Math.round(Math.random() * 3)
+    let randomNum = Number(localStorage.getItem('bg-num'))
+    if(randomNum){
+      if(randomNum <= 1){
+        setBgImage({
+          filter: 'grayscale(0%)'
+        })
+        localStorage.setItem('bg-num', '2')
+      }else if(randomNum <= 2){
+        setBgImage({
+          // filter: 'hue-rotate(90deg)'
+          filter: 'grayscale(100%)'
+        })
+        localStorage.setItem('bg-num', '3')
+      }else{
+        setBgImage({
+          filter: 'sepia(50%)'
+        })
+        localStorage.setItem('bg-num', '1')
+      }
+    }else{
+      localStorage.setItem('bg-num', '2')
+    }
+  }
+
   useEffect(() => {
+    changeBg() // FUNCTION TO CHANGE BACKGROUND IMAGE
     const root = document.getElementById('root')
     if (root) {
       root.style.height = '100%'
@@ -16,10 +50,11 @@ const AuthLayout = () => {
     }
   }, [])
 
-  return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid vh-100 overflow-auto' style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/float-sample.jpg')})`, backgroundSize: 'cover', backgroundPosition: 'center'}}>
+  return (    
+    <div className='position-relative d-flex flex-column flex-lg-row flex-column-fluid overflow-hidden' style={{minHeight: '100vh'}}>
+      <img src={toAbsoluteUrl('/media/misc/float-sample.jpg')} alt="" className='position-absolute top-0 left-0 w-auto h-100' style={{filter: bgImage.filter}}/>
       {/* begin::Body */}
-      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
+      <div className='position-relative d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
         {/* begin::Form */}
         <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
           {/* begin::Wrapper */}