From bb71a8fe5c5ca1932f13d866680e350373dae54d Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Fri, 14 Aug 2020 13:08:09 +0530
Subject: [PATCH] Change the styling of buttons

---
 .../components/atoms/FileCard/style.module.scss   |  6 +++---
 .../components/atoms/FolderCard/style.module.scss |  3 ++-
 .../components/atoms/ModuleCard/style.module.scss |  3 +--
 .../components/atoms/NoticeItem/style.module.scss | 14 ++++++++------
 .../DashboardButtonGroup/style.module.scss        |  9 ++++++---
 .../molecules/SideBarTabGroup/style.module.scss   | 15 +++++++++------
 .../pages/ModuleFeedback/style.module.scss        | 10 +++++-----
 .../pages/ModuleResources/style.module.scss       |  6 ++++--
 8 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/atoms/FileCard/style.module.scss b/frontend/src/components/atoms/FileCard/style.module.scss
index ebf3981a8..15b624497 100644
--- a/frontend/src/components/atoms/FileCard/style.module.scss
+++ b/frontend/src/components/atoms/FileCard/style.module.scss
@@ -4,20 +4,20 @@
   border-radius: 0.5rem;
   transition: transform 0.2s, box-shadow 0.2s;
   padding: 1px;
-  background-color: $white;
+  background-color: $white ;
   height: 96%;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-200;
 }
 
 .quickViewCard:hover {
   transform: scale(1.03);
   box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  border-color: $gray-300;
 }
 
 .quickViewCard :global(.card-body) {
   padding: 0.5rem;
   display: flex;
-  border-top: 1px solid $gray-300;
   justify-content: space-between;
 }
 
