diff --git a/frontend/src/assets/images/user.png b/frontend/src/assets/images/user.png
index fc76d95c9e673bb21d89d9bfa6f3dce02803aec5..eaf5e0f3e8e5240f5972afb6cf44b09779d215c5 100644
Binary files a/frontend/src/assets/images/user.png and b/frontend/src/assets/images/user.png differ
diff --git a/frontend/src/components/atoms/PersonCard/index.tsx b/frontend/src/components/atoms/PersonCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b38f8b9effa9808cee6b5b593ab7a05942fb8f1
--- /dev/null
+++ b/frontend/src/components/atoms/PersonCard/index.tsx
@@ -0,0 +1,47 @@
+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)"
+}
diff --git a/frontend/src/components/atoms/PersonCard/style.module.scss b/frontend/src/components/atoms/PersonCard/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b818cc32143b639627f1b54b239faa3a890e0a59
--- /dev/null
+++ b/frontend/src/components/atoms/PersonCard/style.module.scss
@@ -0,0 +1,65 @@
+@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;
+}
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..29dee3743682eb35c818d9b8f30f8fbd87918090
--- /dev/null
+++ b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
@@ -0,0 +1,69 @@
+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,
+ }
+]
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss b/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a75e43d49ee378a78c90ae8ab7524bed66c24895
--- /dev/null
+++ b/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
@@ -0,0 +1,39 @@
+@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;
+}
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index c8d692afcd611a32b4537b6ac3750eea63a674c0..5db7c1edd9378e27297d8e8d0e76887199f118a3 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/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>
diff --git a/frontend/src/components/pages/Dashboard/index.tsx b/frontend/src/components/pages/Dashboard/index.tsx
index 2c11aaa35f543be5e6f6d708da10220db123844e..195755b052d3d629a52a53bd3741dcc4ff0805f9 100644
--- a/frontend/src/components/pages/Dashboard/index.tsx
+++ b/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 */}