From 20ae28d0f3ae26a98db435d0d6280c6422fbcda5 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 17 Feb 2021 21:15:26 +0100
Subject: [PATCH] Minor table adjustments (#4687)

---
 packages/apps/src/themes.ts                   | 12 ++++++------
 packages/page-bounties/src/Bounty.tsx         |  4 ++--
 packages/page-bounties/src/index.tsx          | 14 ++------------
 packages/page-bounties/src/theme.ts           |  6 ------
 packages/react-components/src/Table/Body.tsx  |  1 +
 packages/react-components/src/styles/index.ts |  2 +-
 6 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/packages/apps/src/themes.ts b/packages/apps/src/themes.ts
index 7e49be5645..82d16badae 100644
--- a/packages/apps/src/themes.ts
+++ b/packages/apps/src/themes.ts
@@ -23,11 +23,11 @@ export const darkTheme: ThemeDef = {
   bgMenu: '#26272c',
   bgMenuHover: 'rgba(255, 255, 255, 0.05)',
   bgPage: '#26272c',
-  bgTable: '#38393f',
-  bgTabs: '#38393f',
+  bgTable: '#3b3d3f',
+  bgTabs: '#3b3d3f',
   bgToggle: '#58595f',
-  borderTable: 'transparent',
-  borderTabs: 'transparent',
+  borderTable: '#343536',
+  borderTabs: '#343536',
   color: 'rgba(244, 242, 240, 0.9)',
   colorCheckbox: 'rgba(78, 78, 78, 0.66)',
   colorError: 'rgba(255, 83, 83, 0.8)',
@@ -49,8 +49,8 @@ export const lightTheme: ThemeDef = {
   bgTable: '#fff',
   bgTabs: '#fff',
   bgToggle: '#e4e5e6',
-  borderTable: '#eeecea',
-  borderTabs: '#eeecea',
+  borderTable: '#f1efed',
+  borderTabs: '#f1efed',
   color: '#4e4e4e',
   colorCheckbox: 'rgba(34, 36, 38, 0.15)',
   colorError: 'rgba(139, 0, 0)',
diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx
index 7340f586bc..b878def96e 100644
--- a/packages/page-bounties/src/Bounty.tsx
+++ b/packages/page-bounties/src/Bounty.tsx
@@ -20,7 +20,7 @@ import BountyStatusView from './BountyStatusView';
 import Curator from './Curator';
 import DueBlocks from './DueBlocks';
 import { useBountyStatus } from './hooks';
-import { bountyBorderColor, bountyLabelColor } from './theme';
+import { bountyLabelColor } from './theme';
 import { useTranslation } from './translate';
 import VotersColumn from './VotersColumn';
 
@@ -245,7 +245,7 @@ export default React.memo(styled(Bounty)(({ theme }: ThemeProps) => `
       justify-content: center;
       width: 1.7rem;
       height: 1.7rem;
-      border: 1px solid ${bountyBorderColor[theme.theme]};
+      border: 1px solid ${theme.borderTable};
       border-radius: 4px;
       cursor: pointer;
     }
diff --git a/packages/page-bounties/src/index.tsx b/packages/page-bounties/src/index.tsx
index a1624274bf..45672defc6 100644
--- a/packages/page-bounties/src/index.tsx
+++ b/packages/page-bounties/src/index.tsx
@@ -8,7 +8,6 @@ import { Tabs } from '@polkadot/react-components';
 import { ThemeProps } from '@polkadot/react-components/types';
 
 import Bounties from './Bounties';
-import { bountyBorderColor } from './theme';
 import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
@@ -63,15 +62,6 @@ export default React.memo(styled(BountiesApp)(({ theme }: ThemeProps) => `
     vertical-align: baseline;
     font-size: 1rem;
     line-height: 1.7rem;
-    border-bottom: 1px solid ${bountyBorderColor[theme.theme]};
-
-    &:first-child {
-      border-left: 1px solid  ${bountyBorderColor[theme.theme]};
-    }
-
-    &:last-child {
-      border-right: 1px solid  ${bountyBorderColor[theme.theme]};
-    }
   }
 
   tbody tr {
@@ -89,7 +79,7 @@ export default React.memo(styled(BountiesApp)(({ theme }: ThemeProps) => `
 
     &:first-child {
       td {
-        border-top: 1px solid  ${bountyBorderColor[theme.theme]};
+        border-top: 1px solid  ${theme.borderTable};
       }
 
       td:first-child {
@@ -103,7 +93,7 @@ export default React.memo(styled(BountiesApp)(({ theme }: ThemeProps) => `
 
     &:last-child {
       td {
-        border-bottom: 1px solid  ${bountyBorderColor[theme.theme]};
+        border-bottom: 1px solid ${theme.borderTable};
       }
 
       td:first-child {
diff --git a/packages/page-bounties/src/theme.ts b/packages/page-bounties/src/theme.ts
index 15e5dc99ee..b48579289a 100644
--- a/packages/page-bounties/src/theme.ts
+++ b/packages/page-bounties/src/theme.ts
@@ -6,12 +6,6 @@ type bountyTheme = {
   light:string;
 }
 
-export const bountyBorderColor: bountyTheme = {
-  // align with table
-  dark: '#26272c', // '#2f313c',
-  light: '#eeecea' // '#dfdfdf'
-};
-
 export const bountyLabelColor: bountyTheme = {
   dark: '#757575',
   light: '#8B8B8B'
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index 46fda7bb67..4dda2cced4 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -35,6 +35,7 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
   position: relative;
 
   td {
+    border-bottom: 1px solid ${theme.borderTable};
     padding: 0.75rem 1rem;
     text-align: left;
     vertical-align: middle;
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 9a8f74b721..701d871619 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -76,7 +76,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
   }
 
   .highlight--bg-faint:before {
-    opacity: 0.0375;
+    opacity: 0.025;
   }
 
   .highlight--bg-light:before {