afront 1.0.22 → 1.0.25

package/src/Routes/ARoutes.js

@@ -1,66 +1,66 @@
-import React, { Suspense, useContext } from "react";
-import { Route, Routes } from "react-router";
-import routes from "../ARoutes/AFRoutes.js";
-import RequireAuth from "../Components/RequireAuth.js";
-import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
-import Header from "../Components/Header/Header.js";
-import Footer from "../Components/Footer/Footer.js";
-import LoadingContext from "../Utils/LoadingContext.js";
-
-
-const Layout = ({ children }) => (
-  <>
-    <Header />
-    {children}
-    <Footer />
-  </>
-);
-
-const ARoutes = ({ context }) => {
-  const { setLoading } = useContext(LoadingContext);
-  return (
-      <Routes>
-        {/* Pages Routes */}
-        {routes.map(({ path, element: Element, withHeaderFooter, protected: isProtected }, index) => (
-          <Route
-            key={index}
-            path={path}
-            element={
-              withHeaderFooter ? (
-                <Layout>
-                  <Suspense
-                    fallback={<LoadingIndicator />}
-                    onPromiseStart={() => setLoading(true)}
-                    onPromiseEnd={() => setLoading(false)}>
-                    {isProtected ? (
-                      <RequireAuth>
-                        <Element context={context} />
-                      </RequireAuth>
-                    ) : (
-                      <Element context={context} />
-                    )}
-                  </Suspense>
-                </Layout>
-              ) : (
-                <Suspense
-                  fallback={<LoadingIndicator />}
-                  onPromiseStart={() => setLoading(true)}
-                  onPromiseEnd={() => setLoading(false)}>
-                  {isProtected ? (
-                    <RequireAuth>
-                      <Element context={context} />
-                    </RequireAuth>
-                  ) : (
-                    <Element context={context} />
-                  )}
-                </Suspense>
-              )
-            }
-          />
-        ))}
-        {/* Pages Routes */}
-      </Routes>
-  );
-};
-
-export default ARoutes;
+import React, { Suspense, useContext } from "react";
+import { Route, Routes } from "react-router";
+import routes from "../ARoutes/AFRoutes.js";
+import RequireAuth from "../Components/RequireAuth.js";
+import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
+import Header from "../Components/Header/Header.js";
+import Footer from "../Components/Footer/Footer.js";
+import LoadingContext from "../Utils/LoadingContext.js";
+
+
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    {children}
+    <Footer />
+  </>
+);
+
+const ARoutes = ({ context }) => {
+  const { setLoading } = useContext(LoadingContext);
+  return (
+      <Routes>
+        {/* Pages Routes */}
+        {routes.map(({ path, element: Element, withHeaderFooter, protected: isProtected }, index) => (
+          <Route
+            key={index}
+            path={path}
+            element={
+              withHeaderFooter ? (
+                <Layout>
+                  <Suspense
+                    fallback={<LoadingIndicator />}
+                    onPromiseStart={() => setLoading(true)}
+                    onPromiseEnd={() => setLoading(false)}>
+                    {isProtected ? (
+                      <RequireAuth>
+                        <Element context={context} />
+                      </RequireAuth>
+                    ) : (
+                      <Element context={context} />
+                    )}
+                  </Suspense>
+                </Layout>
+              ) : (
+                <Suspense
+                  fallback={<LoadingIndicator />}
+                  onPromiseStart={() => setLoading(true)}
+                  onPromiseEnd={() => setLoading(false)}>
+                  {isProtected ? (
+                    <RequireAuth>
+                      <Element context={context} />
+                    </RequireAuth>
+                  ) : (
+                    <Element context={context} />
+                  )}
+                </Suspense>
+              )
+            }
+          />
+        ))}
+        {/* Pages Routes */}
+      </Routes>
+  );
+};
+
+export default ARoutes;

package/src/Routes/ARoutesStatic.js

