Merge pull request #31 from bcgov/hot-fix

Route and styling cleanup
bcgov · Aug 14, 2024 · cf8c3d6 · cf8c3d6
2 parents c1d177f + 34cc57d
commit cf8c3d6
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 50 deletions.
diff --git a/submit-web/src/App.tsx b/submit-web/src/App.tsx
@@ -1,7 +1,6 @@
 import { ThemeProvider } from "@mui/material";
 import { QueryClient } from "@tanstack/query-core";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { AuthProvider } from "react-oidc-context";
 import { OidcConfig } from "@/utils/config";
 import { theme } from "@/styles/theme";
@@ -21,7 +20,6 @@ function App() {
             <RouterProviderWithAuthContext />
           </AuthProvider>
         </ThemeProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </>
   );

diff --git a/submit-web/src/components/Shared/EAOAppBar.tsx b/submit-web/src/components/Shared/EAOAppBar.tsx
@@ -3,12 +3,20 @@ import EAO_Logo from "@/assets/images/EAO_Logo.png";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { AppConfig, OidcConfig } from "@/utils/config";
 import { useAuth } from "react-oidc-context";
+import { theme } from "@/styles/theme";
 
 export default function EAOAppBar() {
   const auth = useAuth();
   return (
     <>
-      <AppBar position="static" color="inherit" elevation={2}>
+      <AppBar
+        position="static"
+        color="inherit"
+        sx={{
+          borderBottom: `1px solid ${theme.palette.grey[300]}`,
+          boxShadow: "none",
+        }}
+      >
         <Grid
           container
           padding={"0.5rem"}

diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx
@@ -56,7 +56,10 @@ const BreadcrumbNav: React.FC = () => {
                 ) : (
                   <Link
                     key={path}
-                    style={{ color: theme.palette.primary.dark }}
+                    style={{
+                      color: theme.palette.primary.dark,
+                      textDecoration: "underline",
+                    }}
                     to={path}
                   >
                     {title}

diff --git a/submit-web/src/components/Shared/layout/SideNav/SideNavElements.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavElements.tsx
@@ -4,8 +4,8 @@ export const Routes: RouteType[] = [
     path: "/aboutpage",
   },
   {
-    name: "Lazy Loaded Page",
-    path: "/newpage",
+    name: "All Projects",
+    path: "/projects",
   },
   {
     name: "Plans",

diff --git a/submit-web/src/routeTree.gen.ts b/submit-web/src/routeTree.gen.ts
@@ -30,8 +30,8 @@ import { Route as AuthenticatedDashboardEaoPlansPlanIdImport } from './routes/_a
 
 // Create Virtual Routes
 
-const AuthenticatedDashboardNewpageLazyImport = createFileRoute(
-  '/_authenticated/_dashboard/newpage',
+const AuthenticatedDashboardProjectsLazyImport = createFileRoute(
+  '/_authenticated/_dashboard/projects',
 )()
 const AuthenticatedDashboardAboutpageLazyImport = createFileRoute(
   '/_authenticated/_dashboard/aboutpage',
@@ -69,12 +69,12 @@ const AuthenticatedDashboardRoute = AuthenticatedDashboardImport.update({
   getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const AuthenticatedDashboardNewpageLazyRoute =
-  AuthenticatedDashboardNewpageLazyImport.update({
-    path: '/newpage',
+const AuthenticatedDashboardProjectsLazyRoute =
+  AuthenticatedDashboardProjectsLazyImport.update({
+    path: '/projects',
     getParentRoute: () => AuthenticatedDashboardRoute,
   } as any).lazy(() =>
-    import('./routes/_authenticated/_dashboard/newpage.lazy').then(
+    import('./routes/_authenticated/_dashboard/projects.lazy').then(
       (d) => d.Route,
     ),
   )
@@ -121,8 +121,8 @@ const AuthenticatedDashboardUsersIndexRoute =
 
 const AuthenticatedDashboardProjectsIndexRoute =
   AuthenticatedDashboardProjectsIndexImport.update({
-    path: '/projects/',
-    getParentRoute: () => AuthenticatedDashboardRoute,
+    path: '/',
+    getParentRoute: () => AuthenticatedDashboardProjectsLazyRoute,
   } as any)
 
 const AuthenticatedDashboardEaoPlansIndexRoute =
@@ -218,11 +218,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedDashboardAboutpageLazyImport
       parentRoute: typeof AuthenticatedDashboardImport
     }
-    '/_authenticated/_dashboard/newpage': {
-      id: '/_authenticated/_dashboard/newpage'
-      path: '/newpage'
-      fullPath: '/newpage'
-      preLoaderRoute: typeof AuthenticatedDashboardNewpageLazyImport
+    '/_authenticated/_dashboard/projects': {
+      id: '/_authenticated/_dashboard/projects'
+      path: '/projects'
+      fullPath: '/projects'
+      preLoaderRoute: typeof AuthenticatedDashboardProjectsLazyImport
       parentRoute: typeof AuthenticatedDashboardImport
     }
     '/_authenticated/_dashboard/eao-plans/$planId': {
@@ -241,10 +241,10 @@ declare module '@tanstack/react-router' {
     }
     '/_authenticated/_dashboard/projects/': {
       id: '/_authenticated/_dashboard/projects/'
-      path: '/projects'
-      fullPath: '/projects'
+      path: '/'
+      fullPath: '/projects/'
       preLoaderRoute: typeof AuthenticatedDashboardProjectsIndexImport
-      parentRoute: typeof AuthenticatedDashboardImport
+      parentRoute: typeof AuthenticatedDashboardProjectsLazyImport
     }
     '/_authenticated/_dashboard/users/': {
       id: '/_authenticated/_dashboard/users/'
@@ -264,10 +264,12 @@ export const routeTree = rootRoute.addChildren({
     AuthenticatedDashboardRoute: AuthenticatedDashboardRoute.addChildren({
       AuthenticatedDashboardProfileRoute,
       AuthenticatedDashboardAboutpageLazyRoute,
-      AuthenticatedDashboardNewpageLazyRoute,
+      AuthenticatedDashboardProjectsLazyRoute:
+        AuthenticatedDashboardProjectsLazyRoute.addChildren({
+          AuthenticatedDashboardProjectsIndexRoute,
+        }),
       AuthenticatedDashboardEaoPlansPlanIdRoute,
       AuthenticatedDashboardEaoPlansIndexRoute,
-      AuthenticatedDashboardProjectsIndexRoute,
       AuthenticatedDashboardUsersIndexRoute,
     }),
     AuthenticatedAdminLoginRoute,
@@ -318,10 +320,9 @@ export const routeTree = rootRoute.addChildren({
       "children": [
         "/_authenticated/_dashboard/profile",
         "/_authenticated/_dashboard/aboutpage",
-        "/_authenticated/_dashboard/newpage",
+        "/_authenticated/_dashboard/projects",
         "/_authenticated/_dashboard/eao-plans/$planId",
         "/_authenticated/_dashboard/eao-plans/",
-        "/_authenticated/_dashboard/projects/",
         "/_authenticated/_dashboard/users/"
       ]
     },
@@ -349,9 +350,12 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_dashboard/aboutpage.lazy.tsx",
       "parent": "/_authenticated/_dashboard"
     },
-    "/_authenticated/_dashboard/newpage": {
-      "filePath": "_authenticated/_dashboard/newpage.lazy.tsx",
-      "parent": "/_authenticated/_dashboard"
+    "/_authenticated/_dashboard/projects": {
+      "filePath": "_authenticated/_dashboard/projects.lazy.tsx",
+      "parent": "/_authenticated/_dashboard",
+      "children": [
+        "/_authenticated/_dashboard/projects/"
+      ]
     },
     "/_authenticated/_dashboard/eao-plans/$planId": {
       "filePath": "_authenticated/_dashboard/eao-plans/$planId.tsx",
@@ -363,7 +367,7 @@ export const routeTree = rootRoute.addChildren({
     },
     "/_authenticated/_dashboard/projects/": {
       "filePath": "_authenticated/_dashboard/projects/index.tsx",
-      "parent": "/_authenticated/_dashboard"
+      "parent": "/_authenticated/_dashboard/projects"
     },
     "/_authenticated/_dashboard/users/": {
       "filePath": "_authenticated/_dashboard/users/index.tsx",

diff --git a/submit-web/src/routes/__root.tsx b/submit-web/src/routes/__root.tsx
@@ -5,6 +5,7 @@ import { Box } from "@mui/system";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { AuthContextProps } from "react-oidc-context";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 type RouterContext = {
   authentication: AuthContextProps;
@@ -24,7 +25,8 @@ function Layout() {
         <Outlet />
       </Box>
       <Footer />
-      <TanStackRouterDevtools position="bottom-right" />
+      <TanStackRouterDevtools position="bottom-left" />
+      <ReactQueryDevtools initialIsOpen={false} />
     </>
   );
 }
diff --git a/submit-web/src/routes/_authenticated/_dashboard/newpage.lazy.tsx b/submit-web/src/routes/_authenticated/_dashboard/newpage.lazy.tsx
diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects.lazy.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects.lazy.tsx
@@ -0,0 +1,10 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/_authenticated/_dashboard/projects")({
+  component: NewPage,
+  meta: () => [{ title: "Projects" }],
+});
+
+function NewPage() {
+  return <></>;
+}
diff --git a/submit-web/src/routes/_authenticated/registration/create-account.tsx b/submit-web/src/routes/_authenticated/registration/create-account.tsx
@@ -114,7 +114,7 @@ function CreateAccount() {
                   label="Your Given Name"
                   fullWidth
                   InputLabelProps={{
-                    sx: { marginBottom: "0", color: "red", fontWeight: "bold" },
+                    sx: { marginBottom: "0", color: "red" },
                   }}
                 />
                 <ControlledTextField