From 783beb45e074a9821f2b9de3fa28e16317ba87e5 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 3 May 2020 10:13:03 +0200
Subject: [PATCH] Small table background adjustments (#2682)

---
 packages/page-staking/src/Targets/index.tsx  |  4 ++--
 packages/react-components/src/Table/Body.tsx | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx
index c024907467..189c22f5c3 100644
--- a/packages/page-staking/src/Targets/index.tsx
+++ b/packages/page-staking/src/Targets/index.tsx
@@ -92,12 +92,12 @@ function Targets ({ className, ownStashes, targets: { calcWith, lastReward, nomi
     [t('validators'), 'start', 4],
     ...['rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header) => [
       <>{labels[header]}<Icon name={sortBy === header ? (sortFromMax ? 'chevron down' : 'chevron up') : 'minus'} /></>,
-      `isClickable ${sortBy === header && 'ui--highlight--border'} number`,
+      sorted ? `isClickable ${sortBy === header && 'ui--highlight--border'} number` : 'number',
       1,
       (): void => _sort(header as 'rankComm')
     ]),
     []
-  ], [_sort, labels, sortBy, sortFromMax, t]);
+  ], [_sort, labels, sortBy, sorted, sortFromMax, t]);
 
   const filter = useMemo(() => (
     sorted && (
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index 6596f2aca6..d300c01da1 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -30,6 +30,8 @@ function Body ({ children, className, empty, emptySpinner }: Props): React.React
 }
 
 export default React.memo(styled(Body)`
+  background: white;
+
   td {
     border-top: 1px solid #e6e6e6;
     padding: 0.75rem 1rem;
@@ -136,8 +138,6 @@ export default React.memo(styled(Body)`
   }
 
   tr {
-    background: white;
-
     &.isHighlight td {
       background: #ffffed;
     }
@@ -148,21 +148,21 @@ export default React.memo(styled(Body)`
 
     &:first-child {
       td:first-child {
-        border-radius: 0.25rem 0 0 0;
+        border-top-left-radius: 0.25rem;
       }
 
       td:last-child {
-        border-radius: 0 0.25rem 0 0;
+        border-top-right-radius: 0.25rem;
       }
     }
 
     &:last-child {
       td:first-child {
-        border-radius: 0 0 0 0.25rem;
+        border-bottom-left-radius: 0.25rem;
       }
 
       td:last-child {
-        border-radius: 0 0 0.25rem 0;
+        border-bottom-right-radius: 0.25rem;
       }
     }