From 7b967e4621a129d4b5f32bd7eff968754fb0fc6a Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Thu, 3 Sep 2020 15:07:00 +0530
Subject: [PATCH] Configure interface colours for dark mode support
Note: This is a working commit; some parts of the interface (exams and
feedback for example) don't support dark mode
---
src/assets/scss/global.scss | 25 ++-
src/components/App.scss | 143 +++++++++++++++---
.../atoms/FileCard/style.module.scss | 11 +-
.../atoms/FileListItem/style.module.scss | 3 +-
.../atoms/FolderCard/style.module.scss | 9 +-
src/components/atoms/ModuleCard/index.tsx | 2 +-
.../atoms/ModuleCard/style.module.scss | 15 +-
.../atoms/MyBreadcrumbs/style.module.scss | 4 +-
.../atoms/PersonCard/style.module.scss | 11 +-
.../atoms/SideBarCard/style.module.scss | 21 +--
.../atoms/TutorCard/style.module.scss | 18 ++-
.../molecules/CategoryHeader/index.tsx | 1 -
.../CategoryHeader/style.module.scss | 3 +-
src/components/molecules/Dandruff/index.tsx | 5 +-
.../QuickAccessRow/style.module.scss | 10 +-
.../molecules/SearchBox/style.module.scss | 48 +++---
.../components/SectionHeader/index.tsx | 2 -
.../SectionHeader/style.module.scss | 1 +
.../SideBarCardGroup/style.module.scss | 4 +-
.../SideBarTabGroup/style.module.scss | 7 +-
.../TutorCardGroup/style.module.scss | 4 +-
.../BottomBar/BottomBarItem/style.module.scss | 17 +--
.../organisms/BottomBar/style.module.scss | 4 +-
.../organisms/LeftBar/style.module.scss | 10 +-
.../organisms/RightBar/style.module.scss | 8 +-
.../components/NavBarBrand/style.module.scss | 10 +-
.../NavBarTabItem/style.module.scss | 22 +--
.../organisms/TopBar/style.module.scss | 4 +-
.../pages/ModuleDashboard/index.tsx | 2 +-
.../pages/ModuleDashboard/style.module.scss | 5 +
.../pages/ModuleList/style.module.scss | 2 +
.../pages/ModuleOverview/style.module.scss | 13 +-
src/components/pages/SettingsModal/index.tsx | 4 +-
.../pages/SettingsModal/style.module.scss | 85 +++++++----
src/components/pages/Timeline/index 2.tsx | 12 ++
35 files changed, 349 insertions(+), 196 deletions(-)
create mode 100644 src/components/pages/Timeline/index 2.tsx
diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 14c554b2f..f777f47f7 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -1,9 +1,5 @@
@import "./custom";
-// Tags styling
-$blue-tag-background: transparentize($blue-100, 0.5);
-$teal-tag-background: transparentize($teal-100, 0.5);
-
.fileTag {
text-transform: uppercase;
font-size: 0.8rem;
@@ -13,13 +9,13 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
.tagBlue {
- color: $blue-700;
- background: $blue-tag-background;
+ color: var(--lecture-text);
+ background: var(--lecture-background);
}
.tagTeal {
- color: $teal-700;
- background: $teal-tag-background;
+ color: var(--deadline-text);
+ background: var(--deadline-background);
}
// Section header with checkbox settings
@@ -36,17 +32,20 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
.sectionHeaderButton {
- background-color: $white;
- color: $gray-500;
+ color: var(--tertiary-text-color);
+ background-color: var(--background-color);
+
border-width: 0px;
border-radius: 8px;
+
margin-left: 20px;
justify-content: space-between;
height: 2.25rem;
+ font-size: 1.05rem;
+
transition: 0.2s background-color;
-webkit-transition: 0.2s background-color;
-moz-transition: 0.2s background-color;
- font-size: 1.05rem;
}
.buttonIcon {
@@ -64,7 +63,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
.sectionHeaderButton:hover, .sectionHeaderButton:focus {
- background-color: $gray-200;
- color: $gray-700 !important;
+ color: var(--tertiary-text-color) !important;
+ background-color: var(--secondary-background-color) !important;
box-shadow: none !important;
}
diff --git a/src/components/App.scss b/src/components/App.scss
index 0a513f620..e92315f5c 100644
--- a/src/components/App.scss
+++ b/src/components/App.scss
@@ -8,6 +8,7 @@ body {
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
+ background-color: var(--background-color);
}
code {
@@ -15,51 +16,150 @@ code {
monospace;
}
-
:root {
- --primary-color: #{$gray-100};
- --font-color: #{$black};
- --bg-color: #{$white};
+ --background-color: #{$white};
+ --secondary-background-color: #{$gray-100};
+
+ --primary-text-color: #{$black};
+ --secondary-text-color: #{$gray-700};
+ --tertiary-text-color: #{$gray-500};
+
+ --border-color: #{$gray-200};
+ --border-color-hover: #{$gray-300};
+ --border-color-focus: #{$gray-300};
+
+ --primary-button: #{$gray-100};
+ --primary-button-hover: #{$gray-200};
+ --primary-button-active: #{$black};
+
+ --primary-button-text: #{$black};
+ --primary-button-text-active: #{$white};
+ --primary-button-text-inactive: #{$gray-300};
+
+ --secondary-button: #{$white};
+ --secondary-button-hover: #{$gray-100};
+ --secondary-button-active: #{$gray-200};
+
+ --secondary-button-text: #{$gray-400};
+ --secondary-button-text-active: #{$gray-500};
+
+ --tertiary-button: #{$gray-100};
+ --tertiary-button-hover: #{$gray-200};
+ --tertiary-button-active: #{$gray-300};
+
+ --tertiary-button-text: #{$gray-400};
+ --tertiary-button-text-hover: #{$gray-500};
+
+ --input-bar: #{$gray-100};
+ --input-bar-placeholder: #{$gray-400};
+ --input-bar-focus: #{$white};
+
+ --image-invert: 0%;
+ --box-shadow-color: rgba(0, 0, 0, 0.1);
+
+ --scrollbar: #{$gray-400};
+ --email-text: #{$blue-500};
+
+ --lecture-background: #{rgba($blue-100, 0.5)};
+ --labs-background: #{rgba($pink-100, 0.5)};
+ --deadline-background: #{rgba($teal-100, 0.5)};
+
+ --lecture-text: #{$blue-700};
+ --labs-text: #{$pink-700};
+ --deadline-text: #{$teal-700};
}
[data-theme="dark"] {
- --primary-color: #{$gray-900};
- --font-color: #{$white};
- --bg-color: #{$black};
+ --background-color: #{$gray-900};
+ --secondary-background-color: #{$gray-800};
+
+ --primary-text-color: #{$white};
+ --secondary-text-color: #{$gray-300};
+ --tertiary-text-color: #{$gray-500};
+
+ --border-color: #{$gray-700};
+ --border-color-hover: #{$gray-600};
+ --border-color-focus: #{$gray-600};
+
+ --primary-button: #{$gray-800};
+ --primary-button-hover: #{$gray-700};
+ --primary-button-active: #{$white};
+
+ --primary-button-text: #{$white};
+ --primary-button-text-active: #{$black};
+ --primary-button-text-inactive: #{$gray-900};
+
+ --secondary-button: #{$gray-900};
+ --secondary-button-hover: #{$gray-800};
+ --seconary-button-active: #{$gray-200};
+
+ --secondary-button-text: #{$gray-400};
+ --secondary-button-text-active: #{$gray-500};
+
+ --tertiary-button: #{$gray-800};
+ --tertiary-button-hover: #{$gray-700};
+ --tertiary-button-active: #{$gray-600};
+
+ --tertiary-button-text: #{$gray-600};
+ --tertiary-button-text-hover: #{$gray-500};
+
+ --input-bar: #{$gray-800};
+ --input-bar-placeholder: #{$gray-600};
+ --input-bar-focus: #{$gray-900};
+
+ --image-invert: 100%;
+ --box-shadow-color: rgba(0, 0, 0, 0.5);
+
+ --scrollbar: #{$gray-700};
+ --email-text: #{$blue-400};
+
+ --lecture-background: #{rgba($blue-800, 0.5)};
+ --labs-background: #{rgba($pink-800, 0.5)};
+ --deadline-background: #{rgba($teal-800, 0.5)};
+
+ --lecture-text: #{$blue-300};
+ --labs-text: #{$pink-300};
+ --deadline-text: #{$teal-300};
}
.btn-primary.focus,
.btn-primary:focus {
color: #000;
- background-color: #f8f9fa;
- border-color: #0062cc;
+ background-color: #f8f9fa !important;
+ border-color: #0062cc !important;
box-shadow: none;
}
.btn-primary {
margin-bottom: 0.625rem;
- color: var(--font-color);
- background: var(--primary-color);
+
+ color: var(--primary-button-text);
+ background: var(--primary-button);
+
font-size: 1.05rem;
letter-spacing: 0;
- border-width: 0rem;
line-height: 1.375rem;
+ text-align: left;
+
height: 2.25rem;
+ width: 100%;
+
+ border-width: 0rem;
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;
+
+ transition: 0.2s background;
+ -webkit-transition: 0.2s background;
+ -moz-transition: 0.2s background;
}
.btn-primary.active,
.btn-primary:active {
- color: #fff;
- background: #000 !important;
+ color: var(--primary-button-text-active) !important;
+ background: var(--primary-button-active) !important;
font-weight: 500;
text-align: left;
border-width: 0rem;
@@ -68,9 +168,8 @@ code {
}
.btn-primary:hover {
- background: #dee2e6;
- border-color: #fff;
- color: #000;
+ background: var(--primary-button-hover);
+ color: var(--primary-button-text);
}
.modal-backdrop {
diff --git a/src/components/atoms/FileCard/style.module.scss b/src/components/atoms/FileCard/style.module.scss
index 03610bb1d..36e81664f 100644
--- a/src/components/atoms/FileCard/style.module.scss
+++ b/src/components/atoms/FileCard/style.module.scss
@@ -4,16 +4,17 @@
.fileCard {
border-radius: 0.5rem;
transition: transform 0.2s, box-shadow 0.2s;
- background-color: $white;
+ background-color: var(--background-color);
height: 96%;
cursor: pointer;
- border: 1px solid $gray-200;
+ border: 1px solid var(--border-color);
+ color: var(--primary-text-color);
}
.fileCard:hover {
transform: scale(1.03);
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
- border-color: $gray-300;
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+ border-color: var(--border-color-hover);
}
.fileCard :global(.card-body) {
@@ -62,4 +63,4 @@
.fileCard :global(.card-img-top) {
height: 100px;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/atoms/FileListItem/style.module.scss b/src/components/atoms/FileListItem/style.module.scss
index 9dbc81213..3c1168748 100644
--- a/src/components/atoms/FileListItem/style.module.scss
+++ b/src/components/atoms/FileListItem/style.module.scss
@@ -5,11 +5,12 @@
margin: 0;
padding: 0.25rem 1.25rem;
border: 0 !important;
+ color: var(--primary-text-color);
}
.listRow:hover {
transform: scale(1.01);
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
}
.listRow {
diff --git a/src/components/atoms/FolderCard/style.module.scss b/src/components/atoms/FolderCard/style.module.scss
index 9eeca2c0a..2a1fc8e2f 100644
--- a/src/components/atoms/FolderCard/style.module.scss
+++ b/src/components/atoms/FolderCard/style.module.scss
@@ -2,17 +2,18 @@
.folderCard {
border-radius: 0.5rem;
- border: 1px solid $gray-200;
+ border: 1px solid var(--border-color);
transition: transform 0.2s, box-shadow 0.2s;
- background-color: $white;
+ background-color: var(--background-color);
margin-top: 0.67rem;
cursor: pointer;
+ color: var(--primary-text-color);
}
.folderCard:hover {
transform: scale(1.03);
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
- border-color: $gray-300;
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+ border-color: var(--border-color-hover);
}
.folderCard :global(.card-body) {
diff --git a/src/components/atoms/ModuleCard/index.tsx b/src/components/atoms/ModuleCard/index.tsx
index 07f7aeebc..59059a7b0 100644
--- a/src/components/atoms/ModuleCard/index.tsx
+++ b/src/components/atoms/ModuleCard/index.tsx
@@ -86,7 +86,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
src={module.image}
/>
<Card.Body>
- <Card.Title style={{ color: "#000" }}>{module.title}</Card.Title>
+ <Card.Title>{module.title}</Card.Title>
</Card.Body>
<Card.Footer>
<span
diff --git a/src/components/atoms/ModuleCard/style.module.scss b/src/components/atoms/ModuleCard/style.module.scss
index cea396f8c..db7842325 100644
--- a/src/components/atoms/ModuleCard/style.module.scss
+++ b/src/components/atoms/ModuleCard/style.module.scss
@@ -1,19 +1,19 @@
@import "assets/scss/custom";
.moduleCard {
- background: #ffffff;
+ background: var(--background-color);
height: 100%;
border-width: 0rem;
border-radius: 0.5rem !important;
transition: transform 0.2s, box-shadow 0.2s;
- border: 1px solid $gray-200;
+ border: 1px solid var(--border-color);
}
.moduleCard:hover {
transform: scale(1.03);
text-decoration: none;
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
- border-color: $gray-300;
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+ border-color: var(--border-color-hover);
}
.termIcons > * {
@@ -22,11 +22,11 @@
}
.moduleCard :global(.card-header) {
- background: #fff;
+ background: var(--background-color);
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
border-width: 0rem;
- color: #000;
+ color: var(--primary-text-color);
font-weight: 500;
text-transform: uppercase;
text-align: right;
@@ -37,6 +37,7 @@
.moduleCard :global(.card-body) {
padding: 0.5rem;
+ color: var(--primary-text-color);
}
.moduleCard :global(.card-title) {
@@ -45,7 +46,7 @@
.moduleCard :global(.card-footer) {
border-radius: 0.5rem !important;
- background: #fff;
+ background: var(--background-color);
border-width: 0rem;
padding: 0.5rem;
display: flex;
diff --git a/src/components/atoms/MyBreadcrumbs/style.module.scss b/src/components/atoms/MyBreadcrumbs/style.module.scss
index eb64290fb..de0895eeb 100644
--- a/src/components/atoms/MyBreadcrumbs/style.module.scss
+++ b/src/components/atoms/MyBreadcrumbs/style.module.scss
@@ -2,7 +2,7 @@
.breadcrumb,
:global(.breadcrumb) {
- background: #fff !important;
+ background: var(--background-color) !important;
text-transform: uppercase;
font-weight: 500;
padding: 0rem;
@@ -10,6 +10,6 @@
}
.breadcrumbItem * {
- color: #000 !important;
+ color: var(--primary-text-color) !important;
text-decoration: none !important;
}
diff --git a/src/components/atoms/PersonCard/style.module.scss b/src/components/atoms/PersonCard/style.module.scss
index 8e51acb83..e723f52df 100644
--- a/src/components/atoms/PersonCard/style.module.scss
+++ b/src/components/atoms/PersonCard/style.module.scss
@@ -10,14 +10,14 @@
.userName {
font-weight: 600;
font-size: 1.5rem;
- color: $black;
+ color: var(--primary-text-color);
margin-bottom: 0rem;
line-height: 2rem;
}
.userEmail {
font-size: 1rem;
- color: $blue-500;
+ color: var(--email-text);
margin-bottom: 0rem;
line-height: 1.25rem;
}
@@ -31,25 +31,26 @@
display: flex;
flex-direction: row;
align-items: center;
+ color: var(--primary-text-color);
}
.userYear {
font-size: 1.063rem;
- color: $gray-700;
+ color: var(--secondary-text-color);
margin-bottom: 0rem;
line-height: 1.375rem;
}
.userDepartment {
font-size: 1.063rem;
- color: $gray-600;
+ color: var(--tertiary-text-color);
margin-bottom: 0rem;
line-height: 1.375rem;
}
.userCourse {
font-size: 1.063rem;
- color: $gray-800;
+ color: var(--secondary-text-color);
margin-top: 0.625rem;
margin-bottom: 0rem;
line-height: 1.375rem;
diff --git a/src/components/atoms/SideBarCard/style.module.scss b/src/components/atoms/SideBarCard/style.module.scss
index f0e040272..9db8c26c6 100644
--- a/src/components/atoms/SideBarCard/style.module.scss
+++ b/src/components/atoms/SideBarCard/style.module.scss
@@ -1,18 +1,13 @@
@import "assets/scss/custom";
-$lecture-background: transparentize($blue-100, 0.5);
-$labs-background: transparentize($pink-100, 0.5);
-$deadline-background: transparentize($teal-100, 0.5);
-
.sideBarCard {
margin-top: 0.3125rem;
margin-bottom: 0.3125rem;
- color: #000;
border-width: 0rem;
width: 100%;
border-radius: 0.5rem !important;
text-align: left;
- transition: transform 0.2s;
+ transition: transform .2s;
}
.sideBarCard:hover {
@@ -20,27 +15,27 @@ $deadline-background: transparentize($teal-100, 0.5);
}
.sideBarRedCard * {
- color: $pink-700;
+ color: var(--labs-text);
}
.sideBarRedCard {
- background: $labs-background;
+ background: var(--labs-background);
}
.sideBarBlueCard * {
- color: $blue-700;
+ color: var(--lecture-text);
}
.sideBarBlueCard {
- background: $lecture-background;
+ background: var(--lecture-background);
}
.sideBarGreenCard * {
- color: $teal-700;
+ color: var(--deadline-text);
}
.sideBarGreenCard {
- background: $deadline-background;
+ background: var(--deadline-background);
}
.sideBarCard :global(.card-body) {
@@ -67,8 +62,6 @@ $deadline-background: transparentize($teal-100, 0.5);
.sideBarCard:global(.active),
.claendarCard:active {
- color: #fff;
- background-color: #000 !important;
font-weight: 500;
text-align: left;
border-width: 0rem;
diff --git a/src/components/atoms/TutorCard/style.module.scss b/src/components/atoms/TutorCard/style.module.scss
index b4fda3b0b..600f12540 100644
--- a/src/components/atoms/TutorCard/style.module.scss
+++ b/src/components/atoms/TutorCard/style.module.scss
@@ -6,8 +6,8 @@
margin-top: 1.25rem;
align-items: center;
width: 100%;
- background: $white;
- border: 1px solid $gray-200;
+ background: var(--background-color);
+ border: 1px solid var(--border-color);
padding: 0.75rem;
border-radius: 0.5rem;
transition: 0.2s transform, 0.2s box-shadow;
@@ -16,9 +16,9 @@
}
.tutorContainer:hover {
- border-color: $gray-300;
+ border-color: var(--border-color-hover);
transform: scale(1.03);
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
}
.tutorImage {
@@ -41,12 +41,14 @@
word-break: break-word;
}
+.tutorName {
+ color: var(--primary-text-color);
+}
+
.tutorEmail {
- color: $gray-700;
- color: $blue-500;
-
+ color: var(--email-text);
}
.tutorAddress {
- color: $gray-600;
+ color: var(--tertiary-text-color);
}
diff --git a/src/components/molecules/CategoryHeader/index.tsx b/src/components/molecules/CategoryHeader/index.tsx
index 9573568aa..bc6057322 100644
--- a/src/components/molecules/CategoryHeader/index.tsx
+++ b/src/components/molecules/CategoryHeader/index.tsx
@@ -25,7 +25,6 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
{ !selectAllIcon ||
<div className={styles.sectionHeaderButtonGroup}>
<Button
- style={{ color: checkBoxColor }}
className={styles.sectionHeaderButton}
onClick={onSelectAllClick}
variant="secondary"
diff --git a/src/components/molecules/CategoryHeader/style.module.scss b/src/components/molecules/CategoryHeader/style.module.scss
index 8dc409771..f659a15e0 100644
--- a/src/components/molecules/CategoryHeader/style.module.scss
+++ b/src/components/molecules/CategoryHeader/style.module.scss
@@ -4,11 +4,12 @@
.sectionHeader {
font-size: 1.25rem;
text-transform: capitalize;
+ color: var(--primary-text-color);
}
.sectionHeaderContainer {
padding: 0.25rem 0rem;
margin-top: 1.25rem;
- border-bottom: 1px solid $gray-300;
+ border-bottom: 1px solid var(--border-color);
margin-bottom: 1rem;
}
diff --git a/src/components/molecules/Dandruff/index.tsx b/src/components/molecules/Dandruff/index.tsx
index 027b34f38..d82c1275e 100644
--- a/src/components/molecules/Dandruff/index.tsx
+++ b/src/components/molecules/Dandruff/index.tsx
@@ -10,8 +10,9 @@ const Dandruff: React.FC<DandruffProps> = ({ heading }: DandruffProps) => {
<>
<MyBreadcrumbs />
- <h3>{heading}</h3>
- <hr />
+ <div style={{ borderBottom: "1px solid var(--border-color)"}}>
+ <h3 style={{ color: "var(--primary-text-color)"}}>{heading}</h3>
+ </div>
</>
);
};
diff --git a/src/components/molecules/QuickAccessRow/style.module.scss b/src/components/molecules/QuickAccessRow/style.module.scss
index d45af642f..e3f9fc276 100644
--- a/src/components/molecules/QuickAccessRow/style.module.scss
+++ b/src/components/molecules/QuickAccessRow/style.module.scss
@@ -2,7 +2,7 @@
.quickAccessRow {
scrollbar-width: thin;
- scrollbar-color: $white $white;
+ scrollbar-color: var(--background-color) var(--background-color);
margin-top: 0.625rem;
overflow-y: visible;
overflow-x: auto;
@@ -15,19 +15,19 @@
height: 0.5rem;
}
.quickAccessRow::-webkit-scrollbar-track {
- background: $white;
+ background: var(--background-color);
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.quickAccessRow::-webkit-scrollbar-thumb {
- background-color: $white;
+ background-color: var(--background-color);
border-radius: 0.5rem;
}
.quickAccessRow:hover {
- scrollbar-color: $gray-400 $white;
+ scrollbar-color: var(--scrollbar) var(--background-color);
}
.quickAccessRow:hover::-webkit-scrollbar-thumb {
- background-color: $gray-400;
+ background-color: var(--scrollbar);
}
diff --git a/src/components/molecules/SearchBox/style.module.scss b/src/components/molecules/SearchBox/style.module.scss
index 057ad0130..ae693f795 100644
--- a/src/components/molecules/SearchBox/style.module.scss
+++ b/src/components/molecules/SearchBox/style.module.scss
@@ -5,39 +5,44 @@ $button-border: transparentize($gray-300, 1);
.searchBar {
border-radius: 0.5rem;
- background-color: $button-background;
- border-color: $button-background;
+ border-width: 1px;
+ border-color: var(--input-bar);
+
+ background-color: var(--input-bar);
+ color: var(--primary-text-color);
+
transition: 0.2s background-color;
-webkit-transition: 0.2s background-color;
-moz-transition: 0.2s back-ground-color;
}
.searchBar::placeholder {
- color: #acb5bd;
+ color: var(--input-bar-placeholder);
opacity: 1;
}
.searchBar:focus + :global(.input-group-append) .searchBarIcon {
box-shadow: none !important;
border-left: none;
- border-color: $gray-300;
- background-color: $white;
+ border-color: var(--border-color-focus);
+ background-color: var(--background-color);
}
.searchBar:focus {
box-shadow: none !important;
border-right: none;
- border-color: $gray-300;
- background-color: $white;
+ border-color: var(--border-color-focus);
+ background-color: var(--input-bar-focus);
+ color: var(--primary-text-color);
}
.searchBarIcon {
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;
+ background-color: var(--tertiary-button);
+ border-color: var(--tertiary-button);
+ color: var(--tertiary-button-text);
transition: 0.2s background-color !important;
-webkit-transition: 0.2s background-color !important;
-moz-transition: 0.2s back-ground-color !important;
@@ -47,24 +52,25 @@ $button-border: transparentize($gray-300, 1);
.searchBarIcon:active,
.searchBarIcon:hover,
.searchBarIcon:focus {
- background: $gray-200 !important;
- color: $gray-700 !important;
- border-color: $gray-200 !important;
+ background: var(--tertiary-button-hover) !important;
+ color: var(--tertiary-button-text-hover) !important;
+ border-color: var(--tertiary-button-hover) !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;
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+ border: 1px solid var(--border-color);
padding: 0.75rem;
+ background-color: var(--background-color);
}
.dropdownHeader {
font-weight: 500;
font-size: 1rem;
- color: $black;
+ color: var(--primary-text-color);
padding: 0px;
margin-bottom: 0.75rem;
}
@@ -75,7 +81,8 @@ $button-border: transparentize($gray-300, 1);
.dropdownItem {
border-radius: 0.5rem;
- background: $gray-100;
+ background: var(--primary-button);
+ color: var(--primary-button-text);
font-size: 1rem;
text-align: center;
transition: 0.2s background;
@@ -88,12 +95,13 @@ $button-border: transparentize($gray-300, 1);
}
.dropdownItem:hover {
- background: $gray-200;
+ background: var(--primary-button-hover);
+ color: var(--primary-button-text);
}
.dropdownItem:active,
.dropdown:global(.active) {
- color: $white;
+ color: var(--primary-button-text-active);
font-weight: 500;
- background: $black;
+ background: var(--primary-button-active);
}
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/index.tsx b/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
index 68b3ac9a6..b538d0182 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
+++ b/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
@@ -34,7 +34,6 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
<Fade in={show} timeout={500}>
<span id="download-button">
<Button
- style={{ color: checkBoxColur }}
variant="secondary"
className={styles.sectionHeaderButton}
onClick={onDownloadClick}
@@ -47,7 +46,6 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
</span>
</Fade>
<Button
- style={{ color: checkBoxColur }}
className={styles.sectionHeaderButton}
onClick={onSelectAllClick}
variant="secondary"
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
index f5ac4f915..25c1a82ef 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
+++ b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
@@ -5,6 +5,7 @@
cursor: pointer;
font-size: 1.5rem;
text-transform: capitalize;
+ color: var(--primary-text-color);
}
.alert-enter {
diff --git a/src/components/molecules/SideBarCardGroup/style.module.scss b/src/components/molecules/SideBarCardGroup/style.module.scss
index 796c4d5ee..24b753a76 100644
--- a/src/components/molecules/SideBarCardGroup/style.module.scss
+++ b/src/components/molecules/SideBarCardGroup/style.module.scss
@@ -11,7 +11,7 @@
.sideBarCardGroupHeading {
font-size: 1.5rem;
- color: #000000;
+ color: var(--primary-text-color);
text-align: left;
margin-top: 1.875rem;
margin-left: 1rem;
@@ -33,7 +33,7 @@
.sideBarCardGroupHeading {
font-size: 1.5rem;
- color: #000000;
+ color: var(--primary-text-color);
text-align: left;
margin-top: 1.875rem;
margin-left: 2rem;
diff --git a/src/components/molecules/SideBarTabGroup/style.module.scss b/src/components/molecules/SideBarTabGroup/style.module.scss
index fb262c690..8ef4f0428 100644
--- a/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/src/components/molecules/SideBarTabGroup/style.module.scss
@@ -1,8 +1,5 @@
@import "assets/scss/custom";
-$button-background: transparentize($gray-200, 0.75);
-$button-border: transparentize($gray-300, 1);
-
.tabGroupButtonSvg {
float: right;
margin-top: 0.22rem;
@@ -19,7 +16,7 @@ $button-border: transparentize($gray-300, 1);
.tabGroupHeading {
font-size: 1.5rem;
- color: #000000;
+ color: var(--primary-text-color);
text-align: left;
margin-top: 1.875rem;
margin-left: 1rem;
@@ -42,7 +39,7 @@ $button-border: transparentize($gray-300, 1);
.tabGroupHeading {
font-size: 1.5rem;
- color: #000000;
+ color: var(--primary-text-color);
text-align: left;
margin-top: 1.875rem;
margin-left: 2rem;
diff --git a/src/components/molecules/TutorCardGroup/style.module.scss b/src/components/molecules/TutorCardGroup/style.module.scss
index 69a94a7ee..4d2b6848d 100644
--- a/src/components/molecules/TutorCardGroup/style.module.scss
+++ b/src/components/molecules/TutorCardGroup/style.module.scss
@@ -18,9 +18,9 @@
}
.tutorEmail {
- color: $gray-700;
+ color: var(--secondary-text-color);
}
.tutorAddress {
- color: $gray-600;
+ color: var(--tertiary-text-color);
}
diff --git a/src/components/organisms/BottomBar/BottomBarItem/style.module.scss b/src/components/organisms/BottomBar/BottomBarItem/style.module.scss
index 60a3c13f2..6d562f82a 100644
--- a/src/components/organisms/BottomBar/BottomBarItem/style.module.scss
+++ b/src/components/organisms/BottomBar/BottomBarItem/style.module.scss
@@ -3,8 +3,8 @@
.btn:active,
.btn:global(.active) {
border: 0;
- background-color: #000 !important;
- color: #fff;
+ background-color: var(--primary-button-active) !important;
+ color: var(--primary-button-text-active) !important;
}
.btn {
@@ -14,8 +14,8 @@
border-radius: 0rem;
width: 25%;
margin-left: 0;
- color: #000;
- background-color: #fff;
+ color: var(--primary-button-text);
+ background-color: var(--primary-button);
display: flex;
align-items: center;
justify-content: center;
@@ -28,12 +28,7 @@
.btn:hover {
border: 0rem;
- background-color: #ced4da;
- color: #000;
- }
-
- .btn:active:hover,
- .btn:global(.active):hover {
- background-color: $gray-900 !important;
+ background-color: var(--primary-button-hover);
+ color: var(--primary-button-text);
}
}
diff --git a/src/components/organisms/BottomBar/style.module.scss b/src/components/organisms/BottomBar/style.module.scss
index 7b4852a4e..f710bfe1d 100644
--- a/src/components/organisms/BottomBar/style.module.scss
+++ b/src/components/organisms/BottomBar/style.module.scss
@@ -6,8 +6,8 @@
bottom: 0;
width: 100%;
height: 3.75rem;
- background-color: #fff;
- border-top: 1px solid #cdd4db;
+ background-color: var(--background-color);
+ border-top: 1px solid var(--border-color);
padding: 0rem;
}
diff --git a/src/components/organisms/LeftBar/style.module.scss b/src/components/organisms/LeftBar/style.module.scss
index 4fe993ed1..cc8e98f7d 100644
--- a/src/components/organisms/LeftBar/style.module.scss
+++ b/src/components/organisms/LeftBar/style.module.scss
@@ -21,8 +21,8 @@
z-index: 5000;
margin-top: 3.8125rem;
padding-bottom: 1.875rem;
- background: #fff;
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+ background: var(--background-color);
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
}
#leftbarWrapper::-webkit-scrollbar {
@@ -41,7 +41,7 @@
.leftbarStatus a {
text-decoration: none !important;
- color: #000 !important;
+ color: var(--primary-text-color) !important;
}
@media (max-width: 62rem) {
@@ -52,7 +52,7 @@
margin-bottom: 0rem;
font-size: 1rem;
font-weight: 500;
- color: #000000;
+ color: var(--primary-text-color);
letter-spacing: 0;
position: relative;
width: max-content;
@@ -72,7 +72,7 @@
margin-bottom: 0rem;
font-size: 1rem;
font-weight: 500;
- color: #000000;
+ color: var(--primary-text-color);
letter-spacing: 0;
position: relative;
width: max-content;
diff --git a/src/components/organisms/RightBar/style.module.scss b/src/components/organisms/RightBar/style.module.scss
index 22ff87076..346906c88 100644
--- a/src/components/organisms/RightBar/style.module.scss
+++ b/src/components/organisms/RightBar/style.module.scss
@@ -21,8 +21,8 @@
z-index: 5000;
margin-top: 3.813rem;
padding-bottom: 1.875rem;
- background: #fff;
- box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+ background: var(--background-color);
+ box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
}
#rightbarWrapper::-webkit-scrollbar {
@@ -47,7 +47,7 @@
margin-bottom: 0rem;
font-size: 1rem;
font-weight: 500;
- color: #000000;
+ color: var(--primary-text-color);
letter-spacing: 0;
position: relative;
width: max-content;
@@ -68,7 +68,7 @@
font-size: 1rem;
font-weight: 500;
text-align: right;
- color: #000000;
+ color: var(--primary-text-color);
letter-spacing: 0;
position: relative;
width: max-content;
diff --git a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
index 7f619ea5b..9a3fb8d48 100644
--- a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
@@ -1,26 +1,30 @@
@import "assets/scss/custom";
+
.brandImage {
margin-right: 0.625rem;
width: 1.875rem;
height: 1.875rem;
+ // Please do not change this:
+ filter: Invert(var(--image-invert));
}
.brandContainer {
font-family: "IBM Plex Sans";
font-weight: 500;
font-size: 1.5rem;
- color: #000;
text-align: left;
+
padding: 0rem;
+ margin: 0rem;
+
display: flex;
justify-content: left;
align-items: center;
- margin: 0rem;
}
.brandContainer a {
- color: #000 !important;
+ color: var(--primary-text-color) !important;
text-decoration: none !important;
}
diff --git a/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss b/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss
index e301ab65f..93df09a4a 100644
--- a/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss
@@ -2,35 +2,35 @@
@media (min-width: 62rem) {
.pageButton {
- background: $gray-100;
+ background: var(--primary-button);
+ color: var(--primary-button-text) !important;
+
border-radius: 0.5rem !important;
+
font-family: "IBM Plex Sans";
font-size: 1.05rem;
- color: $black !important;
text-align: center;
line-height: 1.375rem;
+
width: 7.5rem;
height: 2.25rem;
+
margin-right: 0.625rem;
margin-left: 0.625rem;
+
transition: 0.2s background;
-webkit-transition: 0.2s background;
-moz-transition: 0.2s background;
}
.pageButton:hover {
- background: $gray-200;
- color: $black !important;
+ background: var(--primary-button-hover);
+ color: var(--primary-button-text) !important;
}
.pageButton:global(.active) {
- background: $black !important;
+ background: var(--primary-button-active) !important;
+ color: var(--primary-button-text-active) !important;
font-weight: 500 !important;
- color: $white !important;
- }
-
- .pageButton:active:hover,
- .pageButton:global(.active):hover {
- background-color: $gray-900 !important;
}
}
diff --git a/src/components/organisms/TopBar/style.module.scss b/src/components/organisms/TopBar/style.module.scss
index 99a195120..ec8b81be1 100644
--- a/src/components/organisms/TopBar/style.module.scss
+++ b/src/components/organisms/TopBar/style.module.scss
@@ -2,6 +2,6 @@
.navBar {
padding: 0.75rem 1rem;
- background: #fff;
- border-bottom: 1px solid #cdd4db;
+ background: var(--background-color);
+ border-bottom: 1px solid var(--border-color);
}
diff --git a/src/components/pages/ModuleDashboard/index.tsx b/src/components/pages/ModuleDashboard/index.tsx
index 78982de89..72769368c 100644
--- a/src/components/pages/ModuleDashboard/index.tsx
+++ b/src/components/pages/ModuleDashboard/index.tsx
@@ -63,7 +63,7 @@ const ModuleDashboard: React.FC = () => {
<Dandruff heading={generateHeading(id)} />
<h4 className={classNames(styles.moduleSectionHeader)}>Module Aims</h4>
- <div style={{ paddingTop: "0.75rem" }}>
+ <div className={styles.moduleDashboardText} style={{ paddingTop: "0.75rem" }}>
<span>In this module you will have the opportunity to:</span>
<ul>
<li>
diff --git a/src/components/pages/ModuleDashboard/style.module.scss b/src/components/pages/ModuleDashboard/style.module.scss
index 0df877f84..d54f4bc90 100644
--- a/src/components/pages/ModuleDashboard/style.module.scss
+++ b/src/components/pages/ModuleDashboard/style.module.scss
@@ -2,12 +2,17 @@
.moduleSectionHeader {
margin-top: 1.875rem;
+ color: var(--primary-text-color);
}
.moduleParagraph {
margin-top: 1rem;
}
+.moduleDashboardText {
+ color: var(--primary-text-color);
+}
+
@media (max-width: 62rem) {
}
diff --git a/src/components/pages/ModuleList/style.module.scss b/src/components/pages/ModuleList/style.module.scss
index 0df877f84..7113c00a5 100644
--- a/src/components/pages/ModuleList/style.module.scss
+++ b/src/components/pages/ModuleList/style.module.scss
@@ -2,10 +2,12 @@
.moduleSectionHeader {
margin-top: 1.875rem;
+ color: var(--primary-text-color);
}
.moduleParagraph {
margin-top: 1rem;
+ color: var(--primary-text-color);
}
@media (max-width: 62rem) {
diff --git a/src/components/pages/ModuleOverview/style.module.scss b/src/components/pages/ModuleOverview/style.module.scss
index 09456cf28..41cf02c27 100644
--- a/src/components/pages/ModuleOverview/style.module.scss
+++ b/src/components/pages/ModuleOverview/style.module.scss
@@ -25,7 +25,7 @@
}
.weekCard {
- background: $white;
+ background: var(--background-color);
border-width: 0rem;
margin-bottom: 0.5rem;
transition: 0.2s transform;
@@ -33,19 +33,24 @@
}
.weekCardHeader {
- background: $gray-100;
+ background: var(--primary-button);
+ color: var(--primary-text-color);
+
transition: 0.2s background;
-webkit-transition: 0.2s background;
-moz-transition: 0.2s background;
+
border-radius: 0.5rem !important;
+ border-width: 0px;
+
font-size: 1.125rem;
+
margin-bottom: 0px !important;
padding: 0.5rem 0.75rem;
- border-width: 0px;
}
.weekCardHeader:hover {
- background: $gray-200;
+ background: var(--primary-button-hover);
}
.weekCardBody {
diff --git a/src/components/pages/SettingsModal/index.tsx b/src/components/pages/SettingsModal/index.tsx
index b96ee1dea..d87e33390 100644
--- a/src/components/pages/SettingsModal/index.tsx
+++ b/src/components/pages/SettingsModal/index.tsx
@@ -33,7 +33,7 @@ const SettingsModal: React.FC<Props> = ({
return (
<Modal
- style={{ zIndex: "10000" }}
+ className={styles.settingsModal}
dialogClassName={styles.modal}
show={show}
onHide={onHide}
@@ -49,7 +49,7 @@ const SettingsModal: React.FC<Props> = ({
<FontAwesomeIcon className={styles.buttonIcon} icon={faTimes} />
</Button>
</Modal.Header>
- <Modal.Body style={{ minHeight: "60vh" }}>
+ <Modal.Body className={styles.modalBody}>
<h5 className={styles.modalSubHeading}>Interface</h5>
<Form className={styles.interfaceGroup}>
diff --git a/src/components/pages/SettingsModal/style.module.scss b/src/components/pages/SettingsModal/style.module.scss
index babe60ffd..a0f923b37 100644
--- a/src/components/pages/SettingsModal/style.module.scss
+++ b/src/components/pages/SettingsModal/style.module.scss
@@ -10,15 +10,44 @@
}
}
+.sectionHeaderButton {
+ color: var(--tertiary-text-color);
+ background-color: var(--background-color);
+}
+
+.sectionHeaderButton:hover {
+ color: var(--tertiary-text-color);
+ background-color: var(--secondary-background-color);
+}
+
.modalHeader {
- padding: 0.5rem 0.75rem;
+ padding: 0.5rem 0.5rem;
+ padding-left: 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
+ background-color: var(--background-color);
+ border-bottom: 1px solid var(--border-color);
+ color: var(--primary-text-color);
+ border-top-right-radius: 0.5rem !important;
+ border-top-left-radius: 0.5rem !important;
+}
+
+.settingsModal :global(.modal-content) {
+ background-color: var(--background-color);
+ border-radius: 0.5rem;
+}
+
+.modalBody {
+ min-height: 60vh;
+ background-color: var(--background-color);
+ color: var(--primary-text-color);
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
}
.interfaceGroup {
- border-bottom: 1px solid $gray-300;
+ border-bottom: 1px solid var(--border-color);
padding: 0rem 0.5rem;
}
@@ -28,61 +57,59 @@ $button-border: transparentize($gray-300, 1);
.inputBar {
border-radius: 0.5rem;
border-width: 1px;
- background-color: $button-background;
+ border-color: var(--input-bar);
+
+ background-color: var(--input-bar);
+ color: var(--primary-text-color);
+
text-align: right;
- border-color: $button-background;
+
transition: 0.2s background-color;
-webkit-transition: 0.2s background-color;
-moz-transition: 0.2s back-ground-color;
}
-.inputBar::placeholder {
- color: #acb5bd;
- opacity: 1;
-}
-
.inputBar:focus {
box-shadow: none !important;
- border-color: $gray-300;
- background-color: $white;
+ border-color: var(--border-color-focus);
+ background-color: var(--input-bar-focus);
+ color: var(--primary-text-color);
+}
+
+.settingsModal {
+ z-index: 10000;
}
.modalToggleButton {
- background-color: $gray-100;
- color: $black;
+ background-color: var(--primary-button);
+ color: var(--primary-button-text);
+
border-width: 0px;
border-radius: 8px;
+
margin-left: 20px;
justify-content: space-between;
height: 2.25rem;
+ font-size: 1.05rem;
+
transition: 0.2s background-color;
-webkit-transition: 0.2s background-color;
-moz-transition: 0.2s background-color;
- font-size: 1.05rem;
}
.modalToggleButton:active,
-.modalToggleButton:global(.active),
-.modalToggleButton:active:focus,
-.modalToggleButton:global(.active):focus {
- background: $black !important;
+.modalToggleButton:global(.active) {
+ background: var(--primary-button-active) !important;
+ color: var(--primary-button-text-active) !important;
font-weight: 500;
text-align: left;
border-width: 0rem;
height: 2.25rem;
line-height: 1.375rem;
- color: $white !important;
}
-.modalToggleButton:hover,
-.modalToggleButton:focus {
- background-color: $gray-200;
- color: $gray-700 !important;
+.modalToggleButton:hover {
+ background-color: var(--primary-button-hover);
+ color: var(--primary-button-text);
box-shadow: none !important;
}
-
-.modalToggleButton:active:hover,
-.modalToggleButton:global(.active):hover {
- background-color: $gray-900;
- color: $white !important;
-}
diff --git a/src/components/pages/Timeline/index 2.tsx b/src/components/pages/Timeline/index 2.tsx
new file mode 100644
index 000000000..a86a366c3
--- /dev/null
+++ b/src/components/pages/Timeline/index 2.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Dandruff from "components/molecules/Dandruff";
+
+const Timeline: React.FC = () => {
+ return (
+ <>
+ <Dandruff heading="Timeline" />
+ </>
+ );
+};
+
+export default Timeline;
--
GitLab