From 2f4f6f675ee4e330b6dac61973c47d4084c2dc3a Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sun, 8 Jan 2023 18:08:18 +0200
Subject: [PATCH] Misc. small fixes (#8730)

---
 packages/apps/public/index.html               |  4 +--
 packages/apps/src/Endpoints/Network.tsx       |  6 ++++
 .../page-staking/src/Payouts/PayButton.tsx    |  1 +
 packages/react-components/src/Table/Table.tsx | 29 ++++++++++---------
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index f1648c8d35..8c6d02b603 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -36,7 +36,7 @@
         --bg-sidebar: #1a1b20;
         --bg-static-extra: rgba(200, 200, 200, 0.1);
         --border-input: rgba(234, 236, 238, .15);
-        --border-table: #26272c; /* #343536; */
+        --border-table: #343536;
         --border-tabs: #343536;
         --color-checkbox: rgba(78, 78, 78, 0.66);
         --color-error: rgba(255, 83, 83, 0.8);
@@ -59,7 +59,7 @@
         --bg-sidebar: #fafafa;
         --bg-static-extra: rgba(200, 200, 200, 0.1);
         --border-input: rgba(34, 36, 38, .15);
-        --border-table: #f5f3f1; /* #f1efed; */
+        --border-table: #efedeb; /* #f1efed; */
         --border-tabs: #f1efed;
         --color-checkbox: rgba(34, 36, 38, 0.15);
         --color-error: rgba(139, 0, 0);
diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx
index 789949496d..d405303585 100644
--- a/packages/apps/src/Endpoints/Network.tsx
+++ b/packages/apps/src/Endpoints/Network.tsx
@@ -119,4 +119,10 @@ export default React.memo(styled(NetworkDisplay)`
       }
     }
   }
+
+  // we jiggle our labels somewhat...
+  label {
+    font-size: var(--font-size-small);
+    text-transform: none;
+  }
 `);
diff --git a/packages/page-staking/src/Payouts/PayButton.tsx b/packages/page-staking/src/Payouts/PayButton.tsx
index 09c9432e9a..51c79827af 100644
--- a/packages/page-staking/src/Payouts/PayButton.tsx
+++ b/packages/page-staking/src/Payouts/PayButton.tsx
@@ -155,6 +155,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
 
 export default React.memo(styled(PayButton)`
   .ui--AddressMini.padded.addressStatic {
+    display: inline-block;
     padding-top: 0.5rem;
 
     .ui--AddressMini-info {
diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx
index f9c7a8c82d..d47dc4f3b9 100644
--- a/packages/react-components/src/Table/Table.tsx
+++ b/packages/react-components/src/Table/Table.tsx
@@ -38,7 +38,6 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
     [bodyChildren, isEmpty, isSplit]
   );
 
-  const tableClassName = `${(isFixed && !isEmpty) ? 'isFixed' : 'isNotFixed'} ${isInline ? 'isInline' : ''}`;
   const headerNode = (
     <Head
       filter={filter}
@@ -49,18 +48,20 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
     </Head>
   );
 
+  const tableClassName = `${(isFixed && !isEmpty) ? 'isFixed' : 'isNotFixed'} ${isInline ? 'isInline' : ''} ${splitBody ? 'noMargin' : ''}`;
+
   return (
     <div className={`ui--Table ${className} ${splitBody ? 'isSplit' : ''}`}>
       {legend}
       {splitBody
         ? (
           <>
-            <table className={`${tableClassName} noMargin`}>
+            <table className={tableClassName}>
               {headerNode}
             </table>
             <Columar isPadded={false}>
               <Columar.Column>
-                <table className={`${tableClassName} noMargin`}>
+                <table className={tableClassName}>
                   <Body>
                     {splitBody[0]}
                   </Body>
@@ -98,7 +99,7 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
 }
 
 const BORDER_RADIUS = '0.5rem';
-const BORDER_WIDTH = '1px';
+const BORDER_SOLID = '1px solid var(--bg-page)'; // var(--border-table)
 
 export default React.memo(styled(Table)`
   max-width: 100%;
@@ -185,11 +186,11 @@ export default React.memo(styled(Table)`
       }
 
       &:first-child {
-        border-left: ${BORDER_WIDTH} solid var(--border-table);
+        border-left: ${BORDER_SOLID};
       }
 
       &:last-child {
-        border-right: ${BORDER_WIDTH} solid var(--border-table);
+        border-right: ${BORDER_SOLID};
       }
 
       label {
@@ -382,8 +383,8 @@ export default React.memo(styled(Table)`
     tr {
       &:not(.isExpanded) {
         td {
-          border-top: ${BORDER_WIDTH} solid var(--border-table);
-          border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+          border-top: ${BORDER_SOLID};
+          border-bottom: ${BORDER_SOLID};
 
           &:first-child {
             border-top-left-radius: ${BORDER_RADIUS};
@@ -400,7 +401,7 @@ export default React.memo(styled(Table)`
       &.isExpanded {
         &.isFirst {
           td {
-            border-top: ${BORDER_WIDTH} solid var(--border-table);
+            border-top: ${BORDER_SOLID};
 
             &:first-child {
               border-top-left-radius: ${BORDER_RADIUS};
@@ -414,7 +415,7 @@ export default React.memo(styled(Table)`
 
         &.isLast {
           td {
-            border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+            border-bottom: ${BORDER_SOLID};
 
             &:first-child {
               border-bottom-left-radius: ${BORDER_RADIUS};
@@ -474,7 +475,7 @@ export default React.memo(styled(Table)`
     tr {
       &:first-child {
         th {
-          border-top: ${BORDER_WIDTH} solid var(--border-table);
+          border-top: ${BORDER_SOLID};
 
           &:first-child {
             border-top-left-radius: ${BORDER_RADIUS};
@@ -488,7 +489,7 @@ export default React.memo(styled(Table)`
 
       &:last-child {
         th {
-          border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+          border-bottom: ${BORDER_SOLID};
           padding-top: 1rem;
 
           &:first-child {
@@ -503,11 +504,11 @@ export default React.memo(styled(Table)`
 
       th {
         &:first-child {
-          border-left: ${BORDER_WIDTH} solid var(--border-table);
+          border-left: ${BORDER_SOLID};
         }
 
         &:last-child {
-          border-right: ${BORDER_WIDTH} solid var(--border-table);
+          border-right: ${BORDER_SOLID};
         }
       }
     }