Create redesigned Users page with two buttons link to users-search an…

…d users-permission-search

client/src/App.jsx

@@ -49,7 +49,7 @@ const routes = [
   { path: '/events', name: 'events', Component: Events },
   { path: '/users', name: 'users', Component: Users },
 
-  { path: '/useradmin', name: 'useradmin', Component: UserAdmin },
+  { path: '/users/user-search', name: 'useradmin', Component: UserAdmin },
   { path: '/projects', name: 'projects', Component: ProjectList },
   { path: '/projects/create', name: 'projectform', Component: addProject },
   {

client/src/components/Navbar.jsx

@@ -64,9 +64,6 @@ const Navbar = (props) => {
               <StyledButton component={NavLink} to="/users">
                 USERS
               </StyledButton>
-              <StyledButton component={NavLink} to="/useradmin">
-                NewUSERS
-              </StyledButton>
               <StyledButton component={NavLink} to="/projects">
                 PROJECTS
               </StyledButton>

client/src/pages/Users.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { Button } from '@mui/material';
 
 import '../sass/Users.scss';
@@ -8,15 +9,21 @@ const Users = () => {
     <div className="container--users">
       <div className="margin-bottom">
         <Button
+          component={Link}
+          to="/users/user-search"
           className="button"
           variant="contained"
-          onClick={() => console.log('clicked')}
         >
           User Search
         </Button>
       </div>
       <div>
-        <Button className="button" variant="contained">
+        <Button
+          component={Link}
+          to="/users/permission-search"
+          className="button"
+          variant="contained"
+        >
           User Permission Search
         </Button>
       </div>