Merge pull request #18 from Kritika-Singhal/dev

Added Mentor Dashboard Mentoring Page

client/src/App.js

@@ -10,6 +10,7 @@ import ProjectDetails from "./Components/Organization/OrganizationDetail/Project
 import SelectedProposals from "./Components/Dashboard/Proposals/SelectedProposals";
 import YourProposals from "./Components/Dashboard/Proposals/YourProposals";
 import Dashboard from "./Users/Mentor/Components/Dashboard/Dashboard";
+import ProjectsMentoring from "./Users/Mentor/Components/Dashboard/Projects/ProjectsMentoring";
 
 class App extends Component {
   render() {
@@ -39,6 +40,11 @@ class App extends Component {
             />
             <Route exact path="/YourProposals" component={YourProposals} />
             <Route exact path="/MentorDashboard" component={Dashboard} />
+            <Route
+              exact
+              path="/ProjectsMentoring"
+              component={ProjectsMentoring}
+            />
           </Switch>
         </div>
       </BrowserRouter>

client/src/Data/ProposalInfo.json

@@ -28,5 +28,21 @@
         }
       ]
     }
+  ],
+  "projectsMentoring": [
+    {
+      "id": 1,
+      "title": "Donut",
+      "image": "https://git.io/JfpBD",
+      "desc": "Donut is the core project of Codeuino. It needs some graphics to be worked on and also to improve the UX of the whole platform.",
+      "features": [
+        {
+          "name": "UI/UX"
+        },
+        {
+          "name": "Graphic Design"
+        }
+      ] 
+    }
   ]
 }

client/src/Users/Mentor/Components/Dashboard/Projects/Projects.js

@@ -0,0 +1,69 @@
+import React from "react";
+import useStyles from "./ProjectsStyling";
+import Card from "@material-ui/core/Card";
+import { CardActions } from "@material-ui/core";
+import CardContent from "@material-ui/core/CardContent";
+import { CardMedia } from "@material-ui/core";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import { projectsMentoring } from "../../../../../Data/ProposalInfo.json";
+
+const Projects = () => {
+  const classes = useStyles();
+  return (
+    <div>
+      {projectsMentoring.map((data) => (
+        <Card className={classes.root}>
+          <div className={classes.details}>
+            <CardMedia
+              className={classes.im}
+              component="img"
+              alt="org-logo"
+              height="140"
+              src={data.image}
+              title="Organisation card"
+            />
+            <CardContent className={classes.content}>
+              <Typography
+                variant="h5"
+                component="h2"
+                align="left"
+                className={classes.pos1}
+              >
+                {data.title}
+                {data.features.map((f) => (
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    size="small"
+                    className={classes.cap}
+                  >
+                    {f.name}
+                  </Button>
+                ))}
+              </Typography>
+              <Typography
+                variant="body2"
+                color="textSecondary"
+                component="p"
+                align="left"
+                className={classes.pos2}
+              >
+                {data.desc}
+              </Typography>
+            </CardContent>
+          </div>
+          <div>
+            <CardActions>
+              <Button size="small" color="primary" className={classes.btn}>
+                View More
+              </Button>
+            </CardActions>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default Projects;

client/src/Users/Mentor/Components/Dashboard/Projects/ProjectsMentoring.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Header from "../../../../../Components/Layout/Header";
+import Profile from "../DashboardProfile";
+import useStyles from "./ProjectsMentoringStyling";
+import Projects from "./Projects";
+
+const ProjectsMentoring = () => {
+  const classes = useStyles();
+  return (
+    <div>
+      <Header name="Dashboard" />
+      <div className={classes.comp}>
+        <div className={classes.multicomp}>
+          <div className={classes.pro}>
+            <p>Profile</p>
+          </div>
+          <Profile />
+        </div>
+        <div className={classes.multicomp}>
+          <div className={classes.pro}>
+            <p>Project Mentoring</p>
+          </div>
+          <Projects />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectsMentoring;

client/src/Users/Mentor/Components/Dashboard/Projects/ProjectsMentoringStyling.js

@@ -0,0 +1,24 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  comp: {
+    display: "flex",
+    marginLeft: -60,
+    paddingBottom: 10,
+    justifyContent: "center",
+    alignItem: "center",
+  },
+  multicomp: {
+    display: "block",
+  },
+  index: {
+    display: "flex",
+  },
+  pro: {
+    marginTop: 70,
+    marginLeft: 170,
+    fontSize: "24px",
+  },
+});
+
+export default useStyles;

client/src/Users/Mentor/Components/Dashboard/Projects/ProjectsStyling.js

@@ -0,0 +1,50 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#FFFFFF",
+    maxWidth: 700,
+    marginBottom: 20,
+    marginLeft: 150,
+    height: 160,
+    display: "block",
+  },
+  details: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  im: {
+    marginLeft: 45,
+    marginTop: 15,
+    height: 100,
+    width: 100,
+  },
+  content: {
+    marginTop: 0,
+    marginLeft: 20,
+  },
+
+  pos1: {
+    marginTop: 0,
+    maxWidth: 450,
+  },
+  pos2: {
+    marginTop: 15,
+    height: 10,
+  },
+  btn: {
+    marginLeft: 550,
+    marginTop: -2,
+    height: 23,
+    variant: "text",
+  },
+  cap: {
+    marginTop: 0,
+    marginLeft: 30,
+    borderRadius: "30px",
+    height: 23,
+    textTransform: "none",
+  },
+}));
+
+export default useStyles;