Skip to content

Commit 5872cc9

Browse files
neilcampbellneilcampbell
authored
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
1 parent 59dc025 commit 5872cc9

24 files changed

+70
-86
lines changed

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,5 +158,8 @@
158158
],
159159
"semantic-release-export-data"
160160
]
161+
},
162+
"overrides": {
163+
"ws@>7.0.0 <7.5.9": "7.5.10"
161164
}
162165
}

‎src/features/app-studio/pages/app-studio-page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function AppStudioPage() {
88
<PageTitle title={appStudioPageTitle} />
99
<div>
1010
<p>
11-
Comming soon!
11+
Coming soon!
1212
<br />
1313
In the meantime, we recommend{' '}
1414
<a href="https://app.dappflow.org/beaker-studio/" className="text-primary underline" rel="nofollow" target="_blank">

‎src/features/applications/components/application-details.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,10 @@ export function ApplicationDetails({ application }: Props) {
140140
<h2>{applicationTransactionsLabel}</h2>
141141
<Tabs defaultValue={applicationLiveTransactionsTabId}>
142142
<TabsList aria-label={applicationTransactionsLabel}>
143-
<TabsTrigger className="w-48" value={applicationLiveTransactionsTabId}>
143+
<TabsTrigger className="w-56" value={applicationLiveTransactionsTabId}>
144144
{applicationLiveTransactionsTabLabel}
145145
</TabsTrigger>
146-
<TabsTrigger className="w-48" value={applicationHistoricalTransactionsTabId}>
146+
<TabsTrigger className="w-56" value={applicationHistoricalTransactionsTabId}>
147147
{applicationHistoricalTransactionsTabLabel}
148148
</TabsTrigger>
149149
</TabsList>

‎src/features/assets/components/asset-details.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { AssetTransactionHistory } from './asset-transaction-history'
3636
import { AssetLiveTransactions } from './asset-live-transactions'
3737
import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
3838
import { OpenJsonViewDialogButton } from '@/features/common/components/json-view-dialog-button'
39+
import { replaceIpfsWithGatewayIfNeeded } from '../utils/replace-ipfs-with-gateway-if-needed'
3940

4041
type Props = {
4142
asset: Asset
@@ -90,7 +91,7 @@ export function AssetDetails({ asset }: Props) {
9091
? {
9192
dt: assetUrlLabel,
9293
dd: (
93-
<a href={asset.url} className={cn('text-primary underline')} rel="nofollow" target="_blank">
94+
<a href={replaceIpfsWithGatewayIfNeeded(asset.url)} className={cn('text-primary underline')} rel="nofollow" target="_blank">
9495
{asset.url}
9596
</a>
9697
),

‎src/features/blocks/components/latest-blocks.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function LatestBlocks() {
1717
<ul>
1818
{latestBlocks.map((block) => (
1919
<li key={block.round} className="border-b last:border-0">
20-
<BlockLink round={block.round} className="flex p-3.5 text-sm animate-in fade-in-0 zoom-in-90 hover:bg-accent">
20+
<BlockLink round={block.round} className="flex p-3.5 text-sm animate-in fade-in-20 hover:bg-accent">
2121
<Box className="hidden text-primary sm:max-lg:block xl:block" />
2222
<div className={cn('mx-2')}>
2323
<h3 className={cn('leading-none mb-2')}>{block.round}</h3>

‎src/features/common/components/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
55
import { cn } from '@/features/common/utils'
66

77
const buttonVariants = cva(
8-
'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',
8+
'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',
99
{
1010
variants: {
1111
variant: {

‎src/features/common/components/data-table.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ export function DataTable<TData, TValue>({ columns, data, getSubRows, subRowsExp
4040

4141
return (
4242
<div>
43-
<div className="grid border-y">
44-
<Table>
43+
<div className="grid">
44+
<Table className="border-b">
4545
<TableHeader>
4646
{table.getHeaderGroups().map((headerGroup) => (
47-
<TableRow key={headerGroup.id}>
47+
<TableRow key={headerGroup.id} className="border-t bg-muted/50">
4848
{headerGroup.headers.map((header) => {
4949
return (
5050
<TableHead key={header.id}>

‎src/features/common/components/lazy-load-data-table/lazy-load-data-table.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage,
5353

5454
return (
5555
<div>
56-
<div className="grid border-y">
57-
<Table>
56+
<div className="grid">
57+
<Table className="border-b">
5858
<TableHeader>
5959
{table.getHeaderGroups().map((headerGroup) => (
60-
<TableRow key={headerGroup.id}>
60+
<TableRow key={headerGroup.id} className="border-t bg-muted/50">
6161
{headerGroup.headers.map((header) => {
6262
return (
6363
<TableHead key={header.id}>

‎src/features/common/components/refresh-button.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@ export const refreshButtonLabel = 'Refresh'
99

1010
export function RefreshButton({ onClick }: Props) {
1111
return (
12-
<Button onClick={onClick} variant="outline" size="icon" aria-label={refreshButtonLabel} className="ml-auto">
13-
<RefreshCw className="size-[1.2rem]" />
12+
<Button
13+
onClick={onClick}
14+
variant="outline"
15+
size="icon"
16+
aria-label={refreshButtonLabel}
17+
className="ml-auto animate-in fade-in-0 zoom-in-90"
18+
>
1419
<span className="sr-only">{refreshButtonLabel}</span>
20+
<RefreshCw className="size-[1.2rem]" />
1521
</Button>
1622
)
1723
}

‎src/features/common/components/render-loadable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export type RenderLoadableProps<T> = {
1111

1212
export function RenderLoadable<T>({ loadable, children, fallback, transformError }: RenderLoadableProps<T>) {
1313
if (loadable.state === 'hasData') {
14-
return <div className="animate-in fade-in-40">{children(loadable.data)}</div>
14+
return <div>{children(loadable.data)}</div>
1515
} else if (loadable.state === 'loading') {
1616
return <>{fallback ?? <Loader className="size-10 animate-spin" />}</>
1717
}

‎src/features/common/components/table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
3535
<th
3636
ref={ref}
3737
className={cn(
38-
'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
38+
'h-10 px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
3939
className
4040
)}
4141
{...props}

‎src/features/layout/components/left-side-bar-menu.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ type Props = {
1212
className?: string
1313
}
1414

15-
const navIconClassName = cn('border rounded-md p-2 ml-1')
15+
const navIconClassName = cn('border rounded-md p-2 ml-2')
16+
const navLinkClassName = cn(
17+
'[&.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'
18+
)
1619

1720
export function LeftSideBarMenu({ className }: Props) {
1821
const [selectedNetwork] = useSelectedNetwork()
@@ -28,23 +31,17 @@ export function LeftSideBarMenu({ className }: Props) {
2831
[setLayout]
2932
)
3033

31-
const navLinkClassName = cn(
32-
layout.isLeftSideBarExpanded && 'mr-2',
33-
!layout.isLeftSideBarExpanded && 'mr-1',
34-
'[&.active]:border-border [&.active]:bg-accent [&.active]:text-primary border border-card rounded-r-md p-1 gap-2 flex items-center whitespace-nowrap'
35-
)
36-
3734
const navTextClassName = cn(layout.isLeftSideBarExpanded ? 'visible delay-100' : 'invisible w-0 delay-100')
3835

3936
return (
4037
<aside
4138
className={cn(
4239
'flex flex-col bg-card border-r transition-[width] duration-300',
4340
className,
44-
layout.isLeftSideBarExpanded ? 'w-56' : 'w-[3.8rem]'
41+
layout.isLeftSideBarExpanded ? 'w-56' : 'w-[4.5rem]'
4542
)}
4643
>
47-
<Button className="ml-auto size-9 text-muted-foreground" variant="no-style" size="icon" onClick={toggleLeftSideBar}>
44+
<Button className="ml-auto text-muted-foreground" variant="no-style" size="icon" onClick={toggleLeftSideBar}>
4845
{layout.isLeftSideBarExpanded ? <PanelLeftClose /> : <PanelLeftOpen />}
4946
</Button>
5047
<NavigationMenu>

‎src/features/search/components/search.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,11 @@ export function Search() {
5858
}, [setTerm])
5959

6060
return (
61-
<Command className={cn('bg-popover text-popover-foreground w-80 h-auto z-20 border border-input')} shouldFilter={false} loop>
61+
<Command
62+
className={cn('bg-popover text-popover-foreground w-80 h-auto z-20 border border-input', term && 'shadow-md')}
63+
shouldFilter={false}
64+
loop
65+
>
6266
<CommandInput
6367
placeholder={searchPlaceholderLabel}
6468
value={term}

‎src/features/settings/components/theme-toggle.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ export function ThemeToggle({ navTextClassName }: Props) {
2424
<Button
2525
variant="no-style"
2626
aria-label={themeTogglelabel}
27-
className="flex h-12 items-center gap-2 whitespace-nowrap p-1 text-base font-normal"
27+
className="my-1.5 flex items-center gap-2 whitespace-nowrap px-2 text-base font-normal"
2828
>
29-
<div className="ml-[0.28rem] flex rounded-md border p-2">
29+
<div className="ml-[0.4rem] flex rounded-md border p-2">
3030
<Sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
3131
<Moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
3232
</div>

‎src/features/transactions-graph/components/__snapshots__/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -717,9 +717,7 @@
717717
<div
718718
class=""
719719
>
720-
<div
721-
class="animate-in fade-in-40"
722-
>
720+
<div>
723721
<div
724722
class="flex items-center gap-1"
725723
>
@@ -843,9 +841,7 @@
843841
<div
844842
class=""
845843
>
846-
<div
847-
class="animate-in fade-in-40"
848-
>
844+
<div>
849845
<div
850846
class="flex items-center gap-1"
851847
>
@@ -1076,9 +1072,7 @@
10761072
<div
10771073
class=""
10781074
>
1079-
<div
1080-
class="animate-in fade-in-40"
1081-
>
1075+
<div>
10821076
<div
10831077
class="flex items-center gap-1"
10841078
>
@@ -1202,9 +1196,7 @@
12021196
<div
12031197
class=""
12041198
>
1205-
<div
1206-
class="animate-in fade-in-40"
1207-
>
1199+
<div>
12081200
<div
12091201
class="flex items-center gap-1"
12101202
>
@@ -1434,9 +1426,7 @@
14341426
<div
14351427
class=""
14361428
>
1437-
<div
1438-
class="animate-in fade-in-40"
1439-
>
1429+
<div>
14401430
<div
14411431
class="flex items-center gap-1"
14421432
>
@@ -1560,9 +1550,7 @@
15601550
<div
15611551
class=""
15621552
>
1563-
<div
1564-
class="animate-in fade-in-40"
1565-
>
1553+
<div>
15661554
<div
15671555
class="flex items-center gap-1"
15681556
>

‎src/features/transactions-graph/components/__snapshots__/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -731,9 +731,7 @@
731731
<div
732732
class=""
733733
>
734-
<div
735-
class="animate-in fade-in-40"
736-
>
734+
<div>
737735
<div
738736
class="flex items-center gap-1"
739737
>

‎src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,7 @@
140140
<div
141141
class="w-min pl-1 pr-1 bg-card"
142142
>
143-
<div
144-
class="animate-in fade-in-40"
145-
>
143+
<div>
146144
<div
147145
class="flex items-center gap-1"
148146
>

‎src/features/transactions-graph/components/__snapshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,7 @@
167167
<div
168168
class=""
169169
>
170-
<div
171-
class="animate-in fade-in-40"
172-
>
170+
<div>
173171
<div
174172
class="flex items-center gap-1"
175173
>

‎src/features/transactions-graph/components/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -717,9 +717,7 @@
717717
<div
718718
class=""
719719
>
720-
<div
721-
class="animate-in fade-in-40"
722-
>
720+
<div>
723721
<div
724722
class="flex items-center gap-1"
725723
>
@@ -843,9 +841,7 @@
843841
<div
844842
class=""
845843
>
846-
<div
847-
class="animate-in fade-in-40"
848-
>
844+
<div>
849845
<div
850846
class="flex items-center gap-1"
851847
>
@@ -1076,9 +1072,7 @@
10761072
<div
10771073
class=""
10781074
>
1079-
<div
1080-
class="animate-in fade-in-40"
1081-
>
1075+
<div>
10821076
<div
10831077
class="flex items-center gap-1"
10841078
>
@@ -1202,9 +1196,7 @@
12021196
<div
12031197
class=""
12041198
>
1205-
<div
1206-
class="animate-in fade-in-40"
1207-
>
1199+
<div>
12081200
<div
12091201
class="flex items-center gap-1"
12101202
>
@@ -1434,9 +1426,7 @@
14341426
<div
14351427
class=""
14361428
>
1437-
<div
1438-
class="animate-in fade-in-40"
1439-
>
1429+
<div>
14401430
<div
14411431
class="flex items-center gap-1"
14421432
>
@@ -1560,9 +1550,7 @@
15601550
<div
15611551
class=""
15621552
>
1563-
<div
1564-
class="animate-in fade-in-40"
1565-
>
1553+
<div>
15661554
<div
15671555
class="flex items-center gap-1"
15681556
>

‎src/features/transactions/components/asset-config-transaction-info.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AssetIdAndNameLink } from '@/features/assets/components/asset-link'
88
import Decimal from 'decimal.js'
99
import { useAtomValue } from 'jotai'
1010
import { transactionSenderLabel } from './labels'
11+
import { replaceIpfsWithGatewayIfNeeded } from '@/features/assets/utils/replace-ipfs-with-gateway-if-needed'
1112

1213
type Props = {
1314
transaction: AssetConfigTransaction | InnerAssetConfigTransaction
@@ -41,7 +42,12 @@ export function AssetConfigTransactionInfo({ transaction }: Props) {
4142
? {
4243
dt: assetUrlLabel,
4344
dd: (
44-
<a href={transaction.url} className={cn('text-primary underline')} rel="nofollow" target="_blank">
45+
<a
46+
href={replaceIpfsWithGatewayIfNeeded(transaction.url)}
47+
className={cn('text-primary underline')}
48+
rel="nofollow"
49+
target="_blank"
50+
>
4551
{transaction.url}
4652
</a>
4753
),

0 commit comments

Comments
 (0)