From 5872cc9dc4e81baf76b6baf255f43df7d5c97810 Mon Sep 17 00:00:00 2001 From: Neil Campbell Date: Tue, 18 Jun 2024 11:44:24 +0800 Subject: [PATCH] chore: more UI tweaks (#103) * chore: animate the refresh button rendering * chore: fix double scroll bars * chore: fix typo * chore: adjust width of account activity tabs * chore: make table column headers more obvious * chore: use ipfs gateway for asset link href if applicable * chore: animation adjustments * chore: fix snapshots * chore: nav padding tweak * chore: override ws dependency * chore: more tweaks --- package-lock.json | 6 ++--- package.json | 3 +++ .../app-studio/pages/app-studio-page.tsx | 2 +- .../components/application-details.tsx | 4 ++-- .../assets/components/asset-details.tsx | 3 ++- .../blocks/components/latest-blocks.tsx | 2 +- src/features/common/components/button.tsx | 2 +- src/features/common/components/data-table.tsx | 6 ++--- .../lazy-load-data-table.tsx | 6 ++--- .../common/components/refresh-button.tsx | 10 ++++++-- .../common/components/render-loadable.tsx | 2 +- src/features/common/components/table.tsx | 2 +- .../layout/components/left-side-bar-menu.tsx | 15 +++++------- src/features/search/components/search.tsx | 6 ++++- .../settings/components/theme-toggle.tsx | 4 ++-- ...5EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html | 24 +++++-------------- ...XC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html | 4 +--- ...7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html | 4 +--- ...ICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html | 4 +--- ...emQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html | 24 +++++-------------- .../asset-config-transaction-info.tsx | 8 ++++++- .../components/latest-transactions.tsx | 5 +--- .../components/live-transactions-table.tsx | 4 ++-- .../components/connect-wallet-button.tsx | 6 ++--- 24 files changed, 70 insertions(+), 86 deletions(-) diff --git a/package-lock.json b/package-lock.json index 224097927..c1a9d65cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15392,9 +15392,9 @@ "dev": true }, "node_modules/ws": { - "version": "7.5.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz", - "integrity": "sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==", + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", "engines": { "node": ">=8.3.0" }, diff --git a/package.json b/package.json index d1061ac07..856b47435 100644 --- a/package.json +++ b/package.json @@ -158,5 +158,8 @@ ], "semantic-release-export-data" ] + }, + "overrides": { + "ws@>7.0.0 <7.5.9": "7.5.10" } } diff --git a/src/features/app-studio/pages/app-studio-page.tsx b/src/features/app-studio/pages/app-studio-page.tsx index 5eaae8b8b..9505b04b9 100644 --- a/src/features/app-studio/pages/app-studio-page.tsx +++ b/src/features/app-studio/pages/app-studio-page.tsx @@ -8,7 +8,7 @@ export function AppStudioPage() {

- Comming soon! + Coming soon!
In the meantime, we recommend{' '} diff --git a/src/features/applications/components/application-details.tsx b/src/features/applications/components/application-details.tsx index 8d88c658f..d92653f50 100644 --- a/src/features/applications/components/application-details.tsx +++ b/src/features/applications/components/application-details.tsx @@ -140,10 +140,10 @@ export function ApplicationDetails({ application }: Props) {

{applicationTransactionsLabel}

- + {applicationLiveTransactionsTabLabel} - + {applicationHistoricalTransactionsTabLabel} diff --git a/src/features/assets/components/asset-details.tsx b/src/features/assets/components/asset-details.tsx index 8be2f4a7f..3666242ca 100644 --- a/src/features/assets/components/asset-details.tsx +++ b/src/features/assets/components/asset-details.tsx @@ -36,6 +36,7 @@ import { AssetTransactionHistory } from './asset-transaction-history' import { AssetLiveTransactions } from './asset-live-transactions' import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs' import { OpenJsonViewDialogButton } from '@/features/common/components/json-view-dialog-button' +import { replaceIpfsWithGatewayIfNeeded } from '../utils/replace-ipfs-with-gateway-if-needed' type Props = { asset: Asset @@ -90,7 +91,7 @@ export function AssetDetails({ asset }: Props) { ? { dt: assetUrlLabel, dd: ( - + {asset.url} ), diff --git a/src/features/blocks/components/latest-blocks.tsx b/src/features/blocks/components/latest-blocks.tsx index 484171f43..8aa343079 100644 --- a/src/features/blocks/components/latest-blocks.tsx +++ b/src/features/blocks/components/latest-blocks.tsx @@ -17,7 +17,7 @@ export function LatestBlocks() {
    {latestBlocks.map((block) => (
  • - +

    {block.round}

    diff --git a/src/features/common/components/button.tsx b/src/features/common/components/button.tsx index 01ad4ca82..1047bf6b2 100644 --- a/src/features/common/components/button.tsx +++ b/src/features/common/components/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/features/common/utils' const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + 'relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { diff --git a/src/features/common/components/data-table.tsx b/src/features/common/components/data-table.tsx index 8a1770de9..930d1aaf5 100644 --- a/src/features/common/components/data-table.tsx +++ b/src/features/common/components/data-table.tsx @@ -40,11 +40,11 @@ export function DataTable({ columns, data, getSubRows, subRowsExp return (
    -
    - +
    +
    {table.getHeaderGroups().map((headerGroup) => ( - + {headerGroup.headers.map((header) => { return ( diff --git a/src/features/common/components/lazy-load-data-table/lazy-load-data-table.tsx b/src/features/common/components/lazy-load-data-table/lazy-load-data-table.tsx index a137de133..16a76856c 100644 --- a/src/features/common/components/lazy-load-data-table/lazy-load-data-table.tsx +++ b/src/features/common/components/lazy-load-data-table/lazy-load-data-table.tsx @@ -53,11 +53,11 @@ export function LazyLoadDataTable({ columns, createLoadablePage, return (
    -
    -
    +
    +
    {table.getHeaderGroups().map((headerGroup) => ( - + {headerGroup.headers.map((header) => { return ( diff --git a/src/features/common/components/refresh-button.tsx b/src/features/common/components/refresh-button.tsx index 063ceb1da..6925318e3 100644 --- a/src/features/common/components/refresh-button.tsx +++ b/src/features/common/components/refresh-button.tsx @@ -9,9 +9,15 @@ export const refreshButtonLabel = 'Refresh' export function RefreshButton({ onClick }: Props) { return ( - ) } diff --git a/src/features/common/components/render-loadable.tsx b/src/features/common/components/render-loadable.tsx index 23a2c8511..0bb378f2e 100644 --- a/src/features/common/components/render-loadable.tsx +++ b/src/features/common/components/render-loadable.tsx @@ -11,7 +11,7 @@ export type RenderLoadableProps = { export function RenderLoadable({ loadable, children, fallback, transformError }: RenderLoadableProps) { if (loadable.state === 'hasData') { - return
    {children(loadable.data)}
    + return
    {children(loadable.data)}
    } else if (loadable.state === 'loading') { return <>{fallback ?? } } diff --git a/src/features/common/components/table.tsx b/src/features/common/components/table.tsx index db1f9008e..2f48b7715 100644 --- a/src/features/common/components/table.tsx +++ b/src/features/common/components/table.tsx @@ -35,7 +35,7 @@ const TableHead = React.forwardRef[role=checkbox]]:translate-y-[2px]', + 'h-10 px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className )} {...props} diff --git a/src/features/layout/components/left-side-bar-menu.tsx b/src/features/layout/components/left-side-bar-menu.tsx index e66391b98..86907f0cd 100644 --- a/src/features/layout/components/left-side-bar-menu.tsx +++ b/src/features/layout/components/left-side-bar-menu.tsx @@ -12,7 +12,10 @@ type Props = { className?: string } -const navIconClassName = cn('border rounded-md p-2 ml-1') +const navIconClassName = cn('border rounded-md p-2 ml-2') +const navLinkClassName = cn( + '[&.active]:border-border [&.active]:bg-accent [&.active]:text-primary border border-card rounded-r-md p-[0.34rem] mr-2 gap-2 flex items-center whitespace-nowrap' +) export function LeftSideBarMenu({ className }: Props) { const [selectedNetwork] = useSelectedNetwork() @@ -28,12 +31,6 @@ export function LeftSideBarMenu({ className }: Props) { [setLayout] ) - const navLinkClassName = cn( - layout.isLeftSideBarExpanded && 'mr-2', - !layout.isLeftSideBarExpanded && 'mr-1', - '[&.active]:border-border [&.active]:bg-accent [&.active]:text-primary border border-card rounded-r-md p-1 gap-2 flex items-center whitespace-nowrap' - ) - const navTextClassName = cn(layout.isLeftSideBarExpanded ? 'visible delay-100' : 'invisible w-0 delay-100') return ( @@ -41,10 +38,10 @@ export function LeftSideBarMenu({ className }: Props) { className={cn( 'flex flex-col bg-card border-r transition-[width] duration-300', className, - layout.isLeftSideBarExpanded ? 'w-56' : 'w-[3.8rem]' + layout.isLeftSideBarExpanded ? 'w-56' : 'w-[4.5rem]' )} > - diff --git a/src/features/search/components/search.tsx b/src/features/search/components/search.tsx index 154917d04..bf789b63a 100644 --- a/src/features/search/components/search.tsx +++ b/src/features/search/components/search.tsx @@ -58,7 +58,11 @@ export function Search() { }, [setTerm]) return ( - + -
    +
    diff --git a/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html b/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html index cc268d120..9995c7943 100644 --- a/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html +++ b/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html @@ -717,9 +717,7 @@
    -
    +
    @@ -843,9 +841,7 @@
    -
    +
    @@ -1076,9 +1072,7 @@
    -
    +
    @@ -1202,9 +1196,7 @@
    -
    +
    @@ -1434,9 +1426,7 @@
    -
    +
    @@ -1560,9 +1550,7 @@
    -
    +
    diff --git a/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html b/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html index 9b113703e..df5b09c64 100644 --- a/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html +++ b/src/features/transactions-graph/components/__snapshots__/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html @@ -731,9 +731,7 @@
    -
    +
    diff --git a/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html b/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html index 1b461b4a5..0f3d243c8 100644 --- a/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html +++ b/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html @@ -140,9 +140,7 @@
    -
    +
    diff --git a/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html b/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html index 3e4e64bdd..fbbe8816d 100644 --- a/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html +++ b/src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html @@ -167,9 +167,7 @@
    -
    +
    diff --git a/src/features/transactions-graph/components/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html b/src/features/transactions-graph/components/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html index f0f2c2768..af446c975 100644 --- a/src/features/transactions-graph/components/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html +++ b/src/features/transactions-graph/components/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html @@ -717,9 +717,7 @@
    -
    +
    @@ -843,9 +841,7 @@
    -
    +
    @@ -1076,9 +1072,7 @@
    -
    +
    @@ -1202,9 +1196,7 @@
    -
    +
    @@ -1434,9 +1426,7 @@
    -
    +
    @@ -1560,9 +1550,7 @@
    -
    +
    diff --git a/src/features/transactions/components/asset-config-transaction-info.tsx b/src/features/transactions/components/asset-config-transaction-info.tsx index 810a40467..0f1655c97 100644 --- a/src/features/transactions/components/asset-config-transaction-info.tsx +++ b/src/features/transactions/components/asset-config-transaction-info.tsx @@ -8,6 +8,7 @@ import { AssetIdAndNameLink } from '@/features/assets/components/asset-link' import Decimal from 'decimal.js' import { useAtomValue } from 'jotai' import { transactionSenderLabel } from './labels' +import { replaceIpfsWithGatewayIfNeeded } from '@/features/assets/utils/replace-ipfs-with-gateway-if-needed' type Props = { transaction: AssetConfigTransaction | InnerAssetConfigTransaction @@ -41,7 +42,12 @@ export function AssetConfigTransactionInfo({ transaction }: Props) { ? { dt: assetUrlLabel, dd: ( - + {transaction.url} ), diff --git a/src/features/transactions/components/latest-transactions.tsx b/src/features/transactions/components/latest-transactions.tsx index 5003fb848..7d30ea3a9 100644 --- a/src/features/transactions/components/latest-transactions.tsx +++ b/src/features/transactions/components/latest-transactions.tsx @@ -20,10 +20,7 @@ export function LatestTransactions() {
      {latestTransactions.map((transaction) => (
    • - +

      {ellipseId(transaction.id)}

      diff --git a/src/features/transactions/components/live-transactions-table.tsx b/src/features/transactions/components/live-transactions-table.tsx index ebc195fba..a4cad1e14 100644 --- a/src/features/transactions/components/live-transactions-table.tsx +++ b/src/features/transactions/components/live-transactions-table.tsx @@ -37,10 +37,10 @@ export function LiveTransactionsTable({ filter, columns, getSubRows }: Props) { return (
      -
    +
    {table.getHeaderGroups().map((headerGroup) => ( - + {headerGroup.headers.map((header) => { return ( diff --git a/src/features/wallet/components/connect-wallet-button.tsx b/src/features/wallet/components/connect-wallet-button.tsx index 01d138bb7..e326647b6 100644 --- a/src/features/wallet/components/connect-wallet-button.tsx +++ b/src/features/wallet/components/connect-wallet-button.tsx @@ -36,7 +36,7 @@ function ConnectWallet({ onConnect }: ConnectWalletProps) { }, [onConnect, setDialogOpen]) return ( - ) @@ -87,7 +87,7 @@ function ConnectedWallet({ activeAddress, connectedActiveAccounts, providers }: return ( -