Adjust table (header) backgrounds (#2481)

* Adjust table (header) backgrounds

* Summary padding

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

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;

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;

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 {

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

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