feat: UI for /users route (#99)

* worked on solution of issue 92
created UI for users page
styled the user page Table using Tailwind css styled approach

* light mode table added in the users page
ready to be merge

package.json

@@ -22,6 +22,7 @@
 		"react-scripts": "5.0.1",
 		"typescript": "4.9.4",
 		"web-vitals": "3.1.0",
+		"yarn": "^1.22.19",
 		"yup": "0.32.11"
 	},
 	"scripts": {

src/pages/users/Users.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import React, { FC, useEffect } from "react";
 import { useAppDispatch } from "../../hooks/useAppDispatch";
 import { getAllUsersHandler } from "../../actions/users.action";
 import { useAppSelector } from "../../hooks/useAppSelector";
@@ -18,34 +18,35 @@ const Users: FC = () => {
 
 	return (
 		<main>
-			<table className="table-auto">
-				<thead>
+			<table className="table-auto w-screen shadow-lg bg-white border-collapse border-2 my-3">
+				 <thead className="text-xs text-gray-700 uppercase bg-white-50 white:bg-gray-700 dark:text-dark-400 border-2" >
 					<tr>
-						<th>username</th>
-						<th>email</th>
-						<th>verified</th>
-						<th>receive marketing emails</th>
+						<th scope="col" className="bg-blue-100 border-2 text-left px-8 py-4">username</th>
+						<th scope="col" className="bg-blue-100 border-2 text-left px-8 py-4">email</th>
+						<th scope="col" className="bg-blue-100 border-2 text-left px-8 py-4">verified</th>
+						<th scope="col" className="bg-blue-100 border-2 text-left px-8 py-4">receive marketing emails</th>
 					</tr>
 				</thead>
 				<tbody>
 					{records.map((record) => (
-						<tr key={record._id}>
-							<td>
+						<tr key={record._id} className="bg-white border-b white:bg-gray-800 dark:border-gray-700 border-2">
+							<td className="border-2 px-8 py-4">
 								<Link to={`/users/${record._id}`}>
 									{record.username}
 								</Link>
 							</td>
-							<td>{record.email}</td>
-							<td>{record.verified.toString()}</td>
-							<td>
+							<td className="border-2 px-8 py-4">{record.email}</td>
+							<td className="border-2 px-8 py-4">{record.verified.toString()}</td>
+							<td className="border-2 px-8 py-4">
 								{record.receive_marketing_emails.toString()}
 							</td>
-						</tr>
-					))}
+						</tr>	
+					) )}
 				</tbody>
 			</table>
 		</main>
 	);
+
 };
 
 export default Users;

yarn.lock

@@ -5018,7 +5018,7 @@ fs.realpath@^1.0.0:
 
 fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
@@ -10167,6 +10167,11 @@ yargs@^17.0.0:
     y18n "^5.0.5"
     yargs-parser "^21.0.0"
 
+yarn@^1.22.19:
+  version "1.22.19"
+  resolved "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz"
+  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"