@@ -1,83 +1,83 @@
-/*
- * File Name:  ARoutesStatic.js
- *
- * Description:  This file handles the logic for Handling Header and Footer to be visible or not for the every specific page for single page application (Static Page).
- *
- *
- * Author:  Mark Sea.
- *
- * Created:  14/Dec/2024
- *
- * Dependencies:  {react-router}
- *
- * Assumptions:  This file is used in appStatic.js
- */
-
-import React, { Suspense, useContext } from "react";
-import { Route, Routes } from "react-router";
-import routes from "../ARoutes/AFRoutes.js";
-import RequireAuth from "../Components/RequireAuth.js";
-import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
-import Header from "../Components/Header/Header.js";
-import Footer from "../Components/Footer/Footer.js";
-import LoadingContext from "../Utils/LoadingContext.js";
-
-const Layout = ({ children }) => (
-  <>
-    <Header />
-    {children}
-    <Footer />
-  </>
-);
-
-const ARoutesStatic = ({ context }) => {
-  const { setLoading } = useContext(LoadingContext);
-  return (
-    <Routes>
-      {routes.map(
-        (
-          { path, element: Element, withHeaderFooter, protected: isProtected },
-          index
-        ) => (
-          <Route
-            key={index}
-            path={path}
-            element={
-              withHeaderFooter ? (
-                <Layout>
-                  <Suspense
-                    fallback={<LoadingIndicator />}
-                    onPromiseStart={() => setLoading(true)}
-                    onPromiseEnd={() => setLoading(false)}>
-                    {isProtected ? (
-                      <RequireAuth>
-                        <Element context={context} />
-                      </RequireAuth>
-                    ) : (
-                      <Element context={context} />
-                    )}
-                  </Suspense>
-                </Layout>
-              ) : (
-                <Suspense
-                  fallback={<LoadingIndicator />}
-                  onPromiseStart={() => setLoading(true)}
-                  onPromiseEnd={() => setLoading(false)}>
-                  {isProtected ? (
-                    <RequireAuth>
-                      <Element context={context} />
-                    </RequireAuth>
-                  ) : (
-                    <Element context={context} />
-                  )}
-                </Suspense>
-              )
-            }
-          />
-        )
-      )}
-    </Routes>
-  );
-};
-
-export default ARoutesStatic;
+/*
+ * File Name:  ARoutesStatic.js
+ *
+ * Description:  This file handles the logic for Handling Header and Footer to be visible or not for the every specific page for single page application (Static Page).
+ *
+ *
+ * Author:  Mark Sea.
+ *
+ * Created:  14/Dec/2024
+ *
+ * Dependencies:  {react-router}
+ *
+ * Assumptions:  This file is used in appStatic.js
+ */
+
+import React, { Suspense, useContext } from "react";
+import { Route, Routes } from "react-router";
+import routes from "../ARoutes/AFRoutes.js";
+import RequireAuth from "../Components/RequireAuth.js";
+import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
+import Header from "../Components/Header/Header.js";
+import Footer from "../Components/Footer/Footer.js";
+import LoadingContext from "../Utils/LoadingContext.js";
+
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    {children}
+    <Footer />
+  </>
+);
+
+const ARoutesStatic = ({ context }) => {
+  const { setLoading } = useContext(LoadingContext);
+  return (
+    <Routes>
+      {routes.map(
+        (
+          { path, element: Element, withHeaderFooter, protected: isProtected },
+          index
+        ) => (
+          <Route
+            key={index}
+            path={path}
+            element={
+              withHeaderFooter ? (
+                <Layout>
+                  <Suspense
+                    fallback={<LoadingIndicator />}
+                    onPromiseStart={() => setLoading(true)}
+                    onPromiseEnd={() => setLoading(false)}>
+                    {isProtected ? (
+                      <RequireAuth>
+                        <Element context={context} />
+                      </RequireAuth>
+                    ) : (
+                      <Element context={context} />
+                    )}
+                  </Suspense>
+                </Layout>
+              ) : (
+                <Suspense
+                  fallback={<LoadingIndicator />}
+                  onPromiseStart={() => setLoading(true)}
+                  onPromiseEnd={() => setLoading(false)}>
+                  {isProtected ? (
+                    <RequireAuth>
+                      <Element context={context} />
+                    </RequireAuth>
+                  ) : (
+                    <Element context={context} />
+                  )}
+                </Suspense>
+              )
+            }
+          />
+        )
+      )}
+    </Routes>
+  );
+};
+
+export default ARoutesStatic;

