User table final PR

src/components/AddNewUserModal/AddNewUserModal.jsx

@@ -17,13 +17,11 @@ import {
 } from '@chakra-ui/react';
 import { useBackend } from '../../contexts/BackendContext';
 import UploadAvatar from '../UploadAvatar/UploadAvatar';
-import CreateToast  from '../Toasts/CreateToast';
-
+import CreateToast from '../Toasts/CreateToast';
 
 const AddNewUserModal = ({ isOpen, onClose }) => {
   const { backend } = useBackend();
 
-
   const initialRef = useRef(null);
   const finalRef = useRef(null);
 
@@ -35,7 +33,6 @@ const AddNewUserModal = ({ isOpen, onClose }) => {
   const [loading, setLoading] = useState(false);
   const facility = 1;
 
-
   const toast = useToast();
 
   const handleSendEmail = async () => {

src/components/UploadAvatar/UploadAvatar.css

@@ -1,6 +1,5 @@
-.uploadAvatarButton
- {
+.uploadAvatarButton {
   border-radius: 50px;
   border-color: darkgray;
   position: relative;
- }
+}

src/components/UsersTable/EditUserModal.css

@@ -1,38 +1,37 @@
 /* EditUserModal.css */
 .modal-content {
-    max-width: 90%; /* Default width for mobile devices */
+  max-width: 90%; /* Default width for mobile devices */
 }
-  
+
 @media screen and (min-width: 768px) {
-    .modal-content {
-        max-width: 60%; /* Width for larger screens */
-    }
+  .modal-content {
+    max-width: 60%; /* Width for larger screens */
+  }
 }
 
 /* RemoveUser.css */
 .buttons-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .button {
-    width: 100%;
-    margin-bottom: 8px;
+  width: 100%;
+  margin-bottom: 8px;
 }
 
 @media screen and (min-width: 768px) {
-    .buttons-container {
-        flex-direction: row;
-    }
+  .buttons-container {
+    flex-direction: row;
+  }
 
-    .button {
-        width: 50%;
-        margin-bottom: 0;
-    }
+  .button {
+    width: 50%;
+    margin-bottom: 0;
+  }
 
-    .button:last-child {
-        margin-left: 8px;
-    }
+  .button:last-child {
+    margin-left: 8px;
+  }
 }
-

src/components/UsersTable/EditUserModal.jsx

@@ -68,7 +68,7 @@ const EditUser = ({ setModalStep, onClose, info, setRender, render }) => {
     };
     await backend.put(`users/${info.email}`, usersData);
     setRender(!render);
-    onClose()
+    onClose();
   };
 
   return (

src/components/UsersTable/UserTable.jsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTable, usePagination } from 'react-table';
 import {
+  Avatar,
   Table,
   Tr,
   Td,
@@ -129,10 +130,13 @@ const UserPageTable = () => {
             return (
               <Card boxShadow="dark-lg" m={6} size="md" p="4" rounded="md" bg="white">
                 <CardHeader>
-                  <Heading>
-                    {user.firstName} {user.lastName}
-                  </Heading>
-                  <Text>{user.admin}</Text>
+                  <Flex direction="row" spacing={4}>
+                    <Heading>
+                      <Avatar marginRight="24px" />
+                      {user.firstName} {user.lastName}
+                    </Heading>
+                    <Text>{user.admin}</Text>
+                  </Flex>
                 </CardHeader>
 
                 <CardBody>

src/components/UsersTable/UserTableStructure.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Icon, HStack, Box } from '@chakra-ui/react';
+import { Avatar, Text, Icon, HStack, Box, Flex } from '@chakra-ui/react';
 import { BsPersonFill } from 'react-icons/bs';
 import { AiOutlineInfoCircle } from 'react-icons/ai';
 import EditUserModal from './EditUserModal';
@@ -24,9 +24,12 @@ const CellStructure = (setRender, render, isMobile) => {
       }),
 
       Cell: props => (
-        <Text>
-          {props.value.firstName} {props.value.lastName}
-        </Text>
+        <Flex>
+          <Avatar marginRight="24px" />
+          <Text>
+            {props.value.firstName} {props.value.lastName}
+          </Text>
+        </Flex>
       ),
     },
     {

src/pages/AddDog/AddDog.css

@@ -203,5 +203,4 @@
 .addTag {
   justify-content: center;
   margin: auto;
-
 }