Slight adjustments to the Table UI (#3615)

* Slight adjustments to the Table UI

* Adjust

* Final tweaks, ship it.

* Table header highlight

* Adjust

* Header padding

* comment line

* Adjust

* Final, enough playing.

* One tone lighter

* odd rows

* Lied... really the final

* background on rows (summry transparent)

CHANGELOG.md

@@ -5,8 +5,8 @@
 Contributed:
 
 - Add Crust network (Thanks to https://github.com/zikunfan)
-- i18n Chinese round-out (Thanks to Polkaworld)
-- i18n Italian (Thanks to https://github.com/fomod-in)
+- i18n comprehensive Chinese round-out (Thanks to Polkaworld)
+- i18n comprehensive Italian (Thanks to https://github.com/fomod-in)
 - Initial i18n Italian (Thanks to https://github.com/excerebrose)
 - i18n Bahasa Indonesian updates (Thanks to https://github.com/nzjourney)
 - Ad per-block/end-block vesting info (thanks to https://github.com/niklabh)
@@ -16,6 +16,7 @@ Contributed:
 Changes:
 
 - Add individual era-slash cancels on staking slashes page
+- Adjust staking slashes with per-era selector
 - Adjust max payout batch size (40 txs for 64 payees) based on staking payout constant
 - Add "copy seed" button to align with the extension UX on new accounts
 - Combine confirmation/backup of imports/new account into the modals (no double-modal)
@@ -23,6 +24,8 @@ Changes:
 - Fix detection of old/new proxy chains based on args to support Kusama 2023
 - Ensure all network-related configs are maintainable
 - Adjust average calcs for targets (optimization)
+- Adjust Table UI, crisper table layouts
+- Update WASM uploads to use `isWasm` from utilities
 
 
 ## 0.56.1 Aug 31, 2020

packages/page-staking/src/Slashes/Summary.tsx

@@ -36,9 +36,6 @@ function Header ({ slash: { era, nominators, reporters, total, validators } }: P
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t<string>('era')}>
-          {formatNumber(era)}
-        </CardSummary>
         <CardSummary label={t<string>('validators')}>
           {formatNumber(validators.length)}
         </CardSummary>

packages/react-components/src/Button/Group.tsx

@@ -18,10 +18,6 @@ function ButtonGroup ({ children, className = '', isCentered }: GroupProps): Rea
 export default React.memo(styled(ButtonGroup)`
   text-align: right;
 
-  :not(:first-child) {
-    margin-top: 0.75rem;
-  }
-
   &.isCentered {
     margin-bottom: 0.5rem;
     text-align: center;

packages/react-components/src/Column.tsx

@@ -38,7 +38,7 @@ export default translate(
     max-width: 100%;
     flex: 1 1;
     margin: 0;
-    padding: 0 0.5rem;
+    padding: 0 0.75rem;
 
     &:first-child {
       padding-left: 0;

packages/react-components/src/SummaryBox.tsx

@@ -21,9 +21,9 @@ function SummaryBox ({ children, className = '', isSmall }: Props): React.ReactE
 
 export default React.memo(styled(SummaryBox)`
   align-items: stretch;
-  // background: rgba(255, 255, 255, 0.35);
+  // background: rgba(255, 255, 255, 0.55);
   border-radius: 0.25rem;
-  // border-bottom: 1px solid #e6e6e6;
+  // border-bottom: 1px solid #ddd;
   display: flex;
   flex-wrap: no-wrap;
   justify-content: space-between;

packages/react-components/src/Table/Body.tsx

@@ -35,13 +35,13 @@ export default React.memo(styled(Body)`
     text-align: left;
     vertical-align: middle;
 
-    &:first-child {
-      border-left: 1px solid #e4e6e8;
-    }
+    // &:first-child {
+    //   border-left: 1px solid #e4e6e8;
+    // }
 
-    &:last-child {
-      border-right: 1px solid #e4e6e8;
-    }
+    // &:last-child {
+    //   border-right: 1px solid #e4e6e8;
+    // }
 
     label {
       display: block !important;
@@ -150,21 +150,18 @@ export default React.memo(styled(Body)`
   }
 
   tr {
-    &:nth-child(even) {
+    &:nth-child(odd) {
+      // background: rgba(255, 254, 253, 0.55);
       background: #faf8f6;
     }
 
-    &:nth-child(odd) {
-      background: white;
+    &:nth-child(even) {
+      background: rgba(255, 254, 253, 1);
     }
 
-    &:first-child td {
-      border-top: 1px solid #e4e6e8;
-    }
-
-    &:last-child td {
-      border-bottom: 1px solid #e4e6e8;
-    }
+    // &:last-child td {
+    //   border-bottom: 1px solid #e4e6e8;
+    // }
 
     &:first-child {
       td:first-child {

packages/react-components/src/Table/Head.tsx

@@ -48,15 +48,27 @@ function Head ({ className = '', filter, header, isEmpty }: Props): React.ReactE
 }
 
 export default React.memo(styled(Head)`
+  position: relative;
+  z-index: 1;
+
   th {
-    color: rgba(78, 78, 78, .66);
     font-family: sans-serif;
     font-weight: 100;
-    padding: 0.75rem 1rem 0.25rem;
+    padding: 0.75rem 1rem 0.5rem;
     text-align: right;
     vertical-align: baseline;
     white-space: nowrap;
 
+    &:first-child {
+      // border-left: 1px solid #e4e6e8;
+      border-top-left-radius: 0.25rem;
+    }
+
+    &:last-child {
+      // border-right: 1px solid #e4e6e8;
+      border-top-rights-radius: 0.25rem;
+    }
+
     h1, h2 {
       font-size: 1.75rem;
     }
@@ -85,11 +97,27 @@ export default React.memo(styled(Head)`
   }
 
   tr {
-    background: transparent;
+    background: rgba(255, 254, 253, 1);
     text-transform: lowercase;
 
-    &.filter th {
-      padding: 0;
+    // &:first-child th {
+    //   border-top: 1px solid #e4e6e8;
+    // }
+
+    // &:last-child th {
+    //   border-bottom: 1px solid #e4e6e8;
+    // }
+
+    &.filter {
+      .ui.input {
+       &:first-child {
+          margin-top: 0; // -1px;
+        }
+      }
+
+      th {
+        padding: 0;
+      }
     }
   }
 `);

packages/react-components/src/Table/index.tsx

@@ -36,7 +36,7 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
 
   return (
     <div className={`ui--Table ${className}`}>
-      <table className={isFixed ? 'isFixed' : 'isNotFixed'}>
+      <table className={`${(isFixed && !isEmpty) ? 'isFixed' : 'isNotFixed'}`}>
         <Head
           filter={filter}
           header={header}
@@ -63,10 +63,13 @@ export default React.memo(styled(Table)`
   width: 100%;
 
   table {
+    // background: rgba(255, 254, 253, 1);
     border-spacing: 0;
     max-width: 100%;
     overflow: hidden;
+    position: relative;
     width: 100%;
+    z-index: 1;
 
     &.isFixed {
       table-layout: fixed;
@@ -76,7 +79,8 @@ export default React.memo(styled(Table)`
       max-width: 100%;
       width: 100%;
 
-      td, &:not(.filter) th {
+      td,
+      &:not(.filter) th {
         &:first-child {
           padding-left: 1.5rem;
         }

packages/react-components/src/Tabs/index.tsx

@@ -61,7 +61,7 @@ function Tabs ({ basePath, className = '', hidden, isSequence, items }: Props):
 export default React.memo(styled(Tabs)`
   align-items: flex-end;
   background: #fff;
-  border-bottom: 1px solid #ddd;
+  // border-bottom: 1px solid #ddd;
   display: flex;
   margin: 0 -3rem;
   overflow-x: scroll;