From b374df1bcc287d82f84636006b2c667cb81ced5d Mon Sep 17 00:00:00 2001
From: ShinCurry <shincurryyang@gmail.com>
Date: Wed, 19 Jun 2019 14:23:34 +0800
Subject: [PATCH] update ResourceTable click select state style

---
 .../ResourceTable/ResourceTable.scss          | 20 +++++++++++++------
 .../ResourceTable/ResourceTable.tsx           | 10 +++++++++-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/ResourceTable/ResourceTable.scss b/src/components/ResourceTable/ResourceTable.scss
index 715b11ec..43ffe524 100644
--- a/src/components/ResourceTable/ResourceTable.scss
+++ b/src/components/ResourceTable/ResourceTable.scss
@@ -62,18 +62,26 @@ $breakpoint: 768px;
   border-spacing: 0;
 }
 
-.TableRowClickable {
-  cursor: pointer;
-}
-
 .TableRow {
-  &:hover .Cell {
+  &:hover {
     @include breakpoint-after($breakpoint) {
-      background: color('sky', 'lighter');
+      background-image: linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
     }
   }
 }
 
+.TableRowClickable {
+  cursor: pointer;
+
+  &:active {
+    background-image: linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15));
+  }
+}
+
+.TableRowSelected, .TableRowSelected:hover {
+  background-image: linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15));
+}
+
 .TableFoot {
   border-bottom: 0;
 }
diff --git a/src/components/ResourceTable/ResourceTable.tsx b/src/components/ResourceTable/ResourceTable.tsx
index 48f294b6..562a6585 100644
--- a/src/components/ResourceTable/ResourceTable.tsx
+++ b/src/components/ResourceTable/ResourceTable.tsx
@@ -551,6 +551,10 @@ export class ResourceTable extends React.PureComponent<
       ? classNames(styles.TableRowClickable)
       : '';
 
+    const tableRowSelectableClassName = this.state.selections[index]
+      ? classNames(styles.TableRowSelected)
+      : '';
+
     if (footerContent) {
       bodyCellHeights.pop();
     }
@@ -558,7 +562,11 @@ export class ResourceTable extends React.PureComponent<
     return (
       <tr
         key={`row-${index}`}
-        className={[className, tableRowClickableClassName].join(' ')}
+        className={[
+          className,
+          tableRowClickableClassName,
+          tableRowSelectableClassName,
+        ].join(' ')}
         onClick={() => {
           onRowClicked && onRowClicked(index);
         }}