package/src/Static/appStatic.js

@@ -1,16 +1,16 @@
-import React, { useState } from "react";
-import ARoutesStatic from "../Routes/ARoutesStatic.js";
-import LoadingContext from "../Utils/LoadingContext.js";
-import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
-
-
-function appStatic({ context }) {
-  const [loading, setLoading] = useState(false);
-  return (
-    <LoadingContext.Provider value={{ loading, setLoading }}>
-      {loading && <LoadingIndicator />}
-      <ARoutesStatic context={context} />
-    </LoadingContext.Provider>
-  );
-}
-export default appStatic;
+import React, { useState } from "react";
+import ARoutesStatic from "../Routes/ARoutesStatic.js";
+import LoadingContext from "../Utils/LoadingContext.js";
+import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
+
+
+function appStatic({ context }) {
+  const [loading, setLoading] = useState(false);
+  return (
+    <LoadingContext.Provider value={{ loading, setLoading }}>
+      {loading && <LoadingIndicator />}
+      <ARoutesStatic context={context} />
+    </LoadingContext.Provider>
+  );
+}
+export default appStatic;

package/src/Static/indexStatic.js

@@ -1,13 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router";
-import App from "./appStatic";
-
-const asggen = ReactDOM.createRoot(document.getElementById("asggen"));
-asggen.render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>
-);
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router";
+import App from "./appStatic";
+
+const asggen = ReactDOM.createRoot(document.getElementById("asggen"));
+asggen.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/src/Style/App.module.css

@@ -1,11 +1,11 @@
-.loadingContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-.loadingLogo {
-    width: 150px;
-    height: auto;
-}
+.loadingContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.loadingLogo {
+    width: 150px;
+    height: auto;
+}

package/src/Style/MeshGradient.module.css

