Minor table adjustments (#4687)

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)',

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;
     }

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 {

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'

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;

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 {