From c199c57fdaecbe529bafa33bd578679d2f0ce4d2 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 9 Feb 2023 23:09:33 +0200
Subject: [PATCH] Adjust table spacing (somewhat) (#8998)

---
 packages/apps-electron/webpack.renderer.cjs   |  4 ---
 packages/apps/public/index.html               |  8 ------
 packages/apps/webpack.config.cjs              |  4 ---
 packages/react-components/src/Table/index.tsx | 25 +++++++++----------
 4 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/packages/apps-electron/webpack.renderer.cjs b/packages/apps-electron/webpack.renderer.cjs
index e1a271b66c..66b7a747f5 100644
--- a/packages/apps-electron/webpack.renderer.cjs
+++ b/packages/apps-electron/webpack.renderer.cjs
@@ -28,10 +28,6 @@ module.exports = merge(
       }),
       new HtmlWebpackPlugin({
         PAGE_TITLE: 'Polkadot/Substrate Portal',
-        // see index.html for the work needed to support this,
-        // aka manually injection without minification
-        // (also in apps/webpack.config.js)
-        inject: false,
         minify: false,
         template: path.join(context, '../apps/public/index.html')
       })
diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 1d16ca1dd0..92e1ea8b0e 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -118,14 +118,6 @@
         opacity: 0.15;
       }
     </style>
-    <!--
-      Manually output the head tags individually to gain newlines to
-      helps us with git diffs not getting out of hand. This file is
-      therefore also not being minimized, but that _should_ be ok.
-
-      https://stackoverflow.com/a/62992909
-    --><% for (const tag of htmlWebpackPlugin.tags.headTags) { %>
-    <%= tag %><% } %>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/apps/webpack.config.cjs b/packages/apps/webpack.config.cjs
index 2c8e7d2131..38ca8ab709 100644
--- a/packages/apps/webpack.config.cjs
+++ b/packages/apps/webpack.config.cjs
@@ -23,10 +23,6 @@ module.exports = merge(
       new SubresourceIntegrityPlugin(),
       new HtmlWebpackPlugin({
         PAGE_TITLE: 'Polkadot/Substrate Portal',
-        // see index.html for the work needed to support this,
-        // aka manually injection without minification
-        // (also in apps-electron/webpack.renderer.js)
-        inject: false,
         minify: false,
         template: path.join(context, `${hasPublic ? 'public/' : ''}index.html`)
       })
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index 5d59e1f020..d85c4d5a77 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -96,8 +96,10 @@ function TableBase ({ children, className = '', empty, emptySpinner, filter, foo
   );
 }
 
-const BORDER_RADIUS = '0.5rem';
-const BORDER_SOLID = '1px solid var(--bg-page)';
+const BASE_BORDER = 0.125;
+const BORDER_SIDE = `${BASE_BORDER * 1}rem solid var(--bg-page)`;
+const BORDER_TOP = `${BASE_BORDER * 2}rem solid var(--bg-page)`;
+const BORDER_RADIUS = `${BASE_BORDER * 4}rem`;
 
 const StyledDiv = styled.div`
   max-width: 100%;
@@ -120,6 +122,7 @@ const StyledDiv = styled.div`
   }
 
   table {
+    border-collapse: collapse;
     border-spacing: 0;
     max-width: 100%;
     overflow: hidden;
@@ -194,11 +197,11 @@ const StyledDiv = styled.div`
       }
 
       &:first-child {
-        border-left: ${BORDER_SOLID};
+        border-left: ${BORDER_SIDE};
       }
 
       &:last-child {
-        border-right: ${BORDER_SOLID};
+        border-right: ${BORDER_SIDE};
       }
 
       label {
@@ -410,8 +413,7 @@ const StyledDiv = styled.div`
     tr {
       &:not(.isExpanded) {
         td {
-          border-top: ${BORDER_SOLID};
-          border-bottom: ${BORDER_SOLID};
+          border-top: ${BORDER_TOP};
 
           &:first-child {
             border-top-left-radius: ${BORDER_RADIUS};
@@ -428,7 +430,7 @@ const StyledDiv = styled.div`
       &.isExpanded {
         &.isFirst {
           td {
-            border-top: ${BORDER_SOLID};
+            border-top: ${BORDER_TOP};
 
             &:first-child {
               border-top-left-radius: ${BORDER_RADIUS};
@@ -442,8 +444,6 @@ const StyledDiv = styled.div`
 
         &.isLast {
           td {
-            border-bottom: ${BORDER_SOLID};
-
             &:first-child {
               border-bottom-left-radius: ${BORDER_RADIUS};
             }
@@ -502,7 +502,7 @@ const StyledDiv = styled.div`
     tr {
       &:first-child {
         th {
-          border-top: ${BORDER_SOLID};
+          border-top: ${BORDER_TOP};
 
           &:first-child {
             border-top-left-radius: ${BORDER_RADIUS};
@@ -516,7 +516,6 @@ const StyledDiv = styled.div`
 
       &:last-child {
         th {
-          border-bottom: ${BORDER_SOLID};
           padding-top: 1rem;
 
           &:first-child {
@@ -531,11 +530,11 @@ const StyledDiv = styled.div`
 
       th {
         &:first-child {
-          border-left: ${BORDER_SOLID};
+          border-left: ${BORDER_SIDE};
         }
 
         &:last-child {
-          border-right: ${BORDER_SOLID};
+          border-right: ${BORDER_SIDE};
         }
       }
     }