@@ -1,130 +1,130 @@
-.gradientWrap {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    background-color: rgba(var(--light), .2);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-}
-
-.meshgradient .color {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    transform: scale(3) rotate(0deg);
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    position: absolute;
-    margin: auto;
-    background-repeat: no-repeat;
-    mix-blend-mode: overlay;
-}
-
-.c1 {
-    background: radial-gradient(#dfa39b 25%, transparent 50%);
-    background-size: 60% 80%;
-    background-position: 0 0;
-    animation: c1 8s infinite linear;
-}
-
-.c2 {
-    background: radial-gradient(#aa8de3 25%, transparent 50%);
-    background-size: 70% 80%;
-    background-position: 0 100%;
-    animation: c2 10s infinite linear;
-}
-
-.c3 {
-    background: radial-gradient(#d1a0c4 25%, transparent 50%);
-    background-size: 80% 80%;
-    background-position: 50% 0;
-    animation: c3 5s infinite linear;
-}
-
-.c4 {
-    background: radial-gradient(#52bce9 25%, transparent 50%);
-    background-size: 80% 80%;
-    background-position: 50% 100%;
-    animation: c4 6s infinite linear;
-}
-
-/* Updated animations with more breakpoints */
-@keyframes c1 {
-    25% {
-        background-size: 70% 70%;
-        background-position: 25% 50%;
-        transform: scale(3) rotate(-45deg);
-    }
-
-    50% {
-        background-size: 80% 80%;
-        background-position: 50% 100%;
-        transform: scale(3) rotate(-75deg);
-    }
-
-    75% {
-        background-size: 60% 60%;
-        background-position: 75% 50%;
-        transform: scale(3) rotate(-30deg);
-    }
-}
-
-@keyframes c2 {
-    25% {
-        background-size: 60% 60%;
-        background-position: 25% 0;
-        transform: scale(3) rotate(45deg);
-    }
-
-    50% {
-        background-size: 80% 80%;
-        background-position: 50% 0;
-        transform: scale(3) rotate(90deg);
-    }
-
-    75% {
-        background-size: 70% 70%;
-        background-position: 75% 0;
-        transform: scale(3) rotate(135deg);
-    }
-}
-
-@keyframes c3 {
-    25% {
-        background-size: 90% 90%;
-        background-position: 50% 50%;
-        transform: scale(3) rotate(-15deg);
-    }
-
-    50% {
-        background-size: 70% 80%;
-        background-position: 0 100%;
-        transform: scale(3) rotate(8deg);
-    }
-
-    75% {
-        background-size: 60% 70%;
-        background-position: 50% 50%;
-        transform: scale(3) rotate(-10deg);
-    }
-}
-
-@keyframes c4 {
-    25% {
-        background-position: 100% 0;
-        transform: scale(3) rotate(30deg);
-    }
-
-    50% {
-        background-position: 0 0;
-        transform: scale(3) rotate(-36deg);
-    }
-
-    75% {
-        background-position: 50% 50%;
-        transform: scale(3) rotate(0deg);
-    }
-}
+.gradientWrap {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    background-color: rgba(var(--light), .2);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+}
+
+.meshgradient .color {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transform: scale(3) rotate(0deg);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    margin: auto;
+    background-repeat: no-repeat;
+    mix-blend-mode: overlay;
+}
+
+.c1 {
+    background: radial-gradient(#dfa39b 25%, transparent 50%);
+    background-size: 60% 80%;
+    background-position: 0 0;
+    animation: c1 8s infinite linear;
+}
+
+.c2 {
+    background: radial-gradient(#aa8de3 25%, transparent 50%);
+    background-size: 70% 80%;
+    background-position: 0 100%;
+    animation: c2 10s infinite linear;
+}
+
+.c3 {
+    background: radial-gradient(#d1a0c4 25%, transparent 50%);
+    background-size: 80% 80%;
+    background-position: 50% 0;
+    animation: c3 5s infinite linear;
+}
+
+.c4 {
+    background: radial-gradient(#52bce9 25%, transparent 50%);
+    background-size: 80% 80%;
+    background-position: 50% 100%;
+    animation: c4 6s infinite linear;
+}
+
+/* Updated animations with more breakpoints */
+@keyframes c1 {
+    25% {
+        background-size: 70% 70%;
+        background-position: 25% 50%;
+        transform: scale(3) rotate(-45deg);
+    }
+
+    50% {
+        background-size: 80% 80%;
+        background-position: 50% 100%;
+        transform: scale(3) rotate(-75deg);
+    }
+
+    75% {
+        background-size: 60% 60%;
+        background-position: 75% 50%;
+        transform: scale(3) rotate(-30deg);
+    }
+}
+
+@keyframes c2 {
+    25% {
+        background-size: 60% 60%;
+        background-position: 25% 0;
+        transform: scale(3) rotate(45deg);
+    }
+
+    50% {
+        background-size: 80% 80%;
+        background-position: 50% 0;
+        transform: scale(3) rotate(90deg);
+    }
+
+    75% {
+        background-size: 70% 70%;
+        background-position: 75% 0;
+        transform: scale(3) rotate(135deg);
+    }
+}
+
+@keyframes c3 {
+    25% {
+        background-size: 90% 90%;
+        background-position: 50% 50%;
+        transform: scale(3) rotate(-15deg);
+    }
+
+    50% {
+        background-size: 70% 80%;
+        background-position: 0 100%;
+        transform: scale(3) rotate(8deg);
+    }
+
+    75% {
+        background-size: 60% 70%;
+        background-position: 50% 50%;
+        transform: scale(3) rotate(-10deg);
+    }
+}
+
+@keyframes c4 {
+    25% {
+        background-position: 100% 0;
+        transform: scale(3) rotate(30deg);
+    }
+
+    50% {
+        background-position: 0 0;
+        transform: scale(3) rotate(-36deg);
+    }
+
+    75% {
+        background-position: 50% 50%;
+        transform: scale(3) rotate(0deg);
+    }
+}