grey login

src/assets/style/styles.css

@@ -11,6 +11,10 @@ body,
   font-family: "Noto Sans HK", "Noto Sans SC";
 }
 
+.page-grey {
+  filter: grayscale(100%);
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

src/index.js

@@ -21,6 +21,23 @@ import { AutoLogoutProvider } from "components/AutoLogoutProvider";
 import { RefreshTokenProvider } from "components/RefreshTokenProvider";
 import { SysSettingProvider } from "components/SysSettingProvider";
 
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+
+function GreyWrapper({ children }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.pathname === "/login") {
+      document.body.classList.add("page-grey");
+    } else {
+      document.body.classList.remove("page-grey");
+    }
+  }, [location.pathname]);
+
+  return children;
+}
+
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
 
 const container = document.getElementById('root');
@@ -36,7 +53,9 @@ root.render(
           <BrowserRouter basename="/">
             <RefreshTokenProvider>
               <AutoLogoutProvider>
-                <App />
+                <GreyWrapper>
+                  <App />
+                </GreyWrapper>
               </AutoLogoutProvider>
             </RefreshTokenProvider>
           </BrowserRouter>