diff --git a/frontend/src/components/atoms/FolderCard/style.module.scss b/frontend/src/components/atoms/FolderCard/style.module.scss
index e82383707..4fb1e4d3e 100644
--- a/frontend/src/components/atoms/FolderCard/style.module.scss
+++ b/frontend/src/components/atoms/FolderCard/style.module.scss
@@ -2,7 +2,7 @@
 
 .folderCard {
   border-radius: 0.5rem;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-200; 
   transition: transform 0.2s, box-shadow 0.2s;
   background-color: $white;
   margin-top: 0.67rem;
@@ -11,6 +11,7 @@
 .folderCard:hover {
   transform: scale(1.03);
   box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  border-color: $gray-300;
 }
 
 .folderCard :global(.card-body) {
diff --git a/frontend/src/components/atoms/ModuleCard/style.module.scss b/frontend/src/components/atoms/ModuleCard/style.module.scss
index 60f309be0..478ee7adc 100644
--- a/frontend/src/components/atoms/ModuleCard/style.module.scss
+++ b/frontend/src/components/atoms/ModuleCard/style.module.scss
@@ -13,6 +13,7 @@
   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;
 }
 
 .termIcons > * {
@@ -32,12 +33,10 @@
   padding: 0.5rem;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid $gray-300;
 }
 
 .moduleCard :global(.card-body) {
   padding: 0.5rem;
-  border-top: 1px solid $gray-300;
 }
 
 .moduleCard :global(.card-title) {
diff --git a/frontend/src/components/atoms/NoticeItem/style.module.scss b/frontend/src/components/atoms/NoticeItem/style.module.scss
index 8bc6621f7..8c3a3e13f 100644
--- a/frontend/src/components/atoms/NoticeItem/style.module.scss
+++ b/frontend/src/components/atoms/NoticeItem/style.module.scss
@@ -1,9 +1,11 @@
 @import "assets/scss/custom";
 
+$notice-line: transparentize($gray-600, 0.4);
+
 .noticeContainer {
   background-color: $white;
   border-radius: 8px;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-200;
   padding: 10px;
   transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
   -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
@@ -20,7 +22,7 @@
 
 .noticeHeading {
   font-size: 20px;
-  color: $black;
+  color: $gray-900;
   font-weight: 500;
   margin-bottom: 4px;
   line-height: 22px;
@@ -34,7 +36,7 @@
 
 .noticeUser {
   font-size: 16px;
-  color: $gray-700;
+  color: $notice-line;
   line-height: 18px;
   margin-bottom: 10px;
   margin-right: 10px;
@@ -48,7 +50,7 @@
 
 .noticeTime {
   font-size: 16px;
-  color: $gray-600;
+  color: $notice-line;
   line-height: 18px;
   margin-bottom: 10px;
   margin-left: 10px;
@@ -62,7 +64,7 @@
 
 .noticeBody {
   font-size: 16px;
-  color: $gray-800;
+  color: $gray-700;
   margin-bottom: 0px;
   overflow: hidden;
   position: relative; 
@@ -85,5 +87,5 @@
   width: 1em;
   height: 1em;
   margin-top: 0.2em;
-  background: $gray-100;
+  background: $white;
 }
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss b/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
index a0ad8b1b7..64a10f835 100644
--- a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
+++ b/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
@@ -1,13 +1,16 @@
 @import "assets/scss/custom";
 
+$button-background: transparentize($gray-200, 0.75);
+$button-border: transparentize($gray-300, 1);
+
 .dashboardButton,
 .dashboardButton:global(.a) {
   margin-bottom: 0.625rem;
   color: #000;
-  background: $white;
+  background: $button-background;
   font-size: 1.05rem;
   letter-spacing: 0;
-  border: 1px solid $gray-300;
+  border: 1px solid $button-border;
   line-height: 1.375rem;
   height: 2.25rem;
   border-radius: 0.5rem !important;
@@ -33,7 +36,7 @@
 }
 
 .dashboardButton:hover {
-  background-color: $white;
+  background-color: $button-background;
   border-color: $gray-300;
   color: #000;
   transform: scale(1.03);
diff --git a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
index eba7cef41..c6af7abdc 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
@@ -1,20 +1,23 @@
 @import "assets/scss/custom";
 
+$button-background: transparentize($gray-200, 0.75);
+$button-border: transparentize($gray-300, 1);
+
 .tabGroupButton,
 .tabGroupButton:global(.a) {
   margin-bottom: 0.625rem;
   color: #000;
-  background: $white;
+  background: $button-background;
   font-size: 1.05rem;
   letter-spacing: 0;
-  border: 1px solid $gray-300;
+  border: 1px solid $button-border;
   line-height: 1.375rem;
   height: 2.25rem;
   border-radius: 0.5rem !important;
   text-align: left;
-  transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  -moz-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
+  transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
+  -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
+  -moz-transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
 }
 
 .tabGroupButtonSvg {
@@ -34,7 +37,7 @@
 }
 
 .tabGroupButton:hover {
-  background-color: $white;
+  background-color: $button-background;
   border-color: $gray-300;
   color: #000;
   transform: scale(1.03);
diff --git a/frontend/src/components/pages/ModuleFeedback/style.module.scss b/frontend/src/components/pages/ModuleFeedback/style.module.scss
index 9ac57fe1a..b383892dd 100644
--- a/frontend/src/components/pages/ModuleFeedback/style.module.scss
+++ b/frontend/src/components/pages/ModuleFeedback/style.module.scss
@@ -21,7 +21,7 @@
   -moz-transition: 0.2s back-ground-color;
 }
 
-.serachBar::placeholder {
+.searchBar::placeholder {
   color: #acb5bd;
   opacity: 1;
 }
@@ -70,12 +70,13 @@
   transition: transform 0.2s, box-shadow 0.2s;
   background-color: $white;
   height: 96%;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-200;
 }
 
 .quickViewCard:hover {
   transform: scale(1.03);
   box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  border-color: $gray-300;
 }
 
 .quickViewCard :global(.card-body) {
@@ -83,7 +84,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid $gray-300;
 }
 
 .quickViewCard :global(.card-header) {
@@ -97,7 +97,6 @@
   text-align: right;
   padding: 0.5rem;
   font-size: 1.125rem;
-  border-bottom: 1px solid $gray-300;
   display: flex;
   justify-content: space-between;
 }
@@ -154,7 +153,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 .folderCard {
   border-radius: 0.5rem;
   transition: transform 0.2s, box-shadow 0.2s;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-200;
   background-color: $white;
   margin-top: 0.67rem;
 }
@@ -162,6 +161,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 .folderCard:hover {
   transform: scale(1.03);
   box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  border-color: $gray-300;
 }
 
 .folderCard :global(.card-body) {
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index a852a8f30..574a813d9 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -1,10 +1,12 @@
 @import "assets/scss/custom";
 
+$button-background: transparentize($gray-200, 0.75);
+$button-border: transparentize($gray-300, 1);
 
 .searchBar {
   border-radius: 0.5rem;
-  background-color: $gray-100;
-  border-color: $gray-100;
+  background-color: $button-background;
+  border-color: $button-background;
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s back-ground-color;
-- 
GitLab