front end

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "axios": "^0.20.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.20",
     "node-sass": "^4.14.1",

src/App.js

@@ -19,6 +19,7 @@ import UserList from './Components1/UserList/UserList';
 import ResponsiveDrawer from "./Components1/SideBar/SideBar";
 import { BrowserRouter, Route } from "react-router-dom";
 import Course from "./Components1/SideBarC/SideBarC";
+import Users from "./Screens/Users/Users";
 // Initialize Google Analytics
 ReactGA.initialize(process.env.REACT_APP_GA_CODE);
 
@@ -57,7 +58,7 @@ const App = () => {
           <AppRoute exact path="/addcourse" component={AddCourse} />
           <AppRoute exact path="/course" component={Course} />
           <AppRoute exact path="/allusers" component={UserList} />
-
+          <Route path="/users" render={(props) => <Users />} />
         </Switch>
       )} />
 

src/Components1/PersonBarC/PBC.js

@@ -16,13 +16,14 @@ import ListItemText from "@material-ui/core/ListItemText";
 import MailIcon from "@material-ui/icons/Mail";
 import MenuIcon from "@material-ui/icons/Menu";
 import Typography from "@material-ui/core/Typography";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { makeStyles, useTheme, withTheme } from "@material-ui/core/styles";
 import PersonIcon from "@material-ui/icons/Person";
 import styles from "./PBC.module.css";
 import Card from "../CourseCard/CourseC";
 import CircleUnchecked from "@material-ui/icons/RadioButtonUnchecked";
 import CheckCircleOutlineOutlinedIcon from "@material-ui/icons/CheckCircleOutlineOutlined";
 import Checkbox from "@material-ui/core/Checkbox";
+import "./person.css"
 const drawerWidth = 220;
 
 const useStyles = makeStyles((theme) => ({
@@ -31,6 +32,8 @@ const useStyles = makeStyles((theme) => ({
 		border: "none",
 	},
 	drawer: {
+		color: "#000",
+		backgroundColor: "#F7F8FB",
 		[theme.breakpoints.up("sm")]: {
 			width: drawerWidth,
 			flexShrink: 0,
@@ -99,6 +102,7 @@ function ResponsiveDrawer(props, { data }) {
 					style={{
 						marginTop: "25%",
 						marginLeft: "5%",
+						color: "#000"
 					}}
 				>
 					Hello User!
@@ -118,6 +122,7 @@ function ResponsiveDrawer(props, { data }) {
 					border: 0,
 					height: "2px",
 					borderTop: "1px solid #F6F7F8",
+					color: "#000"
 				}}
 			></hr>
 			<div>
@@ -126,6 +131,7 @@ function ResponsiveDrawer(props, { data }) {
 						display: "flex",
 						flexDirection: "column",
 						marginLeft: "5%",
+						color: "#000"
 					}}
 				>
 					<p style={{ color: "#C6C6C6", fontSize: "2vh" }}>
@@ -191,9 +197,10 @@ function ResponsiveDrawer(props, { data }) {
 					border: 0,
 					height: "2px",
 					borderTop: "1px solid #F6F7F8",
+					color: "#000"
 				}}
 			></hr>
-			<h2 style={{ marginLeft: "5%" }}>Keep Growing !!🐱‍🏍</h2>
+			<h2 style={{ marginLeft: "5%", color: "#000" }}>Keep Growing !!🐱‍🏍</h2>
 		</div>
 	);
 	const container =

src/Components1/PersonBarC/person.css

@@ -0,0 +1,3 @@
+* {
+    color: black;
+}

src/Components1/PersonBarP/PBB.module.css

@@ -0,0 +1,76 @@
+.container {
+    width: 120px;
+    margin-top: 15%;
+}
+
+.circle {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding: 100% 0 0;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 7px solid white;
+    box-shadow: 0px 3px 6px #00000029;
+}
+
+.circle img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.avatar {
+    vertical-align: middle;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.main {
+    margin-left: 2%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 5vw;
+    grid-row-gap: 3vw;
+    border-radius: 5%;
+}
+
+.div1 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+@media only screen and (max-width: 1440px) {
+    .main {
+        grid-column-gap: 3vw;
+    }
+}
+
+@media only screen and (max-width: 1290px) {
+    .main {
+        margin-left: 0%;
+        grid-column-gap: 1vw;
+    }
+}
+
+@media only screen and (max-width: 1100px) {
+    .main {
+        margin-left: 0%;
+        grid-column-gap: 1vw;
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media only screen and (max-width: 620px) {
+    .main {
+        margin-left: 0%;
+        grid-column-gap: 1vw;
+        grid-template-columns: repeat(1, 1fr);
+    }
+}