Modularise dashboard page

frontend/src/components/atoms/PersonCard/index.tsx

+import React, { useEffect } from "react";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+import Image from "react-bootstrap/Image";
+import Container from "react-bootstrap/Container";
+import styles from "./style.module.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import userImage from "assets/images/user.png";
+
+const PersonCard: React.FC = () => {
+
+	// @ts-ignore
+	useEffect(() => {window.Holder.run()});
+
+  return (
+    <>
+      <Container style={{ display: "flex", padding: 0 }}>
+        <span>
+          <Image className={styles.userImage} src={userImage} />
+        </span>
+        <span style={{ height: "180px" }}>
+          <p className={styles.userName}>{userInfo.name}</p>
+          <p className={styles.userEmail}>{userInfo.email}</p>
+          <p className={styles.userIdentifier}>
+            {userInfo.id}
+            <span className={styles.dot}></span>
+            {userInfo.cid}
+          </p>
+          <p className={styles.userYear}>{userInfo.year + ','}</p>
+          <p className={styles.userDepartment}>{userInfo.dep}</p>
+          <p className={styles.userCourse}>{userInfo.course}</p>
+        </span>
+      </Container>
+    </>
+  );
+};
+
+export default PersonCard;
+
+const userInfo = {
+  name: "Branden Ritter",
+  email: "branden.ritter20@imperial.ac.uk",
+  id: "BR819",
+  cid: "01343896",
+  year: "First Year Undergraduate",
+  dep: "Department of Computing",
+  course: "MEng Computing (AI)"
+}

frontend/src/components/atoms/PersonCard/style.module.scss

+@import "assets/scss/custom";
+
+.userImage {
+  border-radius: 8px;
+  margin-right: 20px;
+  height: 180px;
+  width: 180px;
+}
+
+.userName {
+  font-weight: 600;
+  font-size: 24px; 
+  color: $black;
+  margin-bottom: 0rem;
+  line-height: 32px;
+}
+
+.userEmail {
+  font-size: 16px;
+  color: $blue-500;
+  margin-bottom: 0rem;
+  line-height: 20px;
+}
+
+.userIdentifier {
+  font-weight: 500;
+  font-size: 18px;
+  margin-bottom: 14px;
+  margin-top: 14px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.userYear {
+  font-size: 17px;
+  color: $gray-700;
+  margin-bottom: 0rem;
+  line-height: 22px;
+}
+
+.userDepartment {
+  font-size: 17px;
+  color: $gray-600;
+  margin-bottom: 0rem;
+  line-height: 22px;
+}
+
+.userCourse {
+  font-size: 17px;
+  color: $gray-800;
+  margin-top: 10px;
+  margin-bottom: 0rem;
+  line-height: 22px;
+}
+
+.dot {
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+  margin-left: 8px;
+  background-color: $gray-500;
+}

frontend/src/components/molecules/DashboardButtonGroup/index.tsx

+import React, { useEffect } from "react";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import styles from "./style.module.scss";
+import { faGlobe, faFileAlt, faPrint, faFileInvoice, faDatabase, faBullhorn, faUserFriends, faBug } from "@fortawesome/free-solid-svg-icons";
+import Button from "react-bootstrap/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const DashboardButtonGroup: React.FC = () => {
+
+	// @ts-ignore
+	useEffect(() => {window.Holder.run()});
+
+  return (
+    <>
+      <Row style={{ marginTop: "45px" }}>
+        {buttons.map(({title, icon}, i) => (
+          <Col xs={6} sm={6} md={3} key={i}>
+            <Button className={styles.dashboardButton}>
+              {title}
+              <FontAwesomeIcon
+                style={{ fontSize: "1.125rem" }}
+                icon={icon}
+                className={styles.dashboardButtonSvg}
+              />
+            </Button>
+          </Col>
+        ))}
+      </Row>
+    </>
+  );
+};
+
+export default DashboardButtonGroup;
+
+const buttons = [
+  {
+    title: "Student Record",
+    icon: faFileInvoice,
+  },
+  {
+    title: "Personal Website",
+    icon: faGlobe,
+  },
+  {
+    title: "TeachDB",
+    icon: faDatabase,
+  },
+  {
+    title: "Notice Board",
+    icon: faBullhorn,
+  },
+  {
+    title: "Documents",
+    icon: faFileAlt,
+  },
+  {
+    title: "Printing",
+    icon: faPrint,
+  },
+  {
+    title: "DoCSoc",
+    icon: faUserFriends,
+  },
+  {
+    title: "Report Bugs",
+    icon: faBug,
+  }
+]

