From c7320d8fc5428a5ebb110568340c707bdb1678db Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Tue, 25 Aug 2020 17:25:29 +0530
Subject: [PATCH] Update 'px' values to 'rem' in the molecules folder
---
.../molecules/CalendarGroup/index.tsx | 17 +++--
.../molecules/CategoryHeader/index.tsx | 12 ++--
.../CategoryHeader/style.module.scss | 4 +-
.../molecules/CurrentDirectoryRow/index.tsx | 16 +++--
src/components/molecules/FoldersRow/index.tsx | 68 +++++++++++--------
.../molecules/PageButtonGroup/index.tsx | 9 +--
.../molecules/QuickAccessRow/index.tsx | 12 ++--
.../QuickAccessRow/style.module.scss | 25 ++++---
src/components/molecules/SearchBox/index.tsx | 4 +-
.../molecules/SearchBox/style.module.scss | 18 +++--
.../components/SectionHeader/index.tsx | 22 +++---
.../SectionHeader/style.module.scss | 2 +-
.../molecules/SelectionView/index.tsx | 30 ++++----
.../molecules/SideBarCardGroup/index.tsx | 2 +-
.../SideBarCardGroup/style.module.scss | 1 -
.../molecules/SideBarTabGroup/index.tsx | 22 +++---
.../SideBarTabGroup/style.module.scss | 1 -
.../molecules/TutorCardGroup/index.tsx | 16 +++--
.../TutorCardGroup/style.module.scss | 12 ++--
.../molecules/WorkDueGroup/index.tsx | 9 ++-
20 files changed, 160 insertions(+), 142 deletions(-)
diff --git a/src/components/molecules/CalendarGroup/index.tsx b/src/components/molecules/CalendarGroup/index.tsx
index 3d5ac9a37..03753e0dd 100644
--- a/src/components/molecules/CalendarGroup/index.tsx
+++ b/src/components/molecules/CalendarGroup/index.tsx
@@ -19,7 +19,12 @@ const CalendarGroup: React.FC = () => {
colorType = eventTypes.GreenCard;
break;
}
- return { title : `${type}: ${title}`, subtitle, content, type: colorType };
+ return {
+ title: `${type}: ${title}`,
+ subtitle,
+ content,
+ type: colorType
+ };
})}
/>
);
@@ -32,24 +37,24 @@ let events = [
type: "Lecture",
title: "CO142",
subtitle: "09:00 - 11:00",
- content: "308, Huxley Building, South Kensington Campus",
+ content: "308, Huxley Building, South Kensington Campus"
},
{
type: "Lecture",
title: "CO145",
subtitle: "13:00 - 14:00",
- content: "311, Huxley Building, South Kensington Campus",
+ content: "311, Huxley Building, South Kensington Campus"
},
{
type: "Labs",
title: "CO161",
subtitle: "15:00 - 17:00",
- content: "219, Huxley Building, South Kensington Campus",
+ content: "219, Huxley Building, South Kensington Campus"
},
{
type: "Deadline",
title: "CO120.1",
subtitle: "19:00",
- content: "Haskell L Systems",
- },
+ content: "Haskell L Systems"
+ }
];
diff --git a/src/components/molecules/CategoryHeader/index.tsx b/src/components/molecules/CategoryHeader/index.tsx
index 8aa7ac14d..369182080 100644
--- a/src/components/molecules/CategoryHeader/index.tsx
+++ b/src/components/molecules/CategoryHeader/index.tsx
@@ -21,15 +21,13 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
return (
<>
<div className={styles.sectionHeaderContainer}>
- <span className={styles.sectionHeader}>
- {heading}
- </span>
+ <span className={styles.sectionHeader}>{heading}</span>
<div className={styles.sectionHeaderButtonGroup}>
<Button
style={{ color: checkBoxColor }}
className={styles.sectionHeaderButton}
- onClick={onSelectAllClick}
- variant="secondary"
+ onClick={onSelectAllClick}
+ variant="secondary"
>
<FontAwesomeIcon
className={styles.buttonIcon}
@@ -39,7 +37,7 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
</div>
</div>
</>
- )
+ );
};
-export default CategoryHeader;
\ No newline at end of file
+export default CategoryHeader;
diff --git a/src/components/molecules/CategoryHeader/style.module.scss b/src/components/molecules/CategoryHeader/style.module.scss
index b92b43200..87528c101 100644
--- a/src/components/molecules/CategoryHeader/style.module.scss
+++ b/src/components/molecules/CategoryHeader/style.module.scss
@@ -2,8 +2,8 @@
@import "assets/scss/global";
.sectionHeader {
- font-size: 1.25rem;
- text-transform: capitalize;
+ font-size: 1.25rem;
+ text-transform: capitalize;
}
.sectionHeaderContainer {
diff --git a/src/components/molecules/CurrentDirectoryRow/index.tsx b/src/components/molecules/CurrentDirectoryRow/index.tsx
index a606063ad..59cf0f88b 100644
--- a/src/components/molecules/CurrentDirectoryRow/index.tsx
+++ b/src/components/molecules/CurrentDirectoryRow/index.tsx
@@ -5,14 +5,18 @@ import Col from "react-bootstrap/esm/Col";
import FileCard from "components/atoms/FileCard";
import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
import { SelectionProps } from "components/molecules/SelectionView";
-import { resourceTypeToIcon } from "../../pages/ModuleResources"
+import { resourceTypeToIcon } from "../../pages/ModuleResources";
const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
- select,
+ select
}) => {
return (
<Row
- style={{ marginTop: "10px", marginLeft: "-10px", marginRight: "-10px" }}
+ style={{
+ marginTop: "0.625rem",
+ marginLeft: "-0.625rem",
+ marginRight: "-0.625rem"
+ }}
>
{select.selectionItems.map(({ title, type, tags, id }) => {
if (type === undefined || tags === undefined) return null;
@@ -28,8 +32,8 @@ const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
style={{
marginBottom: ".5rem",
marginTop: ".5rem",
- paddingLeft: "10px",
- paddingRight: "10px",
+ paddingLeft: "0.625rem",
+ paddingRight: "0.625rem"
}}
>
<FileCard
@@ -44,7 +48,7 @@ const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
: resourceTypeToIcon(type)
}
onClick={() => select.handleCardClick(id)}
- onIconClick={(e) => {
+ onIconClick={e => {
e.stopPropagation();
select.handleIconClick(id);
}}
diff --git a/src/components/molecules/FoldersRow/index.tsx b/src/components/molecules/FoldersRow/index.tsx
index 4ad41a9b4..75e62efaa 100644
--- a/src/components/molecules/FoldersRow/index.tsx
+++ b/src/components/molecules/FoldersRow/index.tsx
@@ -6,34 +6,44 @@ import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
import { faFolder } from "@fortawesome/free-solid-svg-icons";
import { SelectionProps } from "../SelectionView";
-const FoldersRow: React.FC<{ select: SelectionProps }> = ({
- select,
-}) => {
- return (
- <Row style={{ marginTop: "10px", marginRight: "-10px", marginLeft: "-10px" }}>
- {select.selectionItems.map(({ title, id }) => (
- <Col xs={6} sm={6} md={3} key={id} style={{ paddingLeft: "10px", paddingRight: "10px" }}>
- <FolderCard
- title={title}
- icon={
- select.isAnySelected() || select.state.isHoveringOver[id]
- ? select.state.isSelected[id]
- ? faCheckSquare
- : faSquare
- : faFolder
- }
- onIconClick={(e) => {
- e.stopPropagation();
- select.handleIconClick(id);
- }}
- onClick={() => select.handleCardClick(id)}
- onMouseOver={() => select.handleMouseOver(id)}
- onMouseOut={() => select.handleMouseOut(id)}
- />
- </Col>
- ))}
- </Row>
- );
- }
+const FoldersRow: React.FC<{ select: SelectionProps }> = ({ select }) => {
+ return (
+ <Row
+ style={{
+ marginTop: "0.625rem",
+ marginRight: "-0.625rem",
+ marginLeft: "-0.625rem"
+ }}
+ >
+ {select.selectionItems.map(({ title, id }) => (
+ <Col
+ xs={6}
+ sm={6}
+ md={3}
+ key={id}
+ style={{ paddingLeft: "0.625rem", paddingRight: "0.625rem" }}
+ >
+ <FolderCard
+ title={title}
+ icon={
+ select.isAnySelected() || select.state.isHoveringOver[id]
+ ? select.state.isSelected[id]
+ ? faCheckSquare
+ : faSquare
+ : faFolder
+ }
+ onIconClick={e => {
+ e.stopPropagation();
+ select.handleIconClick(id);
+ }}
+ onClick={() => select.handleCardClick(id)}
+ onMouseOver={() => select.handleMouseOver(id)}
+ onMouseOut={() => select.handleMouseOut(id)}
+ />
+ </Col>
+ ))}
+ </Row>
+ );
+};
export default FoldersRow;
diff --git a/src/components/molecules/PageButtonGroup/index.tsx b/src/components/molecules/PageButtonGroup/index.tsx
index b0d666b3e..f56409135 100644
--- a/src/components/molecules/PageButtonGroup/index.tsx
+++ b/src/components/molecules/PageButtonGroup/index.tsx
@@ -10,12 +10,13 @@ export interface ButtonGroupProps {
title: string;
icon: IconDefinition;
url: string;
- }[];
- style?: React.CSSProperties;
+ }[];
+ style?: React.CSSProperties;
}
const PageButtonGroup: React.FC<ButtonGroupProps> = ({
- buttons,style,
+ buttons,
+ style
}: ButtonGroupProps) => {
return (
<>
@@ -28,7 +29,7 @@ const PageButtonGroup: React.FC<ButtonGroupProps> = ({
lg={4}
xl={3}
key={i}
- style={{ paddingRight: "10px", paddingLeft: "10px" }}
+ style={{ paddingRight: "0.625rem", paddingLeft: "0.625rem" }}
>
<Button href={url} target="_blank">
{title}
diff --git a/src/components/molecules/QuickAccessRow/index.tsx b/src/components/molecules/QuickAccessRow/index.tsx
index 34d1ab888..c12d06b48 100644
--- a/src/components/molecules/QuickAccessRow/index.tsx
+++ b/src/components/molecules/QuickAccessRow/index.tsx
@@ -7,11 +7,9 @@ import Col from "react-bootstrap/esm/Col";
import FileCard from "components/atoms/FileCard";
import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
import { SelectionProps } from "components/molecules/SelectionView";
-import { resourceTypeToIcon } from "../../pages/ModuleResources"
+import { resourceTypeToIcon } from "../../pages/ModuleResources";
-const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
- select,
-}) => {
+const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({ select }) => {
return (
<Row
className={classNames(
@@ -35,8 +33,8 @@ const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
style={{
marginBottom: ".5rem",
marginTop: ".5rem",
- paddingLeft: "10px",
- paddingRight: "10px",
+ paddingLeft: "0.625rem",
+ paddingRight: "0.625rem"
}}
>
<FileCard
@@ -51,7 +49,7 @@ const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
: resourceTypeToIcon(type)
}
onClick={() => select.handleCardClick(id)}
- onIconClick={(e) => {
+ onIconClick={e => {
e.stopPropagation();
select.handleIconClick(id);
}}
diff --git a/src/components/molecules/QuickAccessRow/style.module.scss b/src/components/molecules/QuickAccessRow/style.module.scss
index be0bbee19..d45af642f 100644
--- a/src/components/molecules/QuickAccessRow/style.module.scss
+++ b/src/components/molecules/QuickAccessRow/style.module.scss
@@ -2,33 +2,32 @@
.quickAccessRow {
scrollbar-width: thin;
- scrollbar-color: $white $white;
- margin-top: 10px;
- overflow-y: visible;
- overflow-x: auto;
- margin-right: -10px;
- margin-left: -10px;
- // margin-left: 0; // leave space before card
+ scrollbar-color: $white $white;
+ margin-top: 0.625rem;
+ overflow-y: visible;
+ overflow-x: auto;
+ margin-right: -0.625rem;
+ margin-left: -0.625rem;
}
.quickAccessRow::-webkit-scrollbar {
- width: 1rem;
+ width: 1rem;
height: 0.5rem;
}
.quickAccessRow::-webkit-scrollbar-track {
background: $white;
- margin-left: 10px;
- margin-right: 10px;
+ margin-left: 0.625rem;
+ margin-right: 0.625rem;
}
.quickAccessRow::-webkit-scrollbar-thumb {
background-color: $white;
- border-radius: .5rem;
+ border-radius: 0.5rem;
}
.quickAccessRow:hover {
- scrollbar-color: $gray-400 $white;
+ scrollbar-color: $gray-400 $white;
}
.quickAccessRow:hover::-webkit-scrollbar-thumb {
- background-color: $gray-400;
+ background-color: $gray-400;
}
diff --git a/src/components/molecules/SearchBox/index.tsx b/src/components/molecules/SearchBox/index.tsx
index 4ef16be2a..7fb167946 100644
--- a/src/components/molecules/SearchBox/index.tsx
+++ b/src/components/molecules/SearchBox/index.tsx
@@ -55,7 +55,9 @@ const SearchBox: React.FC<SearchBoxProps> = ({
>
File
</Dropdown.Item>
- <Dropdown.Header className={styles.dropdownHeader}>Tags: </Dropdown.Header>
+ <Dropdown.Header className={styles.dropdownHeader}>
+ Tags:{" "}
+ </Dropdown.Header>
<Dropdown.Item
className={styles.dropdownItem}
onClick={() => onSearchTextChange(`${searchText} tag(new) `)}
diff --git a/src/components/molecules/SearchBox/style.module.scss b/src/components/molecules/SearchBox/style.module.scss
index ea7493277..9797c89eb 100644
--- a/src/components/molecules/SearchBox/style.module.scss
+++ b/src/components/molecules/SearchBox/style.module.scss
@@ -33,9 +33,9 @@ $button-border: transparentize($gray-300, 1);
}
.searchBarIcon {
- border-radius: 0.5rem;
- border-top-right-radius: 0.5rem !important;
- border-bottom-right-radius: 0.5rem !important;
+ border-radius: 0.5rem;
+ border-top-right-radius: 0.5rem !important;
+ border-bottom-right-radius: 0.5rem !important;
background-color: $gray-100;
border-color: $gray-100;
color: $gray-500;
@@ -45,22 +45,21 @@ $button-border: transparentize($gray-300, 1);
margin-top: 0.875rem;
}
-
.searchBarIcon:global(.active),
.searchBarIcon:active,
-.searchBarIcon:hover,
-.searchBarIcon:focus{
+.searchBarIcon:hover,
+.searchBarIcon:focus {
background: $gray-200 !important;
color: $gray-700 !important;
- border-color: $gray-200 !important;
- box-shadow: none !important;
+ border-color: $gray-200 !important;
+ box-shadow: none !important;
}
.dropdownMenu {
border-radius: 0.5rem;
margin-top: 0.5rem;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
- border: 1px solid $gray-300;
+ border: 0.0625rem solid $gray-300;
padding: 0.75rem;
}
@@ -100,4 +99,3 @@ $button-border: transparentize($gray-300, 1);
font-weight: 500;
background: $black;
}
-
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/index.tsx b/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
index 7eccc3006..68b3ac9a6 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
+++ b/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
@@ -10,9 +10,9 @@ export interface SectionHeaderProps {
heading: string;
selectAllIcon: IconDefinition;
showDownload: Boolean;
- onDownloadClick: (event: React.MouseEvent) => void;
- onSelectAllClick: (event: React.MouseEvent) => void;
- checkBoxColur: string;
+ onDownloadClick: (event: React.MouseEvent) => void;
+ onSelectAllClick: (event: React.MouseEvent) => void;
+ checkBoxColur: string;
}
const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
@@ -20,15 +20,13 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
showDownload,
selectAllIcon,
onDownloadClick,
- onSelectAllClick,
- checkBoxColur,
+ onSelectAllClick,
+ checkBoxColur
}: SectionHeaderProps) => {
let show = showDownload.valueOf();
return (
<>
- <div
- className={styles.sectionHeaderContainer}
- >
+ <div className={styles.sectionHeaderContainer}>
<span className={styles.sectionHeader} onClick={onSelectAllClick}>
{heading}
</span>
@@ -36,8 +34,8 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
<Fade in={show} timeout={500}>
<span id="download-button">
<Button
- style={{ color: checkBoxColur }}
- variant="secondary"
+ style={{ color: checkBoxColur }}
+ variant="secondary"
className={styles.sectionHeaderButton}
onClick={onDownloadClick}
>
@@ -51,8 +49,8 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
<Button
style={{ color: checkBoxColur }}
className={styles.sectionHeaderButton}
- onClick={onSelectAllClick}
- variant="secondary"
+ onClick={onSelectAllClick}
+ variant="secondary"
aria-controls="download-button"
aria-expanded={show}
>
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
index feea72920..6422df1a9 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
+++ b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
@@ -10,7 +10,7 @@
opacity: 0;
transform: scale(0.9);
}
-
+
.alert-enter-active {
opacity: 1;
transform: translateX(0);
diff --git a/src/components/molecules/SelectionView/index.tsx b/src/components/molecules/SelectionView/index.tsx
index b920facb1..b94fb29fd 100644
--- a/src/components/molecules/SelectionView/index.tsx
+++ b/src/components/molecules/SelectionView/index.tsx
@@ -25,10 +25,10 @@ export interface SelectionProps {
export interface MyProps {
selectionItems: SelectionItem[];
- render: (selection: SelectionProps) => any;
- heading: string;
- onDownloadClick: (identifiers: number[]) => void;
- onItemClick: (identifier: number) => void;
+ render: (selection: SelectionProps) => any;
+ heading: string;
+ onDownloadClick: (identifiers: number[]) => void;
+ onItemClick: (identifier: number) => void;
}
interface MyState {
@@ -80,17 +80,17 @@ class SelectionView extends React.Component<MyProps, MyState> {
isSelected[id] = !isSelected[id];
isHoveringOver[id] = false;
this.setState({ isSelected, isHoveringOver });
- }
-
- handleDownloadClick(e: React.MouseEvent) {
- e.preventDefault();
- let indices : number[] = [];
+ }
+
+ handleDownloadClick(e: React.MouseEvent) {
+ e.preventDefault();
+ let indices: number[] = [];
for (let key in this.state.isSelected) {
if (this.state.isSelected[key]) {
indices.push(parseInt(key));
}
}
- this.props.onDownloadClick(indices);
+ this.props.onDownloadClick(indices);
}
handleSelectAllClick() {
@@ -107,8 +107,8 @@ class SelectionView extends React.Component<MyProps, MyState> {
if (this.isAnySelected()) {
this.handleIconClick(id);
return;
- }
- this.props.onItemClick(id);
+ }
+ this.props.onItemClick(id);
}
handleMouseOver(id: number) {
@@ -127,19 +127,19 @@ class SelectionView extends React.Component<MyProps, MyState> {
let selection: SelectionProps = {
selectionItems: this.props.selectionItems,
state: this.state,
- setIsSelected: (selection) => this.setState({ isSelected: selection }),
+ setIsSelected: selection => this.setState({ isSelected: selection }),
isAnySelected: () => this.isAnySelected(),
handleCardClick: (id: number) => this.handleCardClick(id),
handleIconClick: (id: number) => this.handleIconClick(id),
handleMouseOver: (id: number) => this.handleMouseOver(id),
- handleMouseOut: (id: number) => this.handleMouseOut(id),
+ handleMouseOut: (id: number) => this.handleMouseOut(id)
};
return (
<>
<ResourceSectionHeader
heading={this.props.heading}
- onDownloadClick={(e) => this.handleDownloadClick(e)}
+ onDownloadClick={e => this.handleDownloadClick(e)}
showDownload={this.isAnySelected()}
onSelectAllClick={() => this.handleSelectAllClick()}
selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
diff --git a/src/components/molecules/SideBarCardGroup/index.tsx b/src/components/molecules/SideBarCardGroup/index.tsx
index 08b826444..f8bc8d610 100644
--- a/src/components/molecules/SideBarCardGroup/index.tsx
+++ b/src/components/molecules/SideBarCardGroup/index.tsx
@@ -10,7 +10,7 @@ export interface SideBarCardGroupProps {
const SideBarCardGroup: React.FC<SideBarCardGroupProps> = ({
events,
- title,
+ title
}: SideBarCardGroupProps) => {
return (
<>
diff --git a/src/components/molecules/SideBarCardGroup/style.module.scss b/src/components/molecules/SideBarCardGroup/style.module.scss
index 34485a5dd..796c4d5ee 100644
--- a/src/components/molecules/SideBarCardGroup/style.module.scss
+++ b/src/components/molecules/SideBarCardGroup/style.module.scss
@@ -1,6 +1,5 @@
@import "assets/scss/custom";
-
@media (max-width: 62rem) {
.sideBarCardGroup {
margin-top: 1.25rem;
diff --git a/src/components/molecules/SideBarTabGroup/index.tsx b/src/components/molecules/SideBarTabGroup/index.tsx
index ea5defb32..472f1e015 100644
--- a/src/components/molecules/SideBarTabGroup/index.tsx
+++ b/src/components/molecules/SideBarTabGroup/index.tsx
@@ -13,21 +13,25 @@ export interface SideBarTabGroupProp {
icon?: IconDefinition;
active?: boolean;
activeURL?: string;
- externalURL?: string;
- onClick? : (event: React.MouseEvent) => void;
+ externalURL?: string;
+ onClick?: (event: React.MouseEvent) => void;
}[];
}
const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
title,
- buttons,
+ buttons
}: SideBarTabGroupProp) => {
let displayButtons = buttons.map(
({ title, icon, active, activeURL, externalURL, onClick }) => {
let FAicon;
if (icon) {
FAicon = (
- <FontAwesomeIcon fixedWidth className={styles.tabGroupButtonSvg} icon={icon} />
+ <FontAwesomeIcon
+ fixedWidth
+ className={styles.tabGroupButtonSvg}
+ icon={icon}
+ />
);
}
if (activeURL !== undefined) {
@@ -46,11 +50,7 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
if (externalURL !== undefined) {
return (
- <Button
- href={externalURL}
- target="_blank"
- key={title}
- >
+ <Button href={externalURL} target="_blank" key={title}>
{title}
{FAicon}
</Button>
@@ -59,8 +59,8 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
return (
<Button
- className={classNames({ active: active })}
- onClick={onClick}
+ className={classNames({ active: active })}
+ onClick={onClick}
key={title}
>
{title}
diff --git a/src/components/molecules/SideBarTabGroup/style.module.scss b/src/components/molecules/SideBarTabGroup/style.module.scss
index a6c24ad0b..fb262c690 100644
--- a/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/src/components/molecules/SideBarTabGroup/style.module.scss
@@ -8,7 +8,6 @@ $button-border: transparentize($gray-300, 1);
margin-top: 0.22rem;
}
-
@media (max-width: 62rem) {
.tabGroupButtonGroup {
margin-top: 1.25rem;
diff --git a/src/components/molecules/TutorCardGroup/index.tsx b/src/components/molecules/TutorCardGroup/index.tsx
index 311a26ea8..49655de47 100644
--- a/src/components/molecules/TutorCardGroup/index.tsx
+++ b/src/components/molecules/TutorCardGroup/index.tsx
@@ -8,7 +8,13 @@ import tutorImage3 from "assets/images/tutor-3.png";
const TutorCardGroup: React.FC = () => {
let tutorCards = tutors.map(({ name, email, address, image }) => {
return (
- <TutorCard key={email} name={name} email={email} address={address} image={image} />
+ <TutorCard
+ key={email}
+ name={name}
+ email={email}
+ address={address}
+ image={image}
+ />
);
});
@@ -32,18 +38,18 @@ const tutors: {
name: "Dr. Zahid Barr",
email: "zahid.barr@imperial.ac.uk",
address: "373, Huxley Building",
- image: tutorImage1,
+ image: tutorImage1
},
{
name: "Dr. Rosalind Baker",
email: "rosalind.baker@imperial.ac.uk",
address: "590, Huxley Building",
- image: tutorImage2,
+ image: tutorImage2
},
{
name: "Mr. Subhaan Wicks",
email: "subhaan.wicks16@imperial.ac.uk",
address: "Huxley Building",
- image: tutorImage3,
- },
+ image: tutorImage3
+ }
];
diff --git a/src/components/molecules/TutorCardGroup/style.module.scss b/src/components/molecules/TutorCardGroup/style.module.scss
index aa197ea52..69a94a7ee 100644
--- a/src/components/molecules/TutorCardGroup/style.module.scss
+++ b/src/components/molecules/TutorCardGroup/style.module.scss
@@ -2,13 +2,15 @@
.tutorImage {
border-radius: 50%;
- margin-right: 20px;
+ margin-right: 1.25rem;
}
-.tutorName, .tutorEmail, .tutorAddress {
- font-size: 18px;
- margin-bottom: 0px;
- line-height: 24px !important;
+.tutorName,
+.tutorEmail,
+.tutorAddress {
+ font-size: 1.125rem;
+ margin-bottom: 0rem;
+ line-height: 1.5rem !important;
}
.tutorName {
diff --git a/src/components/molecules/WorkDueGroup/index.tsx b/src/components/molecules/WorkDueGroup/index.tsx
index 4d2063249..a8b59d784 100644
--- a/src/components/molecules/WorkDueGroup/index.tsx
+++ b/src/components/molecules/WorkDueGroup/index.tsx
@@ -7,7 +7,7 @@ export interface WorkDueGroupProps {
}
const WorkDueGroup: React.FC<WorkDueGroupProps> = ({
- filter,
+ filter
}: WorkDueGroupProps) => {
return (
<SideBarCardGroup
@@ -27,16 +27,15 @@ const WorkDueGroup: React.FC<WorkDueGroupProps> = ({
return {
title: filter === undefined ? module : task,
- subtitle: filter === undefined ? task : undefined,
- content,
- type: colorType,
+ subtitle: filter === undefined ? task : undefined,
+ content,
+ type: colorType
};
})}
/>
);
};
-
export default WorkDueGroup;
let events = [
--
GitLab