minor changes, added navbar to admin

sports-matcher/src/Admin.css

@@ -2,3 +2,7 @@
 .MainTable {
     padding : 20px;
 }
+
+.Title {
+    margin-top: 40px;
+}

sports-matcher/src/Admin.js

@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material';
+import Navbar from './Navbar';
 
 
 
@@ -36,14 +37,14 @@ class AdminTable extends React.Component {
 
     }
 
-    EditButton() {
+    editButton() {
         return <Button onClick={() => {
             alert('clicked');
         }} variant="contained">Edit</Button>;
 
     }
 
-    DeleteButtonClick() {
+    deleteButtonClick() {
         return (
             <Container component="main" maxWidth="xs">
 
@@ -55,20 +56,27 @@ class AdminTable extends React.Component {
         )
     }
 
-    NewDeleteButtonClick() {
+    newDeleteButtonClick() {
         return (<form onsubmit="console.log('You clicked submit.'); return false">
             <button type="submit">Submit</button>
         </form>)
     }
 
-    DeleteButton() {
+    deleteButton() {
         return <Button onClick={() => {
             alert('User deleted.');
         }} variant="contained">Delete</Button>;
 
     }
 
-    PardonButton() {
+    matchDeleteButton() {
+        return <Button onClick={() => {
+            alert('Match deleted.');
+        }} variant="contained">Delete</Button>;
+
+    }
+
+    pardonButton() {
         return <Button onClick={() => {
             alert('User pardoned.');
         }} variant="contained">Pardon</Button>;
@@ -85,8 +93,8 @@ class AdminTable extends React.Component {
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
+                    <TableCell>{this.deleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -102,9 +110,9 @@ class AdminTable extends React.Component {
                     <TableCell>{name}</TableCell>
                     <TableCell>{email}</TableCell>
                     <TableCell>{phone}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
-                    <TableCell>{this.PardonButton()}</TableCell>
+                    <TableCell>{this.deleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
+                    <TableCell>{this.pardonButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -120,8 +128,8 @@ class AdminTable extends React.Component {
                     <TableCell>{date}</TableCell>
                     <TableCell>{location}</TableCell>
                     <TableCell>{description}</TableCell>
-                    <TableCell>{this.DeleteButton()}</TableCell>
-                    <TableCell>{this.EditButton()}</TableCell>
+                    <TableCell>{this.matchDeleteButton()}</TableCell>
+                    <TableCell>{this.editButton()}</TableCell>
                 </TableRow>
             )
         })
@@ -208,7 +216,8 @@ class AdminTable extends React.Component {
     render() {
         return (
             <div>
-                <h1 id='title'>Administration</h1>
+                <Navbar></Navbar>
+                <h1 className='Title'>Administration</h1>
                 <div className='ButtonList'>
                     <Button onClick={() => {
                         this.setState({ buttonColors: ['black', '', ''] });

sports-matcher/src/App.js

@@ -2,6 +2,7 @@ import './App.css';
 import { Routes, Route, Link } from "react-router-dom";
 import SignIn from './SignIn';
 import SignUp from './SignUp';
+import Admin from './Admin';
 import Home from './Home';
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
         <Route path="" element={<Home />} />
         <Route path="sign-in" element={<SignIn />} />
         <Route path="sign-up" element={<SignUp />} />
+        <Route path="admin" element={<Admin />} />
       </Routes>
     </div>
   );

sports-matcher/src/Navbar.js

@@ -141,7 +141,7 @@ export default function Navbar(){
               <MenuItem onClick={handleCloseUserMenu}>
                 <Typography textAlign="center">Account</Typography>
               </MenuItem>
-                <MenuItem onClick={() => navigate('sign-in')}>
+              <MenuItem onClick={() => navigate('/sign-in')}>
                 <Typography textAlign="center">Sign Out</Typography>
               </MenuItem>
             </Menu>