From 86e883b95292caf4e734e5207af7b456766d3fff Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 29 Mar 2020 22:44:27 +0200
Subject: [PATCH] Adjust table (header) backgrounds (#2481)

* Adjust table (header) backgrounds

* Summary padding
---
 packages/apps/src/Apps.tsx                    |  4 +-
 packages/apps/src/Content/index.tsx           |  2 +-
 .../react-components/src/LinkExternal.tsx     |  4 --
 packages/react-components/src/SummaryBox.tsx  |  3 +-
 packages/react-components/src/Table.tsx       | 38 +++++++++++++++++--
 packages/react-components/src/styles/index.ts |  7 +---
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index ef2dc4d813..43d808aef3 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -123,13 +123,13 @@ export default React.memo(styled(Apps)`
     }
 
     a.apps--SideBar-Item-NavLink-active {
-      background: #f2f2f2;
+      background: #f5f5f5;
       border-radius: 0.28571429rem 0 0 0.28571429rem;
       // border-bottom: 2px solid transparent;
       color: #3f3f3f;
 
       &:hover {
-        background: #f2f2f2;
+        background: #f5f5f5;
         color: #3f3f3f;
         margin-right: 0;
       }
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index 6384feac83..9e8e5ca39c 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -79,7 +79,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
 }
 
 export default React.memo(styled(Content)`
-  background: #f2f2f2;
+  background: #f5f5f5;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index 596115df6b..3d267bb143 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@@ -81,10 +81,6 @@ function LinkExternal ({ className, data, hash, type, withShort }: Props): React
 export default React.memo(styled(LinkExternal)`
   text-align: right;
 
-  &:not(.withShort) {
-    margin-top: 0.75rem;
-  }
-
   > div {
     display: block;
     whitespace: nowrap;
diff --git a/packages/react-components/src/SummaryBox.tsx b/packages/react-components/src/SummaryBox.tsx
index a1d2c7c0d8..c551824116 100644
--- a/packages/react-components/src/SummaryBox.tsx
+++ b/packages/react-components/src/SummaryBox.tsx
@@ -26,7 +26,6 @@ export default React.memo(styled(SummaryBox)`
   display: flex;
   flex-wrap: no-wrap;
   justify-content: space-between;
-  margin-bottom: 1.4rem;
 
   > section {
     display: flex;
@@ -58,7 +57,7 @@ export default React.memo(styled(SummaryBox)`
   }
 
   @media(min-width: 768px) {
-    margin-bottom: 2.8rem;
+    margin-bottom: 1.5rem;
   }
 
   .ui.label {
diff --git a/packages/react-components/src/Table.tsx b/packages/react-components/src/Table.tsx
index dd2b67bfe5..18fd3b19bd 100644
--- a/packages/react-components/src/Table.tsx
+++ b/packages/react-components/src/Table.tsx
@@ -82,18 +82,18 @@ const Memo = React.memo(styled(Table)`
   }
 
   table {
-    border: 1px solid #eee;
+    // border: 1px solid #e6e6e6;
     border-radius: 0.25rem;
     border-spacing: 0;
     overflow: hidden;
     width: 100%;
 
     thead tr {
-      background: #f9f9f9;
+      background: #f5f5f5;
       text-transform: lowercase;
 
       &.filter th {
-        padding: 0.25rem 0.5rem 0;
+        padding: 0;
       }
     }
 
@@ -101,7 +101,37 @@ const Memo = React.memo(styled(Table)`
       background: white;
 
       td {
-        border-top: 1px solid #f2f2f2;
+        border-top: 1px solid #e6e6e6;
+
+        &:first-child {
+          border-left: 1px solid #e6e6e6;
+        }
+
+        &:last-child {
+          border-right: 1px solid #e6e6e6;
+        }
+      }
+
+      &:first-child td {
+        &:first-child {
+          border-radius: 0.25rem 0 0 0;
+        }
+
+        &:last-child {
+          border-radius: 0 0.25rem 0 0;
+        }
+      }
+
+      &:last-child td {
+        border-bottom: 1px solid #e6e6e6;
+
+        &:first-child {
+          border-radius: 0 0 0 0.25rem;
+        }
+
+        &:last-child {
+          border-radius: 0 0 0.25rem 0;
+        }
       }
     }
 
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 05d2384ceb..7814513dbc 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -4,7 +4,6 @@
 
 import { createGlobalStyle } from 'styled-components';
 
-import media from '../media';
 import cssComponents from './components';
 import cssForm from './form';
 import cssMedia from './media';
@@ -210,13 +209,9 @@ export default createGlobalStyle<Props>`
   }
 
   header {
-    margin-bottom: 1.4rem;
+    margin-bottom: 1.5rem;
     text-align: center;
 
-    ${media.TABLET`
-      margin-bottom: 2rem;
-   `}
-
     > article {
       background: transparent;
     }