chore(table): fix table header text alignment

joinmarket-webui · Jan 6, 2024 · 7af12fe · 7af12fe
1 parent 44d1ad8
commit 7af12fe
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 39 deletions.
diff --git a/src/components/EarnReport.tsx b/src/components/EarnReport.tsx
@@ -10,8 +10,8 @@ import * as Api from '../libs/JmWalletApi'
 import { useSettings } from '../context/SettingsContext'
 import Balance from './Balance'
 import Sprite from './Sprite'
-import styles from './EarnReport.module.css'
 import TablePagination from './TablePagination'
+import styles from './EarnReport.module.css'
 
 const SORT_KEYS = {
   timestamp: 'TIMESTAMP',
@@ -27,20 +27,16 @@ const TABLE_THEME = {
     font-size: 0.9rem;
   `,
   BaseCell: `
-    &:nth-of-type(2) button {
-      display: flex;
+    &:nth-of-type(2) div div {
       justify-content: end;
     }
-    &:nth-of-type(3) button {
-      display: flex;
+    &:nth-of-type(3) div div {
       justify-content: end;
     }
-    &:nth-of-type(4) button {
-      display: flex;
+    &:nth-of-type(4) div div {
       justify-content: end;
     }
-    &:nth-of-type(5) button {
-      display: flex;
+    &:nth-of-type(5) div div {
       justify-content: end;
     }
   `,

diff --git a/src/components/Orderbook.tsx b/src/components/Orderbook.tsx
@@ -23,28 +23,22 @@ const TABLE_THEME = {
     font-size: 0.9rem;
   `,
   BaseCell: `
-    &:nth-of-type(3) button {
-      display: flex;
+    &:nth-of-type(3) div div {
       justify-content: center;
     }
-    &:nth-of-type(4) button {
-      display: flex;
+    &:nth-of-type(4) div div {
       justify-content: end;
     }
-    &:nth-of-type(5) button {
-      display: flex;
+    &:nth-of-type(5) div div {
       justify-content: end;
     }
-    &:nth-of-type(6) button {
-      display: flex;
+    &:nth-of-type(6) div div {
       justify-content: end;
     }
-    &:nth-of-type(7) button {
-      display: flex;
+    &:nth-of-type(7) div div {
       justify-content: end;
     }
-    &:nth-of-type(8) button {
-      display: flex;
+    &:nth-of-type(8) div div {
       justify-content: end;
     }
   `,

diff --git a/src/components/jar_details/UtxoList.tsx b/src/components/jar_details/UtxoList.tsx
@@ -64,18 +64,14 @@ const utxoTags = (utxo: Utxo, walletInfo: WalletInfo, t: TFunction): Tag[] => {
 
 const utxoIcon = (utxo: Utxo, t: TFunction) => {
   if (fb.utxo.isFidelityBond(utxo)) {
-    return (
-      <>
-        {withTooltip({
-          node: (
-            <div className={styles.utxoIcon}>
-              <Sprite className={styles.iconLocked} symbol="timelock" width="20" height="20" />
-            </div>
-          ),
-          tooltip: <div>{t('jar_details.utxo_list.utxo_tooltip_locktime', { locktime: utxo.locktime })}</div>,
-        })}
-      </>
-    )
+    return withTooltip({
+      node: (
+        <div className={styles.utxoIcon}>
+          <Sprite className={styles.iconLocked} symbol="timelock" width="20" height="20" />
+        </div>
+      ),
+      tooltip: <div>{t('jar_details.utxo_list.utxo_tooltip_locktime', { locktime: utxo.locktime })}</div>,
+    })
   } else if (utxo.frozen) {
     return (
       <div className={styles.utxoIcon}>
@@ -121,15 +117,13 @@ const TABLE_THEME = {
       text-align: center;
       padding: 0 !important;
     }
-    &:nth-of-type(4) button {
-      display: flex;
+    &:nth-of-type(4) div div {
       justify-content: end;
     }
     &:nth-of-type(6) {
       padding: 0 !important;
     }
-    &:nth-of-type(6) button {
-      display: flex;
+    &:nth-of-type(6) div div {
       justify-content: center;
     }
   `,
@@ -144,6 +138,9 @@ const TABLE_THEME = {
       display: flex;
       justify-content: center;
     }
+    &:nth-of-type(8) {
+      text-align: right;
+    }
   `,
   Row: `
     &.row-select-selected {
@@ -336,13 +333,13 @@ const UtxoList = ({
                       <div className="d-block d-lg-none">
                         {withTooltip({
                           node: <code>{shortenStringMiddle(item.address, 16)}</code>,
-                          tooltip: <div className="break-word">{item.address}</div>,
+                          tooltip: <div className="slashed-zeroes">{item.address}</div>,
                         })}
                       </div>
                       <div className="d-none d-lg-block d-xl-none">
                         {withTooltip({
                           node: <code>{shortenStringMiddle(item.address, 32)}</code>,
-                          tooltip: <div className="break-word">{item.address}</div>,
+                          tooltip: <div className="slashed-zeroes">{item.address}</div>,
                         })}
                       </div>
                       <div className="d-none d-xl-block">