Grading: Overview filterable buttons onHover Effects (#2782)

* hover effects for filter buttons under grading

* Edited onHover effect background contrast values

* yarn prettier checks

* change from border to text-decoration underline and cleanup code

Author: InfinityTwo

src/pages/academy/grading/subcomponents/GradingBadges.tsx

@@ -81,7 +81,11 @@ 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)}
+    >
       <Badge
         text={filterValue}
         icon={() => <Icon icon={IconNames.CROSS} style={{ marginRight: '0.25rem' }} />}

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}>
       {children || value}
     </button>
   );

src/styles/_academy.scss

@@ -518,3 +518,25 @@
     margin-left: 3px;
   }
 }
+
+.grading-overview-filterable-btns {
+  padding: 0;
+
+  // Invisible border for backgroundless buttons
+  &:not(:has(> div)) {
+    text-decoration: none;
+  }
+
+  &:hover {
+    // Buttons with bg
+    > div > span {
+      // Use of contrast due to unknown background color
+      filter: contrast(0.9);
+    }
+
+    // Backgroundless buttons
+    &:not(:has(> div)) {
+      text-decoration: underline;
+    }
+  }
+}