Merge pull request #4754 from LiskHQ/4735-events-table-fix

Fix events table styling
LiskHQ · Jan 23, 2023 · d626c5f · d626c5f
2 parents e88b43c + 6e92c15
commit d626c5f
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 26 deletions.
diff --git a/src/modules/block/components/blockDetails/blockDetails.css b/src/modules/block/components/blockDetails/blockDetails.css
@@ -46,4 +46,9 @@ h1 {
 
 .wrapper {
   margin-bottom: 25px;
+
+  & .content {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
diff --git a/src/modules/block/components/blockDetails/blockDetails.js b/src/modules/block/components/blockDetails/blockDetails.js
@@ -176,7 +176,7 @@ const BlockDetails = ({
         <BoxHeader>
           <BoxTabs {...tabs} />
         </BoxHeader>
-        <BoxContent>
+        <BoxContent className={styles.content}>
           {activeTab === 'transactions'
             ? <Transactions blockId={id} />
             : <TransactionEvents blockId={id} />}

diff --git a/src/modules/transaction/components/TransactionEvents/TransactionEvents.css b/src/modules/transaction/components/TransactionEvents/TransactionEvents.css
@@ -1,5 +1,6 @@
 .content {
-  padding: 0 !important;
+  padding: 0 20px !important;
+  margin-top: -10px !important;
 }
 
 .wrapper {
@@ -57,12 +58,18 @@ h1 {
   padding: 5px 0px;
   position: sticky;
 
+  &::after {
+    left: 0;
+    right: 0;
+  }
+
   & > div:first-child {
     padding-left: 0px;
     padding-right: 16px;
   }
 
-  & > div:nth-child(3) {
+  & > div:nth-child(3),
+  & > div:nth-child(4) {
     padding-left: 8px !important;
   }
 

diff --git a/src/modules/transaction/components/TransactionEvents/TransactionEventsHeaderMap.js b/src/modules/transaction/components/TransactionEvents/TransactionEventsHeaderMap.js
@@ -7,30 +7,30 @@ const walletEventHeaderMap = (t) => [
   },
   {
     title: t('Transaction ID'),
-    classList: grid['col-xs-4'],
+    classList: grid['col-xs-3'],
   },
   {
     title: t('Module'),
     classList: grid['col-xs-3'],
   },
   {
     title: t('Name'),
-    classList: grid['col-xs-2'],
+    classList: grid['col-xs-3'],
   },
 ];
 
 const defaultEventHeaderMap = (t) => [
   {
     title: t('Index'),
-    classList: grid['col-xs-4'],
+    classList: grid['col-xs-3'],
   },
   {
     title: t('Module'),
     classList: grid['col-xs-4'],
   },
   {
     title: t('Name'),
-    classList: grid['col-xs-3'],
+    classList: grid['col-xs-4'],
   },
 ];
 

diff --git a/src/modules/transaction/components/TransactionEventsRow/TransactionEventsRow.css b/src/modules/transaction/components/TransactionEventsRow/TransactionEventsRow.css
@@ -14,14 +14,6 @@
     text-transform: capitalize;
   }
 
-  &::before {
-    content: '';
-    min-width: 100%;
-    position: absolute;
-    height: 1px;
-    border-top: 1px var(--color-platinum) solid;
-  }
-
   & > div {
     display: flex;
     flex-direction: row;
@@ -100,6 +92,14 @@
 
 .rowWrapper {
   width: 100%;
+
+  &::after {
+    content: '';
+    min-width: calc(100% - 40px);
+    position: absolute;
+    height: 1px;
+    background-color: var(--color-platinum);
+  }
 }
 
 .jsonContainer {

diff --git a/src/modules/transaction/components/TransactionEventsRow/TransactionEventsRow.js b/src/modules/transaction/components/TransactionEventsRow/TransactionEventsRow.js
@@ -7,7 +7,7 @@ import {
   EventName,
   CollapseToggle,
   BlockHeight,
-  TransctionID,
+  TransactionID,
 } from './components';
 
 const TransactionEventRow = ({ data: transactionEvent, isWallet }) => {
@@ -25,9 +25,9 @@ const TransactionEventRow = ({ data: transactionEvent, isWallet }) => {
     <div data-testid="transaction-event-row-wrapper" className={styles.rowWrapper}>
       <div className={`transaction-event-row ${styles.container}`}>
         {isWallet ? <BlockHeight height={height} id={id} /> : <EventIndex id={index} />}
-        {isWallet && topics?.length > 0 && <TransctionID id={topics[0]} />}
+        {isWallet && topics?.length > 0 && <TransactionID id={topics[0]} />}
         <EventModule module={module} isWallet={isWallet} />
-        <EventName name={name} isWallet={isWallet}  />
+        <EventName name={name} isWallet={isWallet} />
         <CollapseToggle
           isWallet={isWallet}
           isCollapsed={isCollapsed}

diff --git a/src/modules/transaction/components/TransactionEventsRow/components.js b/src/modules/transaction/components/TransactionEventsRow/components.js
@@ -1,17 +1,19 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import Icon from 'src/theme/Icon';
 import { truncateTransactionID } from 'src/modules/wallet/utils/account';
-import { Link } from 'react-router-dom';
 
 import { TertiaryButton } from 'src/theme/buttons';
 import styles from './TransactionEventsRow.css';
 
-export const TransctionID = ({ id }) => (
-  <div className={`event-hash ${styles.transactionID} ${grid['col-xs-4']}`}>
-    <Link to={`/transactions/details?transactionID=${id}`}>
-      {id.length === 64 ? truncateTransactionID(id) : '-'}
-    </Link>
+export const TransactionID = ({ id }) => (
+  <div className={`event-hash ${styles.transactionID} ${grid['col-xs-3']}`}>
+    {id.length === 64 ? (
+      <Link to={`/transactions/details?transactionID=${id}`}>{truncateTransactionID(id)}</Link>
+    ) : (
+      '-'
+    )}
   </div>
 );
 
@@ -22,7 +24,7 @@ export const BlockHeight = ({ height, id }) => (
 );
 
 export const EventName = ({ name, isWallet }) => (
-  <div className={`${grid[`col-xs-${isWallet ? 2 : 3}`]} event-action ${styles.eventAction}`}>
+  <div className={`${grid[`col-xs-${isWallet ? 3 : 4}`]} event-action ${styles.eventAction}`}>
     {name}
   </div>
 );
@@ -33,7 +35,7 @@ export const EventModule = ({ module, isWallet }) => (
   </div>
 );
 
-export const EventIndex = ({ id }) => <div className={grid['col-xs-4']}>{id}</div>;
+export const EventIndex = ({ id }) => <div className={grid['col-xs-3']}>{id}</div>;
 
 export const CollapseToggle = ({ isCollapsed, onToggle }) => (
   <div className={`${styles.toggleButton} ${grid['col-xs-1']}`}>