Merge pull request #1557 from freaky4wrld/updating-user-management-se…

…ction-according-figma-design-1478

Updated User Management Section

client/src/components/user-admin/UserManagement.js

@@ -1,6 +1,14 @@
 import React, { useState } from 'react';
+import {Box, Button, ButtonGroup, TextField, Typography, List, ListItem, ListItemButton} from '@mui/material';
+
+
 import '../../sass/UserAdmin.scss';
 
+const Buttonsx = {
+  px: 2,
+  py: 0.5,
+}
+
 const UserManagement = ({ users, setUserToEdit }) => {
   let searchResults = [];
   const [searchResultType, setSearchResultType] = useState('name'); // Which results will diplay
@@ -42,69 +50,109 @@ const UserManagement = ({ users, setUserToEdit }) => {
             );
   }
   return (
-    <div className="container--usermanagement">
-      <div>
-        <h3>User Management</h3>
-        <input
+    <Box className="container--usermanagement" sx={{px: '1.8rem'}}>
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        pt: 5,
+        height: '100%',
+        width: 1/1,
+      }}>
+        <Typography variant='h1'>User Management</Typography>
+
+        <Box className="tab-buttons">
+          <ButtonGroup sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            whiteSpace: 'nowrap',
+            mx: 1,
+            }}>
+              <Button
+                sx={Buttonsx}
+                type="button"
+                variant={
+                  searchResultType === 'name'
+                  ? 'contained'
+                  : 'secondary'
+                }
+                onClick={buttonSwap}
+              >
+                Results by Name
+              </Button>
+              <Button
+                sx={Buttonsx}
+                type="button"
+                variant={
+                  searchResultType === 'email'
+                  ? 'contained'
+                  : 'secondary'
+                }
+                onClick={buttonSwap}
+              >
+                Results by Email
+              </Button>
+          </ButtonGroup>
+        </Box>
+        <TextField
           type="text"
-          placeholder="Search by name and email..."
+          placeholder="Enter name and / or email to find a user."
+          variant='standard'
           value={searchTerm}
           onChange={handleChange}
         />
-        <div className="tab-buttons">
-          <div>
-            <button
-              type="button"
-              className={
-                searchResultType === 'name'
-                  ? 'select-button selected'
-                  : 'select-button'
-              }
-              onClick={buttonSwap}
-              disabled={searchResultType === 'name'}
-            >
-              Results by Name
-            </button>
-          </div>
-          <div>
-            <button
-              type="button"
-              className={
-                searchResultType === 'email'
-                  ? 'select-button selected'
-                  : 'select-button'
-              }
-              onClick={buttonSwap}
-              disabled={searchResultType === 'email'}
-            >
-              Results by Email
-            </button>
-          </div>
-        </div>
-        <div>
-          <div>
-            <ul className="search-results">
-              {searchResults.map((u) => {
-                return (
-                  // eslint-disable-next-line no-underscore-dangle
-                  <li key={`result_${u._id}`}>
-                    <button
-                      className="search-results-button"
-                      type="button"
-                      onClick={() => setUserToEdit(u)}
-                    >
-                      {searchResultType === 'name'
-                        ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
-                        : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
+        <Box sx={{ 
+          bgcolor: searchResults.length>0? '#F5F5F5': 'transparent',
+          my: 1.2,
+          borderRadius: 1,
+          flexGrow: 1,
+          width: 1/1,
+          }}>
+          <Box>
+              <List className="search-results disablePadding">
+                {searchResults.map((u) => {
+                  return (
+                    // eslint-disable-next-line no-underscore-dangle
+                    <ListItem
+                    sx={{
+                      px: 2.4,
+                      py: 1,
+                      borderBottom: 1.6,
+                      borderBottomColor: 'grey.300',
+                    }} 
+                      key={`result_${u._id}`}>
+                      <ListItemButton
+                        sx={{
+                          px: 0.25,
+                          py: 0.36,
+                          color: 'primary.main',
+                          mx: 0.16,
+                        }}
+                        className="search-results-button"
+                        type="button"
+                        onClick={() => setUserToEdit(u)}
+                      >
+                        {searchResultType === 'name'
+                          ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
+                          : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
+                      </ListItemButton>
+                    </ListItem>
+                  );
+                })}
+              </List>
+          </Box>
+        </Box>
+        <Box>
+          <Button
+            type='button'
+            variant='secondary'
+          >
+            Add a New User
+          </Button>
+        </Box>
+      </Box>
+    </Box>
   );
 };
 

client/src/sass/UserAdmin.scss

@@ -5,6 +5,7 @@
   align-items: center;
   z-index: 1;
   margin-bottom: 200px;
+  height: 100%;
 }
 
 .edit-users {