Revert "New structure for front end files"

frontend/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import App from './pages/App';
+import App from './webPages/RoutingRenders/App';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 

frontend/src/components/CookieBanner.tsx → frontend/src/webPages/Components/CookieBanner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import '../pages/App';
+import '../RoutingRenders/App.css'; // Assuming you're adding the CSS here
 
 const CookieBanner: React.FC = () => {
   // State to manage whether the banner is visible

frontend/src/components/HeaderFooter.tsx → frontend/src/webPages/Components/HeaderFooter.tsx

@@ -6,7 +6,7 @@ import { Drawer } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import Container from "@mui/material/Container";
 import DensitySmallSharpIcon from "@mui/icons-material/DensitySmallSharp";
-import { useAuth } from "../pages/AuthContext";
+import { useAuth } from "../contexts/AuthContext";
 // import Modal from '@mui/material/Modal';
 // import Typography from '@mui/material/Typography';
 

frontend/src/components/Modals.tsx → frontend/src/webPages/Components/Modals.tsx

@@ -8,7 +8,7 @@ import {
   getReactionsByFamilyId,
   getReactantsByReactionIdAsync,
   getProductsByReactionIdAsync,
-} from "../API/API_GetMethods";
+} from "../../API/API_GetMethods";
 import {
   Family,
   Mechanism,
@@ -27,7 +27,7 @@ import {
   addSpeciesToReaction,
   createFamily,
   createMechanism,
-} from "../API/API_CreateMethods";
+} from "../../API/API_CreateMethods";
 
 import {
   Modal,

frontend/src/components/NavDropDown.tsx → frontend/src/webPages/Components/NavDropDown.tsx

@@ -4,7 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemButton from '@mui/material/ListItemButton';
-import { useAuth } from '../pages/AuthContext'; // Import useAuth to get the user data
+import { useAuth } from '../contexts/AuthContext'; // Import useAuth to get the user data
 
 const NavDropDown = () => {
   const navigate = useNavigate();

frontend/src/components/ProtectedRoute.tsx → frontend/src/webPages/Components/ProtectedRoute.tsx

@@ -1,5 +1,5 @@
 import { Navigate } from 'react-router-dom';
-import { useAuth } from '../pages/AuthContext';
+import { useAuth } from '../contexts/AuthContext';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;

frontend/src/components/RenderFamilyTree.tsx → frontend/src/webPages/Components/RenderFamilyTree.tsx

@@ -7,8 +7,8 @@ import {
   downloadOAMusicbox,
   getFamilies,
   getMechanismsByFamilyId,
-} from "../API/API_GetMethods";
-import { deleteFamily, deleteMechanism } from "../API/API_DeleteMethods";
+} from "../../API/API_GetMethods";
+import { deleteFamily, deleteMechanism } from "../../API/API_DeleteMethods";
 
 import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import { TreeItem } from "@mui/x-tree-view/TreeItem";

frontend/src/components/RenderSpeciesReactionTable.tsx → frontend/src/webPages/Components/RenderSpeciesReactionTable.tsx

@@ -22,7 +22,7 @@ import Tab from "@mui/material/Tab";
 import {
   getReactionsByMechanismId,
   getSpeciesByMechanismId,
-} from "../API/API_GetMethods";
+} from "../../API/API_GetMethods";
 
 const tabsHeaderStyle: React.CSSProperties = {
   backgroundColor: "#f0f0f0",

frontend/src/pages/family.tsx → frontend/src/webPages/Family/family.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 
-import RenderFamilyTree from "../components/RenderFamilyTree";
-import RenderSpeciesReactionTable from "../components/RenderSpeciesReactionTable";
-import { CreateFamilyModal, CreateMechanismModal } from "../components/Modals";
+import RenderFamilyTree from "../Components/RenderFamilyTree";
+import RenderSpeciesReactionTable from "../Components/RenderSpeciesReactionTable";
+import { CreateFamilyModal, CreateMechanismModal } from "../Components/Modals";
 
 import { StyledDetailBox } from "./familyStyling";
 
-import { Header, Footer } from "../components/HeaderFooter";
+import { Header, Footer } from "../Components/HeaderFooter";
 
-import "../styles/family.css";
+import "./family.css";
 
 const FamilyPage = () => {
   const [selectedFamilyId, setSelectedFamilyId] = useState<string | null>(null);

frontend/src/pages/logIn.tsx → frontend/src/webPages/LogIn/logIn.tsx

@@ -2,19 +2,19 @@ import { useNavigate } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { googleLogout, useGoogleLogin } from "@react-oauth/google";
 import axios from "axios";
-import { useAuth } from "./AuthContext"; // Import the AuthContext
+import { useAuth } from "../contexts/AuthContext"; // Import the AuthContext
 
-import "../styles/logIn.css";
+import "./logIn.css";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Modal from "@mui/material/Modal";
 import Typography from "@mui/material/Typography";
 import GoogleIcon from "@mui/icons-material/Google";
 import NoAccountsIcon from "@mui/icons-material/NoAccounts";
-import { Footer } from "../components/HeaderFooter";
-import Holidays from "../components/Holidays"; // Import the Holidays component
-import { getUserByEmail } from "../API/API_GetMethods";
-import { createUser } from "../API/API_CreateMethods";
+import { Footer } from "../Components/HeaderFooter";
+import Holidays from "../Components/Holidays"; // Import the Holidays component
+import { getUserByEmail } from "../../API/API_GetMethods";
+import { createUser } from "../../API/API_CreateMethods";
 
 interface AuthUser {
   access_token: string;

frontend/src/pages/loggedIn.tsx → frontend/src/webPages/LogIn/loggedIn.tsx

@@ -2,9 +2,9 @@ import { useNavigate } from 'react-router-dom';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
 
-import { Header, Footer } from '../components/HeaderFooter';
+import { Header, Footer } from '../Components/HeaderFooter';
 
-import "../styles/loggedIn.css";
+import "./loggedIn.css";
 
   const LoggedIn = () => {
     const navigate = useNavigate();

frontend/src/pages/RoleManagement.tsx → frontend/src/webPages/Roles/RoleManagement.tsx

@@ -18,14 +18,14 @@ import {
   GridEventListener,
 } from "@mui/x-data-grid";
 
-import { Header, Footer } from "../components/HeaderFooter";
-
-import "../styles/roles.css";
-//import { useAuth } from "./AuthContext"; // Import the AuthContext
-import { getUsers } from "../API/API_GetMethods";
-import { User } from "../API/API_Interfaces";
-import { updateUser } from "../API/API_UpdateMethods";
-import { deleteUser } from "../API/API_DeleteMethods";
+import { Header, Footer } from "../Components/HeaderFooter";
+
+import "./roles.css";
+//import { useAuth } from "../contexts/AuthContext"; // Import the AuthContext
+import { getUsers } from "../../API/API_GetMethods";
+import { User } from "../../API/API_Interfaces";
+import { updateUser } from "../../API/API_UpdateMethods";
+import { deleteUser } from "../../API/API_DeleteMethods";
 
 function RolesToolbar() {
   return (

frontend/src/pages/App.tsx → frontend/src/webPages/RoutingRenders/App.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import '../styles/App.css'; // Assuming CSS is applied globally
-import Banner from '../components/CookieBanner';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+//import React from 'react';
+import './App.css'; // Assuming CSS is applied globally
+import Banner from '../Components/CookieBanner';
+//import { createTheme/*, ThemeProvider*/ } from '@mui/material/styles';
 import { Route, Routes } from 'react-router-dom';
-import Settings from './settings';
-import LoggedIn from './loggedIn';
-import FamilyPage from './family';
-import LogIn from './logIn';
-import RoleManagement from './RoleManagement';
-import NoAccess from './Unauthorized.tsx';
+import Settings from '../Settings/settings';
+import LoggedIn from '../LogIn/loggedIn';
+import FamilyPage from '../Family/family';
+import LogIn from '../LogIn/logIn';
+import RoleManagement from '../Roles/RoleManagement';
+import NoAccess from '../Roles/Unauthorized.tsx';
 import { AccessibilityWidget } from 'react-accessibility';
-import { AuthProvider } from './AuthContext';
-import ProtectedRoute from '../components/ProtectedRoute'; // The ProtectedRoute you created earlier
+import { AuthProvider } from '../contexts/AuthContext';
+import ProtectedRoute from '../Components/ProtectedRoute'; // The ProtectedRoute you created earlier
 
 
 // const theme = createTheme({

frontend/src/pages/settings.tsx → frontend/src/webPages/Settings/settings.tsx

@@ -1,9 +1,9 @@
 import { useNavigate } from 'react-router-dom';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
-import { Header, Footer } from '../components/HeaderFooter';
+import { Header, Footer } from '../Components/HeaderFooter';
 
-import "../styles/settings.css"
+import "./settings.css"
 
   const Settings = () => {
     const navigate = useNavigate();

frontend/src/pages/AuthContext.tsx → frontend/src/webPages/contexts/AuthContext.tsx

@@ -5,7 +5,7 @@ import  {
   ReactNode,
   useEffect,
 } from "react";
-import { User } from "../API/API_Interfaces";
+import { User } from "../../API/API_Interfaces";
 
 // Define the shape of the AuthContext
 interface AuthContextProps {