From 68c8336f039b9013ca8f4bdb42dba5eb16590237 Mon Sep 17 00:00:00 2001
From: Infinity <2poh.junkang@gmail.com>
Date: Wed, 14 Feb 2024 10:20:22 +0800
Subject: [PATCH 1/4] hover effects for filter buttons under grading

---
 .../grading/subcomponents/GradingBadges.tsx   |  2 +-
 .../subcomponents/GradingSubmissionsTable.tsx |  2 +-
 src/styles/_academy.scss                      | 21 +++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingBadges.tsx b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
index 31cdb6a161..ed497a4c52 100644
--- a/src/pages/academy/grading/subcomponents/GradingBadges.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
@@ -81,7 +81,7 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
   let filterValue = filter.value as string;
   filterValue = filterValue.charAt(0).toUpperCase() + filterValue.slice(1);
   return (
-    <button type="button" onClick={() => onRemove(filter)} style={{ padding: 0 }}>
+    <button type="button" className="grading-overview-filterable-btns" onClick={() => onRemove(filter)} style={{ padding: 0 }}>
       <Badge
         text={filterValue}
         icon={() => <Icon icon={IconNames.CROSS} style={{ marginRight: '0.25rem' }} />}
diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
index 13e874e0d6..ec7aa158e5 100644
--- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
@@ -234,7 +234,7 @@ const Filterable: React.FC<FilterableProps> = ({ column, value, children }) => {
   };
 
   return (
-    <button type="button" onClick={handleFilterChange} style={{ padding: 0 }}>
+    <button type="button" className="grading-overview-filterable-btns" onClick={handleFilterChange} style={{ padding: 0 }}>
       {children || value}
     </button>
   );
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
index 2c77879518..b860240610 100644
--- a/src/styles/_academy.scss
+++ b/src/styles/_academy.scss
@@ -518,3 +518,24 @@
     margin-left: 3px;
   }
 }
+
+.grading-overview-filterable-btns {
+  // Invisible border for backgroundless buttons
+  &:not(:has(> div)) {
+    margin-top: 1px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0);
+  }
+
+  &:hover {
+    // Buttons with bg
+    > div > span {
+      // Use of contrast due to unknown background color
+      filter: contrast(0.925);
+    }
+
+    // Backgroundless buttons
+    &:not(:has(> div)) {
+      border-bottom-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}

From 2ea1503499a00e2d0145d09c00e1c1ef2ea4d62d Mon Sep 17 00:00:00 2001
From: Poh Jun Kang <2poh.junkang@gmail.com>
Date: Wed, 14 Feb 2024 19:39:12 +0800
Subject: [PATCH 2/4] Edited onHover effect background contrast values

---
 src/styles/_academy.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
index b860240610..6ca7bb4f0a 100644
--- a/src/styles/_academy.scss
+++ b/src/styles/_academy.scss
@@ -530,7 +530,7 @@
     // Buttons with bg
     > div > span {
       // Use of contrast due to unknown background color
-      filter: contrast(0.925);
+      filter: contrast(0.9);
     }
 
     // Backgroundless buttons

From a8ec6d2879072071c0a223a68fde8cdb7a82ad11 Mon Sep 17 00:00:00 2001
From: Infinity <2poh.junkang@gmail.com>
Date: Wed, 14 Feb 2024 20:08:48 +0800
Subject: [PATCH 3/4] yarn prettier checks

---
 src/pages/academy/grading/subcomponents/GradingBadges.tsx  | 7 ++++++-
 .../grading/subcomponents/GradingSubmissionsTable.tsx      | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingBadges.tsx b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
index ed497a4c52..6b95443a38 100644
--- a/src/pages/academy/grading/subcomponents/GradingBadges.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
@@ -81,7 +81,12 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
   let filterValue = filter.value as string;
   filterValue = filterValue.charAt(0).toUpperCase() + filterValue.slice(1);
   return (
-    <button type="button" className="grading-overview-filterable-btns" onClick={() => onRemove(filter)} style={{ padding: 0 }}>
+    <button
+      type="button"
+      className="grading-overview-filterable-btns"
+      onClick={() => onRemove(filter)}
+      style={{ padding: 0 }}
+    >
       <Badge
         text={filterValue}
         icon={() => <Icon icon={IconNames.CROSS} style={{ marginRight: '0.25rem' }} />}
diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
index ec7aa158e5..df8cb157a6 100644
--- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
@@ -234,7 +234,12 @@ const Filterable: React.FC<FilterableProps> = ({ column, value, children }) => {
   };
 
   return (
-    <button type="button" className="grading-overview-filterable-btns" onClick={handleFilterChange} style={{ padding: 0 }}>
+    <button
+      type="button"
+      className="grading-overview-filterable-btns"
+      onClick={handleFilterChange}
+      style={{ padding: 0 }}
+    >
       {children || value}
     </button>
   );

From 8927b4d7c1a733e7f2b0ebd600e369d02ecaab4e Mon Sep 17 00:00:00 2001
From: Infinity <2poh.junkang@gmail.com>
Date: Wed, 14 Feb 2024 20:36:56 +0800
Subject: [PATCH 4/4] change from border to text-decoration underline and
 cleanup code

---
 src/pages/academy/grading/subcomponents/GradingBadges.tsx  | 1 -
 .../grading/subcomponents/GradingSubmissionsTable.tsx      | 7 +------
 src/styles/_academy.scss                                   | 7 ++++---
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingBadges.tsx b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
index 6b95443a38..32df016ca3 100644
--- a/src/pages/academy/grading/subcomponents/GradingBadges.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
@@ -85,7 +85,6 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
       type="button"
       className="grading-overview-filterable-btns"
       onClick={() => onRemove(filter)}
-      style={{ padding: 0 }}
     >
       <Badge
         text={filterValue}
diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
index df8cb157a6..ade906b7bd 100644
--- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
@@ -234,12 +234,7 @@ const Filterable: React.FC<FilterableProps> = ({ column, value, children }) => {
   };
 
   return (
-    <button
-      type="button"
-      className="grading-overview-filterable-btns"
-      onClick={handleFilterChange}
-      style={{ padding: 0 }}
-    >
+    <button type="button" className="grading-overview-filterable-btns" onClick={handleFilterChange}>
       {children || value}
     </button>
   );
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
index 6ca7bb4f0a..f2c5f0d435 100644
--- a/src/styles/_academy.scss
+++ b/src/styles/_academy.scss
@@ -520,10 +520,11 @@
 }
 
 .grading-overview-filterable-btns {
+  padding: 0;
+
   // Invisible border for backgroundless buttons
   &:not(:has(> div)) {
-    margin-top: 1px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0);
+    text-decoration: none;
   }
 
   &:hover {
@@ -535,7 +536,7 @@
 
     // Backgroundless buttons
     &:not(:has(> div)) {
-      border-bottom-color: rgba(0, 0, 0, 0.5);
+      text-decoration: underline;
     }
   }
 }