style(wallet, common): update styling in AccountAssets and TitledValu…

…e components for improved layout and visual consistency
3Dpass · Jan 23, 2025 · 7e9adf9 · 7e9adf9
1 parent 8527939
commit 7e9adf9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/app/components/common/TitledValue.tsx b/app/components/common/TitledValue.tsx
@@ -15,7 +15,7 @@ export default function TitledValue({
 	fontSmall = false,
 	...attrs
 }: TitledValueProps) {
-	let valueClassName = "truncate";
+	let valueClassName = "";
 	if (fontMono) {
 		valueClassName += " font-mono";
 	}

diff --git a/app/components/wallet/AccountAssets.tsx b/app/components/wallet/AccountAssets.tsx
@@ -1,4 +1,4 @@
-import { Button, Spinner, SpinnerSize } from "@blueprintjs/core";
+import { Button, Icon, Spinner, SpinnerSize } from "@blueprintjs/core";
 import type { KeyringPair } from "@polkadot/keyring/types";
 import type { Codec } from "@polkadot/types/types";
 import { useEffect, useState } from "react";
@@ -102,23 +102,28 @@ export default function AccountAssets({ pair, onSend }: IProps) {
 							<Button
 								minimal
 								small
-								className="p-0 h-auto font-mono"
+								className="p-0 px-1 -mx-1 h-auto font-mono"
 								onClick={() =>
 									onSend?.({
 										id: asset.assetId,
 										metadata: asset.metadata,
 									})
 								}
 							>
-								<FormattedAmount
-									value={asset.balance}
-									decimals={
-										asset.metadata
-											? Number.parseInt(asset.metadata.decimals)
-											: 0
-									}
-									unit={asset.metadata?.symbol}
-								/>
+								<div className="inline-flex items-center justify-start gap-1">
+									<div>
+										<FormattedAmount
+											value={asset.balance}
+											decimals={
+												asset.metadata
+													? Number.parseInt(asset.metadata.decimals)
+													: 0
+											}
+											unit={asset.metadata?.symbol}
+										/>
+									</div>
+									<Icon icon="send-to" size={10} className="opacity-50" />
+								</div>
 							</Button>
 						</div>
 					))}