web: Align balances on decimal point, closes #193

Signed-off-by: Mikhail Petrov <[email protected]>
nspcc-dev · Aug 29, 2024 · b980a1b · b980a1b
1 parent 461af43
commit b980a1b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 48 deletions.
diff --git a/src/App.css b/src/App.css
@@ -256,6 +256,40 @@ ul {
     cursor: pointer;
 }
 
+table {
+    border-collapse: collapse;
+    margin-bottom: 10px;
+    color: #003;
+}
+
+td {
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    padding-bottom: 10px;
+}
+
+td:first-child {
+    font-weight: 600;
+}
+
+td+td {
+    padding-left: 10px;
+    text-align: right !important;
+}
+
+tr td:last-child {
+    padding-left: 0;
+    text-align: left !important;
+}
+
+tr img {
+    margin: 2px 0px 0px 5px;
+    cursor: pointer;
+    width: 15px;
+    height: 15px;
+}
+
 .field.is-grouped>.control {
     flex-shrink: unset;
 }

diff --git a/src/Profile.js b/src/Profile.js
@@ -181,54 +181,44 @@ const Profile = ({
 							<span style={{ margin: '0 15px 0 0' }}>{formatAddress(walletData.account.address)}</span>
 							<Tag style={{ margin: '5px 0 10px' }}>{walletData.name}</Tag>
 						</Heading>
-						<Heading size={6} weight="light" style={{ display: 'flex', marginBottom: 15 }}>
-							<span style={{ fontWeight: 600, marginRight: 5 }}>{`${activeNet}:`}</span>
-							<span>{neoBalance ? `${(neoBalance * 0.00000001).toFixed(8)} GAS` : '-'}</span>
-							{!isNotAvailableNeoFS && (
-								<img
-									src="/img/icons/sync.svg"
-									alt="sync"
-									style={isLoadingNeoBalance ? {
-										margin: '2px 0 0 5px',
-										cursor: 'pointer',
-										animation: 'spin 1.5s infinite linear',
-										width: 15,
-										height: 15,
-									} : {
-										margin: '2px 0 0 5px',
-										cursor: 'pointer',
-										width: 15,
-										height: 15,
-									}}
-									onClick={onNeoBalance}
-								/>
-							)}
-						</Heading>
-						<Heading size={6} weight="light" style={{ display: 'flex' }}>
-							<span style={{ fontWeight: 600, marginRight: 5 }}>NeoFS:</span>
-							<span>{neoFSBalance ? `${(neoFSBalance * 0.000000000001).toFixed(12)} GAS` : '-'}</span>
-							{!isNotAvailableNeoFS && (
-								<img
-									src="/img/icons/sync.svg"
-									width={20}
-									height={20}
-									alt="sync"
-									style={isLoadingNeoFSBalance ? {
-										margin: '2px 0 0 5px',
-										cursor: 'pointer',
-										animation: 'spin 1.5s infinite linear',
-										width: 15,
-										height: 15,
-									} : {
-										margin: '2px 0 0 5px',
-										cursor: 'pointer',
-										width: 15,
-										height: 15,
-									}}
-									onClick={onNeoFSBalance}
-								/>
-							)}
-						</Heading>
+						<table>
+								<tr>
+									<td>{`${activeNet}:`}</td>
+									<td>{Math.trunc(neoBalance * 0.00000001)}</td>
+									<td>
+										{`.${((neoBalance * 0.00000001).toFixed(8) + '').split(".")[1]} GAS`}
+										{!isNotAvailableNeoFS && (
+											<img
+												src="/img/icons/sync.svg"
+												alt="sync"
+												style={isLoadingNeoBalance ? {
+													animation: 'spin 1.5s infinite linear',
+												} : {}}
+												onClick={onNeoBalance}
+											/>
+										)}
+									</td>
+								</tr>
+								<tr>
+									<td>NeoFS:</td>
+									<td>{Math.trunc(neoFSBalance * 0.000000000001)}</td>
+									<td>
+										{`.${((neoFSBalance * 0.000000000001).toFixed(12) + '').split(".")[1]} GAS`}
+										{!isNotAvailableNeoFS && (
+											<img
+												src="/img/icons/sync.svg"
+												width={20}
+												height={20}
+												alt="sync"
+												style={isLoadingNeoFSBalance ? {
+													animation: 'spin 1.5s infinite linear',
+												} : {}}
+												onClick={onNeoFSBalance}
+											/>
+										)}
+									</td>
+								</tr>
+						</table>
 						<div style={{ display: 'flex', flexWrap: 'wrap' }}>
 							<Button
 								color="primary"