From 9ad3839a25f1480094d2705fad4d1460d2afdefb Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Fri, 7 Aug 2020 23:21:12 +0530
Subject: [PATCH] Fix text alignment in sidebar buttons
---
.../atoms/NavBarTabItem/style.module.scss | 2 +-
.../SideBarTabGroup/style.module.scss | 93 ++++++++++---------
.../src/components/pages/ModuleList/index.tsx | 4 +-
3 files changed, 50 insertions(+), 49 deletions(-)
diff --git a/frontend/src/components/atoms/NavBarTabItem/style.module.scss b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
index 281951795..55a856382 100644
--- a/frontend/src/components/atoms/NavBarTabItem/style.module.scss
+++ b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
@@ -5,7 +5,7 @@
background: $gray-100;
border-radius: 8px !important;
font-family: "IBM Plex Sans";
- font-size: 18px;
+ font-size: 17px;
color: $black !important;
text-align: center;
line-height: 22px;
diff --git a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
index d3330c99e..7789648c4 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
@@ -1,81 +1,82 @@
@import "assets/scss/custom";
-.tabGroupButton {
- margin-bottom: 10px;
- color: #000;
+.tabGroupButton,
+.tabGroupButton:global(.a) {
+ margin-bottom: 0.625rem;
+ color: #000;
background: #f6f8fa;
- font-size: 17px;
+ font-size: 1rem;
letter-spacing: 0;
- border-width: 0px;
- height: 40px;
- border-radius: 8px !important;
- text-align: left;
- display: inline-block;
- vertical-align: middle;
+ border-width: 0rem;
+ line-height: 1.375rem;
+ height: 2.25rem;
+ border-radius: 0.5rem !important;
+ text-align: left;
}
.tabGroupButtonSvg {
- float :right;
- margin-top: 3.5px;
+ float: right;
+ margin-top: 0.22rem;
}
.tabGroupButton:global(.active),
-.tabGroupButton:active{
+.tabGroupButton:active {
color: #fff;
- background-color: #000 !important;
+ background-color: #000 !important;
font-weight: 500;
text-align: left;
- border-width: 0px;
- height: 40px;
+ border-width: 0rem;
+ height: 2.25rem;
+ line-height: 1.375rem;
}
.tabGroupButton:hover {
- background-color: #e5e5e5;
- border-color: #fff;
- color: #000;
+ background-color: #e5e5e5;
+ border-color: #fff;
+ color: #000;
}
-@media (max-width: 992px) {
+@media (max-width: 62rem) {
.tabGroupButtonGroup {
- margin-top: 20px;
- margin-left: 16px;
- margin-right: 16px;
+ margin-top: 1.25rem;
+ margin-left: 1rem;
+ margin-right: 1rem;
position: relative;
- width: 218px !important;
- }
-
- .tabGroupHeading {
- font-size: 24px;
+ width: 13.625rem !important;
+ }
+
+ .tabGroupHeading {
+ font-size: 1.5rem;
color: #000000;
text-align: left;
- margin-top: 30px;
- margin-left: 16px;
- margin-right: 16px;
+ margin-top: 1.875rem;
+ margin-left: 1rem;
+ margin-right: 1rem;
position: relative;
width: max-content;
- margin-bottom: 0px;
+ margin-bottom: 0rem;
}
}
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
.tabGroupButtonGroup {
- margin-top: 102px;
- margin-left: 32px;
- margin-right: 32px;
+ margin-top: 6.375rem;
+ margin-left: 2rem;
+ margin-right: 2rem;
position: relative;
- margin-top: 20px;
- width: 186px !important;
- }
-
- .tabGroupHeading {
- font-size: 24px;
+ margin-top: 1.25rem;
+ width: 11.625rem !important;
+ }
+
+ .tabGroupHeading {
+ font-size: 1.5rem;
color: #000000;
text-align: left;
- margin-top: 30px;
- margin-left: 32px;
- margin-right: 32px;
+ margin-top: 1.875rem;
+ margin-left: 2rem;
+ margin-right: 2rem;
position: relative;
width: max-content;
- margin-bottom: 0px;
+ margin-bottom: 0rem;
}
}
diff --git a/frontend/src/components/pages/ModuleList/index.tsx b/frontend/src/components/pages/ModuleList/index.tsx
index 6b6a36dc7..5d455be7b 100644
--- a/frontend/src/components/pages/ModuleList/index.tsx
+++ b/frontend/src/components/pages/ModuleList/index.tsx
@@ -28,14 +28,14 @@ const ModuleList: React.FC = () => {
},
{
- title: "Mathematical Methods",
+ title: "Introduction to Computer Systems",
code: "CO112",
image: systemsIllustration,
content: "",
},
{
- title: "Introduction to Logic",
+ title: "Mathematical Methods",
code: "CO145",
image: methodsIllustration,
content: "",
--
GitLab