frontend/src/components/molecules/DashboardButtonGroup/style.module.scss

+@import "assets/scss/custom";
+
+.dashboardButton,
+.dashboardButton:global(.a) {
+  margin-bottom: 0.625rem;
+  color: #000;
+  background: #f6f8fa;
+  font-size: 1.05rem;
+  letter-spacing: 0;
+  border-width: 0rem;
+  line-height: 1.375rem;
+  height: 2.25rem;
+  border-radius: 0.5rem !important;
+  text-align: left;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dashboardButton:global(.active),
+.dashboardButton:active {
+  color: #fff;
+  background: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.dashboardButton:hover {
+  background: #e5e5e5;
+  border-color: #fff;
+  color: #000;
+}

frontend/src/components/organisms/TopBar/index.tsx

@@ -11,11 +11,15 @@ export interface TopBarProps {
     name: string;
     path: string;
   }[];
-	onFavIconClick: (event: React.MouseEvent<HTMLElement>) => void;
+  onFavIconClick: (event: React.MouseEvent<HTMLElement>) => void;
   onUserIconClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-const TopBar: React.FC<TopBarProps> = ({ pages, onFavIconClick, onUserIconClick }: TopBarProps) => {
+const TopBar: React.FC<TopBarProps> = ({
+  pages,
+  onFavIconClick,
+  onUserIconClick
+}: TopBarProps) => {
   return (
     <Navbar className={styles.navBar} sticky="top" expand="lg" variant="light">
       <Container fluid>
@@ -25,11 +29,12 @@ const TopBar: React.FC<TopBarProps> = ({ pages, onFavIconClick, onUserIconClick
 
         <img
           src={userPic}
-          width="30"
-          height="30"
+          width="36"
+          height="36"
           className="d-inline-block align-top"
-					alt="userPic"
-					onClick={onUserIconClick}
+          alt="userPic"
+          onClick={onUserIconClick}
+          style={{ borderRadius: "50%" }}
         />
       </Container>
     </Navbar>

frontend/src/components/pages/Dashboard/index.tsx

@@ -8,6 +8,8 @@ import styles from "./style.module.scss";
 import { faFile } from "@fortawesome/free-solid-svg-icons";
 import Button from "react-bootstrap/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import PersonCard from "components/atoms/PersonCard";
+import DashboardButtonGroup from "components/molecules/DashboardButtonGroup";
 
 const ModuleOverview: React.FC = () => {
 
@@ -17,43 +19,8 @@ const ModuleOverview: React.FC = () => {
   return (
     <>
       <MyBreadcrumbs />
-
-      {/* User Card */}
-
-      <Container style={{ display: "flex", padding: 0 }}>
-        <span>
-          <Image className={styles.dashboardImage} src="holder.js/180x180" />
-        </span>
-        <span style={{ height: "180px" }}>
-          <p className={styles.userName}>Sudarshan Sreeram</p>
-          <p className={styles.userEmail}>sudarshan.sreeram19@imperial.ac.uk</p>
-          <p className={styles.userIdentifier}>
-            SS8119
-            <span className={styles.dot}></span>
-            CID 01721552
-          </p>
-          <p className={styles.userYear}>First Year Undergraduate,</p>
-          <p className={styles.userDepartment}>Department of Computing</p>
-          <p className={styles.userCourse}>MEng Computing (IP)</p>
-        </span>
-      </Container>
-
-      {/* User Buttons */}
-
-      <Row style={{ marginTop: "30px" }}>
-        {[...Array(8)].map((e, i) => (
-          <Col xs={6} sm={6} md={3} key={i}>
-            <Button className={styles.dashboardButton}>
-              Button {i}
-              <FontAwesomeIcon
-                style={{ fontSize: "1.125rem" }}
-                icon={faFile}
-                className={styles.dashboardButtonSvg}
-              />
-            </Button>
-          </Col>
-        ))}
-      </Row>
+      <PersonCard />
+      <DashboardButtonGroup />
 
       {/* Tutors and Notice Board */}