fix: HTML table text alignment issues (#1086)

* Using classes instead of inline css, fixed up a few text alignment mismatches

* Centered column

Author: Klakurka

components/Admin/RegisteredUsers.tsx

@@ -31,10 +31,12 @@ export default function RegisteredUsers ({ users }: IProps): JSX.Element {
       )
     },
     {
-      Header: 'Admin',
+      Header: () => (<div className="text-center">Admin</div>),
       accessor: 'isAdmin',
       Cell: ({ cell }: CellProps<UserWithSupertokens>) => (
-        cell.value === true ? <span className={style.admin}>Yes</span> : 'No'
+        <div className="text-center">
+          {cell.value === true ? <span className={style.admin}>Yes</span> : 'No'}
+        </div>
       )
     }
   ]

components/Admin/SubscribedAddresses.tsx

@@ -27,7 +27,7 @@ export default function SubscribedAddresses (): JSX.Element {
         }
       },
       {
-        Header: 'View',
+        Header: () => (<div className="text-center">View</div>),
         accessor: 'view',
         Cell: (cellProps: any) => {
           return <a href={`https://explorer.e.cash/address/${cellProps.cell.row.values.address as string}`} target="_blank" rel="noopener noreferrer" className="table-eye-ctn">

components/Dashboard/Leaderboard.tsx

@@ -35,7 +35,7 @@ export default ({ buttons, totalString, currencyId }: IProps): JSX.Element => {
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'right' }}>{totalString} Revenue</div>),
+        Header: () => (<div className="text-right">{totalString} Revenue</div>),
         accessor: totalRevenueAcessor,
         id: 'revenue',
         sortType: compareNumericString,
@@ -46,7 +46,7 @@ export default ({ buttons, totalString, currencyId }: IProps): JSX.Element => {
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'right' }}>{totalString} Payments</div>),
+        Header: () => (<div className="text-right">{totalString} Payments</div>),
         accessor: 'total.payments',
         Cell: (cellProps) => {
           return <div style={{ textAlign: 'right', fontWeight: '600' }}>{cellProps.cell.value}</div>

components/Transaction/PaybuttonTransactions.tsx

@@ -85,7 +85,7 @@ export default ({ paybuttonId, addressSyncing, tableRefreshCount, timezone = mom
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'right' }}>Amount</div>),
+        Header: () => (<div className="text-right">Amount</div>),
         accessor: 'amount',
         sortType: compareNumericString,
         Cell: (cellProps) => {
@@ -100,7 +100,7 @@ export default ({ paybuttonId, addressSyncing, tableRefreshCount, timezone = mom
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'center' }}>Network</div>),
+        Header: () => (<div className="text-center">Network</div>),
         accessor: 'address.networkId',
         Cell: (cellProps) => {
           return (
@@ -113,7 +113,7 @@ export default ({ paybuttonId, addressSyncing, tableRefreshCount, timezone = mom
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'center' }}>TX</div>),
+        Header: () => (<div className="text-center">TX</div>),
         accessor: 'hash',
         disableSortBy: true,
         Cell: (cellProps) => {

pages/payments/index.tsx

@@ -265,7 +265,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'right' }}>Amount</div>),
+        Header: () => (<div className="text-right">Amount</div>),
         accessor: 'amount',
         sortType: compareNumericString,
         Cell: (cellProps) => {
@@ -280,7 +280,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'right' }}>Value</div>),
+        Header: () => (<div className="text-right">Value</div>),
         accessor: 'values',
         sortType: compareNumericString,
         disableSortBy: true,
@@ -289,7 +289,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'center' }}>Network</div>),
+        Header: () => (<div className="text-center">Network</div>),
         accessor: 'networkId',
         Cell: (cellProps) => {
           return (
@@ -302,7 +302,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'center' }}>Buttons</div>),
+        Header: () => (<div className="text-center">Buttons</div>),
         accessor: 'buttonDisplayDataList',
         Cell: (cellProps) => {
           return (
@@ -321,7 +321,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
         }
       },
       {
-        Header: 'TX',
+        Header: () => (<div className="text-center">TX</div>),
         accessor: 'hash',
         disableSortBy: true,
         Cell: (cellProps) => {
@@ -336,7 +336,7 @@ export default function Payments ({ user, userId, organization }: PaybuttonsProp
         }
       },
       {
-        Header: () => (<div style={{ textAlign: 'center' }}>Invoice</div>),
+        Header: () => (<div className="text-center">Invoice</div>),
         id: 'actions',
         disableSortBy: true,
         Cell: (cellProps) => {

styles/global.css

@@ -194,6 +194,18 @@ button:enabled:hover {
   transform: rotate(180deg);
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
 .table-icon-ctn {
   width: 100%;
   display: flex;