From 096e6b4e6bbce8a6609426f817a586d81d0ff3b3 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Thu, 21 May 2020 17:11:26 -0400
Subject: [PATCH] better hover states for columns

---
 .../components/elements/SortColumn/index.js     | 17 +++++++++--------
 .../components/elements/SortColumn/index.scss   | 16 +++++++++++++---
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/client/components/elements/SortColumn/index.js b/src/client/components/elements/SortColumn/index.js
index 30304482b5..58472e7023 100644
--- a/src/client/components/elements/SortColumn/index.js
+++ b/src/client/components/elements/SortColumn/index.js
@@ -11,7 +11,6 @@ const baseClass = 'sort-column';
 const SortColumn = (props) => {
   const { label, handleChange, name } = props;
   const [sort, setSort] = useState(null);
-  const [hovered, setHovered] = useState(false);
 
   const { breakpoints: { m } } = useWindowInfo();
 
@@ -22,18 +21,20 @@ const SortColumn = (props) => {
   const desc = `-${name}`;
   const asc = name;
 
+  const ascClasses = [`${baseClass}__asc`];
+  if (sort === asc) ascClasses.push(`${baseClass}--active`);
+
+  const descClasses = [`${baseClass}__desc`];
+  if (sort === desc) descClasses.push(`${baseClass}--active`);
+
   return (
-    <div
-      className={baseClass}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
+    <div className={baseClass}>
       <span className={`${baseClass}__label`}>{label}</span>
       <span className={`${baseClass}__buttons`}>
         <Button
           round
           buttonStyle="none"
-          className={`${baseClass}__asc${sort === asc ? ` ${baseClass}--active` : ''}`}
+          className={ascClasses.join(' ')}
           onClick={() => setSort(asc)}
         >
           <Chevron />
@@ -41,7 +42,7 @@ const SortColumn = (props) => {
         <Button
           round
           buttonStyle="none"
-          className={`${baseClass}__desc${sort === desc ? ` ${baseClass}--active` : ''}`}
+          className={descClasses.join(' ')}
           onClick={() => setSort(desc)}
         >
           <Chevron />
diff --git a/src/client/components/elements/SortColumn/index.scss b/src/client/components/elements/SortColumn/index.scss
index a780068d30..ecb6195f73 100644
--- a/src/client/components/elements/SortColumn/index.scss
+++ b/src/client/components/elements/SortColumn/index.scss
@@ -13,8 +13,18 @@
     cursor: default;
   }
 
-  .btn {
+  button.btn {
     margin: 0;
+    opacity: .3;
+
+    &.sort-column--active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &:hover {
+      opacity: .7;
+    }
   }
 
   &__asc {
@@ -24,8 +34,8 @@
   }
 
   &:hover {
-    .sort-column__buttons {
-      opacity: 1;
+    .btn {
+      opacity: .4;
       visibility: visible;
     }
   }