diff --git a/src/components/atoms/FileCard/index.tsx b/src/components/atoms/FileCard/index.tsx
index cac2f083e22fc553f16b3ad0e3a02f6639cf292b..202fd177609e8ac79d12bccc5eb077c3522a1537 100644
--- a/src/components/atoms/FileCard/index.tsx
+++ b/src/components/atoms/FileCard/index.tsx
@@ -31,20 +31,20 @@ const FileCard: React.FC<FileCardProps> = ({
onIconClick,
onClick,
onMouseOver,
- onMouseOut,
+ onMouseOut
}: FileCardProps) => {
- let banner: string;
- switch (type) {
- case "pdf":
- banner = applicationPDF;
- break;
- case "video":
- banner = applicationVideo;
- break;
- default:
- banner = applicationDocument;
- break;
- }
+ let banner: string;
+ switch (type) {
+ case "pdf":
+ banner = applicationPDF;
+ break;
+ case "video":
+ banner = applicationVideo;
+ break;
+ default:
+ banner = applicationDocument;
+ break;
+ }
return (
<Card
className={styles.fileCard}
@@ -56,13 +56,17 @@ const FileCard: React.FC<FileCardProps> = ({
<Card.Body>
<Card.Title style={{ wordWrap: "break-word" }}>{title}</Card.Title>
<FontAwesomeIcon
- style={{ marginLeft: "8px", fontSize: "1.125rem", cursor: "default"}}
+ style={{
+ marginLeft: "0.5rem",
+ fontSize: "1.125rem",
+ cursor: "default"
+ }}
icon={icon}
onClick={onIconClick}
/>
</Card.Body>
<Card.Footer>
- {tags.map((tag) => (
+ {tags.map(tag => (
<Badge
pill
key={tag}
diff --git a/src/components/atoms/FileCard/style.module.scss b/src/components/atoms/FileCard/style.module.scss
index 07cad1752486351d4eed61c422e50e501cff9a49..d46c9609437a083f071fcea67efb193c6d6b2b55 100644
--- a/src/components/atoms/FileCard/style.module.scss
+++ b/src/components/atoms/FileCard/style.module.scss
@@ -4,10 +4,10 @@
.fileCard {
border-radius: 0.5rem;
transition: transform 0.2s, box-shadow 0.2s;
- background-color: $white ;
- height: 96%;
- cursor: pointer;
- border: 1px solid $gray-200;
+ background-color: $white;
+ height: 96%;
+ cursor: pointer;
+ border: 0.0625rem solid $gray-200;
}
.fileCard:hover {
@@ -33,17 +33,17 @@
font-size: 1.125rem;
font-weight: 400;
white-space: normal;
- margin-bottom: 0px;
+ margin-bottom: 0rem;
width: 90%;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-all;
- word-break: break-word;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.fileCard :global(.card-img-top) {
- border-bottom: 0px;
+ border-bottom: 0rem;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
}
@@ -51,6 +51,5 @@
.fileRow {
scrollbar-width: thin;
scrollbar-color: $white $white;
- margin-top: 10px;
- // margin-left: 0; // leave space before card
+ margin-top: 0.625rem;
}
diff --git a/src/components/atoms/FolderCard/index.tsx b/src/components/atoms/FolderCard/index.tsx
index d1d9d6a5bfdf43379bc71c450b6d1cd4c1501409..56cfddaa9b4de1d7a13f10aedb79e9ced46d4fac 100644
--- a/src/components/atoms/FolderCard/index.tsx
+++ b/src/components/atoms/FolderCard/index.tsx
@@ -19,14 +19,14 @@ const FolderCard: React.FC<FolderCardProps> = ({
onIconClick,
onClick,
onMouseOver,
- onMouseOut,
+ onMouseOut
}: FolderCardProps) => {
return (
<Card
className={styles.folderCard}
onClick={onClick}
onMouseOver={onMouseOver}
- onMouseOut={onMouseOut}
+ onMouseOut={onMouseOut}
>
<Card.Body style={{ padding: ".6rem" }}>
<Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
diff --git a/src/components/atoms/FolderCard/style.module.scss b/src/components/atoms/FolderCard/style.module.scss
index 64cd1abf615e002b92500e53209b32ba4e7afc1b..abe86908fdfb729f039d9d17ac95d0677a327cc8 100644
--- a/src/components/atoms/FolderCard/style.module.scss
+++ b/src/components/atoms/FolderCard/style.module.scss
@@ -2,11 +2,11 @@
.folderCard {
border-radius: 0.5rem;
- border: 1px solid $gray-200;
+ border: 0.0625rem solid $gray-200;
transition: transform 0.2s, box-shadow 0.2s;
background-color: $white;
- margin-top: 0.67rem;
- cursor: pointer;
+ margin-top: 0.67rem;
+ cursor: pointer;
}
.folderCard:hover {
@@ -18,5 +18,5 @@
.folderCard :global(.card-body) {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: center;
}
diff --git a/src/components/atoms/ModuleCard/index.tsx b/src/components/atoms/ModuleCard/index.tsx
index 0cbb330d03ad43199a15ed69bbdac3f9a570bc2d..07f7aeebc73717edfdbea858644f65a5db8fb289 100644
--- a/src/components/atoms/ModuleCard/index.tsx
+++ b/src/components/atoms/ModuleCard/index.tsx
@@ -35,14 +35,27 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
let textColor: string = "";
switch (module.progressStatus) {
case ProgressStatus.NOT_STARTED:
- textColor = "#ACB5BD"; break;
+ textColor = "#ACB5BD";
+ break;
case ProgressStatus.IN_PROGRESS:
- textColor = "#29A745"; break;
+ textColor = "#29A745";
+ break;
case ProgressStatus.COMPLETED:
textColor = "#000";
}
return (
- <Col xs={12} sm={12} md={6} lg={4} xl={3} style={{ marginTop: "1.875rem", paddingLeft: "10px", paddingRight: "10px"}}>
+ <Col
+ xs={12}
+ sm={12}
+ md={6}
+ lg={4}
+ xl={3}
+ style={{
+ marginTop: "1.875rem",
+ paddingLeft: "0.625rem",
+ paddingRight: "0.625rem"
+ }}
+ >
<Card
className={classNames(styles.moduleCard)}
as={Link}
diff --git a/src/components/atoms/ModuleCard/style.module.scss b/src/components/atoms/ModuleCard/style.module.scss
index 478ee7adca8d43314ba19ed191e989c819cec4b2..0b318afc8b19c4050e787d65718959bfe9dcdb27 100644
--- a/src/components/atoms/ModuleCard/style.module.scss
+++ b/src/components/atoms/ModuleCard/style.module.scss
@@ -6,7 +6,7 @@
border-width: 0rem;
border-radius: 0.5rem !important;
transition: transform 0.2s, box-shadow 0.2s;
- border: 1px solid $gray-200;
+ border: 0.0625rem solid $gray-200;
}
.moduleCard:hover {
@@ -17,8 +17,8 @@
}
.termIcons > * {
- margin-right: .5rem;
- height: 1.125rem;
+ margin-right: 0.5rem;
+ height: 1.125rem;
}
.moduleCard :global(.card-header) {
diff --git a/src/components/atoms/MyBreadcrumbs/index.tsx b/src/components/atoms/MyBreadcrumbs/index.tsx
index ec4937fbdca6678c96e4ca476b9172db77f6ab09..664f8a3bb31d5649909faf37748fbd9c7676a8b4 100644
--- a/src/components/atoms/MyBreadcrumbs/index.tsx
+++ b/src/components/atoms/MyBreadcrumbs/index.tsx
@@ -11,7 +11,7 @@ const MyBreadcrumbs = withBreadcrumbs()(
{breadcrumbs.map(
({ match, breadcrumb }: { match: any; breadcrumb: any }) => (
<Breadcrumb.Item
- key={match.url}
+ key={match.url}
className={styles.breadcrumbItem}
linkAs={Link}
linkProps={{ to: match.url }}
diff --git a/src/components/atoms/PersonCard/index.tsx b/src/components/atoms/PersonCard/index.tsx
index 25cfdd95baa728a65bce6529a56cf7ad6998db70..b4e989be97429e0ace64f122af8b578c23c392b4 100644
--- a/src/components/atoms/PersonCard/index.tsx
+++ b/src/components/atoms/PersonCard/index.tsx
@@ -5,9 +5,10 @@ import styles from "./style.module.scss";
import userImage from "assets/images/user.png";
const PersonCard: React.FC = () => {
-
- // @ts-ignore
- useEffect(() => {window.Holder.run()});
+ // @ts-ignore
+ useEffect(() => {
+ window.Holder.run();
+ });
return (
<>
@@ -21,7 +22,7 @@ const PersonCard: React.FC = () => {
<span className={styles.dot}></span>
{userInfo.cid}
</p>
- <p className={styles.userYear}>{userInfo.year + ','}</p>
+ <p className={styles.userYear}>{userInfo.year + ","}</p>
<p className={styles.userDepartment}>{userInfo.dep}</p>
<p className={styles.userCourse}>{userInfo.course}</p>
</div>
@@ -40,4 +41,4 @@ const userInfo = {
year: "First Year Undergraduate",
dep: "Department of Computing",
course: "MEng Computing (AI)"
-}
+};
diff --git a/src/components/atoms/PersonCard/style.module.scss b/src/components/atoms/PersonCard/style.module.scss
index ff63d91262a903223b16ab83c611204a4439bd69..8e51acb83ec357651ac7c0504bfd87ba3de70a1c 100644
--- a/src/components/atoms/PersonCard/style.module.scss
+++ b/src/components/atoms/PersonCard/style.module.scss
@@ -1,67 +1,67 @@
@import "assets/scss/custom";
.userImage {
- border-radius: 8px;
- margin-right: 20px;
- height: 180px;
- width: 180px;
+ border-radius: 0.5rem;
+ margin-right: 1.25rem;
+ height: 11.25rem;
+ width: 11.25rem;
}
.userName {
font-weight: 600;
- font-size: 24px;
+ font-size: 1.5rem;
color: $black;
margin-bottom: 0rem;
- line-height: 32px;
+ line-height: 2rem;
}
.userEmail {
- font-size: 16px;
+ font-size: 1rem;
color: $blue-500;
margin-bottom: 0rem;
- line-height: 20px;
+ line-height: 1.25rem;
}
.userIdentifier {
font-weight: 500;
- font-size: 18px;
- margin-bottom: 14px;
- margin-top: 14px;
- line-height: 24px;
+ font-size: 1.125rem;
+ margin-bottom: 0.875rem;
+ margin-top: 0.875rem;
+ line-height: 1.5rem;
display: flex;
flex-direction: row;
align-items: center;
}
.userYear {
- font-size: 17px;
+ font-size: 1.063rem;
color: $gray-700;
margin-bottom: 0rem;
- line-height: 22px;
+ line-height: 1.375rem;
}
.userDepartment {
- font-size: 17px;
+ font-size: 1.063rem;
color: $gray-600;
margin-bottom: 0rem;
- line-height: 22px;
+ line-height: 1.375rem;
}
.userCourse {
- font-size: 17px;
+ font-size: 1.063rem;
color: $gray-800;
- margin-top: 10px;
+ margin-top: 0.625rem;
margin-bottom: 0rem;
- line-height: 22px;
+ line-height: 1.375rem;
}
.dot {
- height: 6px;
- width: 6px;
+ height: 0.375rem;
+ width: 0.375rem;
border-radius: 50%;
display: inline-block;
- margin-right: 8px;
- margin-left: 8px;
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
vertical-align: middle;
text-align: center;
background-color: $gray-500;
@@ -74,11 +74,11 @@
justify-content: center;
flex-direction: column;
align-items: middle;
- margin-top: 30px;
+ margin-top: 1.875rem;
}
.userInfoBlock {
- margin-top: 20px;
+ margin-top: 1.25rem;
margin-right: auto;
margin-left: auto;
}
@@ -101,10 +101,10 @@
.userCardContainer {
display: flex;
padding: 0;
- margin-top: 30px;
+ margin-top: 1.875rem;
}
.userInfoBlock {
- height: 180px;
+ height: 11.25rem;
}
}
diff --git a/src/components/atoms/SideBarCard/index.tsx b/src/components/atoms/SideBarCard/index.tsx
index 8e16d550f287a0bfb2fc534a5315d729adcafd7b..e8b3abfa5252aca38e1d1a7dfde4807fc90356dd 100644
--- a/src/components/atoms/SideBarCard/index.tsx
+++ b/src/components/atoms/SideBarCard/index.tsx
@@ -13,14 +13,14 @@ export interface SideBarCardProps {
export enum eventTypes {
BlueCard,
RedCard,
- GreenCard,
+ GreenCard
}
const SideBarCard: React.FC<SideBarCardProps> = ({
type,
title,
subtitle,
- content,
+ content
}: SideBarCardProps) => {
return (
<Card
diff --git a/src/components/atoms/SideBarCard/style.module.scss b/src/components/atoms/SideBarCard/style.module.scss
index 6e45d135638e32533dad3097f7c20a7170ca029f..f0e04027235bfd5c6b30825f9e18c5a08ae5dff7 100644
--- a/src/components/atoms/SideBarCard/style.module.scss
+++ b/src/components/atoms/SideBarCard/style.module.scss
@@ -12,7 +12,7 @@ $deadline-background: transparentize($teal-100, 0.5);
width: 100%;
border-radius: 0.5rem !important;
text-align: left;
- transition: transform .2s;
+ transition: transform 0.2s;
}
.sideBarCard:hover {
@@ -24,7 +24,7 @@ $deadline-background: transparentize($teal-100, 0.5);
}
.sideBarRedCard {
- background: $labs-background;
+ background: $labs-background;
}
.sideBarBlueCard * {
diff --git a/src/components/atoms/TutorCard/index.tsx b/src/components/atoms/TutorCard/index.tsx
index 4e6f04cdb64ad3afb80cb721f6e4f73c03733051..8a8903cf72079520ace5071340380908cb95ac27 100644
--- a/src/components/atoms/TutorCard/index.tsx
+++ b/src/components/atoms/TutorCard/index.tsx
@@ -11,19 +11,18 @@ export interface TutorCardProp {
}
const TutorCard: React.FC<TutorCardProp> = ({
- name,
+ name,
email,
- address,
- image,
+ address,
+ image
}: TutorCardProp) => {
-
return (
<>
<Container
style={{
display: "flex",
padding: 0,
- marginTop: "20px",
+ marginTop: "1.25rem",
alignItems: "center",
width: "100%"
}}
diff --git a/src/components/atoms/TutorCard/style.module.scss b/src/components/atoms/TutorCard/style.module.scss
index eb2b9a92f4312875d01888d532a4c343c55e1cee..cb1e8f267d95d7d83652d19bcdf1cb9033b15ced 100644
--- a/src/components/atoms/TutorCard/style.module.scss
+++ b/src/components/atoms/TutorCard/style.module.scss
@@ -2,20 +2,22 @@
.tutorImage {
border-radius: 50%;
- margin-right: 20px;
- height: 60px;
- width: 60px;
+ margin-right: 1.25rem;
+ height: 3.75rem;
+ width: 3.75rem;
}
-.tutorName, .tutorEmail, .tutorAddress {
- font-size: 18px;
- margin-bottom: 0px;
- line-height: 24px !important;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-all;
- word-break: break-word;
+.tutorName,
+.tutorEmail,
+.tutorAddress {
+ font-size: 1.125rem;
+ margin-bottom: 0rem;
+ line-height: 1.5rem !important;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.tutorName {