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
algorandfoundation · Jun 18, 2024 · 5872cc9 · 5872cc9
1 parent 59dc025
commit 5872cc9
Show file tree

Hide file tree

Showing 24 changed files with 70 additions and 86 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -8,7 +8,7 @@ export function AppStudioPage() {
       <PageTitle title={appStudioPageTitle} />
       <div>
         <p>
-          Comming soon!
+          Coming soon!
           <br />
           In the meantime, we recommend{' '}
           <a href="https://app.dappflow.org/beaker-studio/" className="text-primary underline" rel="nofollow" target="_blank">

diff --git 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) {
           <h2>{applicationTransactionsLabel}</h2>
           <Tabs defaultValue={applicationLiveTransactionsTabId}>
             <TabsList aria-label={applicationTransactionsLabel}>
-              <TabsTrigger className="w-48" value={applicationLiveTransactionsTabId}>
+              <TabsTrigger className="w-56" value={applicationLiveTransactionsTabId}>
                 {applicationLiveTransactionsTabLabel}
               </TabsTrigger>
-              <TabsTrigger className="w-48" value={applicationHistoricalTransactionsTabId}>
+              <TabsTrigger className="w-56" value={applicationHistoricalTransactionsTabId}>
                 {applicationHistoricalTransactionsTabLabel}
               </TabsTrigger>
             </TabsList>

diff --git 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: (
-              <a href={asset.url} className={cn('text-primary underline')} rel="nofollow" target="_blank">
+              <a href={replaceIpfsWithGatewayIfNeeded(asset.url)} className={cn('text-primary underline')} rel="nofollow" target="_blank">
                 {asset.url}
               </a>
             ),

diff --git a/src/features/blocks/components/latest-blocks.tsx b/src/features/blocks/components/latest-blocks.tsx
@@ -17,7 +17,7 @@ export function LatestBlocks() {
         <ul>
           {latestBlocks.map((block) => (
             <li key={block.round} className="border-b last:border-0">
-              <BlockLink round={block.round} className="flex p-3.5 text-sm animate-in fade-in-0 zoom-in-90 hover:bg-accent">
+              <BlockLink round={block.round} className="flex p-3.5 text-sm animate-in fade-in-20 hover:bg-accent">
                 <Box className="hidden text-primary sm:max-lg:block xl:block" />
                 <div className={cn('mx-2')}>
                   <h3 className={cn('leading-none mb-2')}>{block.round}</h3>

diff --git 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
@@ -40,11 +40,11 @@ export function DataTable<TData, TValue>({ columns, data, getSubRows, subRowsExp
 
   return (
     <div>
-      <div className="grid border-y">
-        <Table>
+      <div className="grid">
+        <Table className="border-b">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className="border-t bg-muted/50">
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead key={header.id}>

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
@@ -53,11 +53,11 @@ export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage,
 
   return (
     <div>
-      <div className="grid border-y">
-        <Table>
+      <div className="grid">
+        <Table className="border-b">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className="border-t bg-muted/50">
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead key={header.id}>

diff --git 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 (
-    <Button onClick={onClick} variant="outline" size="icon" aria-label={refreshButtonLabel} className="ml-auto">
-      <RefreshCw className="size-[1.2rem]" />
+    <Button
+      onClick={onClick}
+      variant="outline"
+      size="icon"
+      aria-label={refreshButtonLabel}
+      className="ml-auto animate-in fade-in-0 zoom-in-90"
+    >
       <span className="sr-only">{refreshButtonLabel}</span>
+      <RefreshCw className="size-[1.2rem]" />
     </Button>
   )
 }
diff --git a/src/features/common/components/render-loadable.tsx b/src/features/common/components/render-loadable.tsx
@@ -11,7 +11,7 @@ export type RenderLoadableProps<T> = {
 
 export function RenderLoadable<T>({ loadable, children, fallback, transformError }: RenderLoadableProps<T>) {
   if (loadable.state === 'hasData') {
-    return <div className="animate-in fade-in-40">{children(loadable.data)}</div>
+    return <div>{children(loadable.data)}</div>
   } else if (loadable.state === 'loading') {
     return <>{fallback ?? <Loader className="size-10 animate-spin" />}</>
   }

diff --git a/src/features/common/components/table.tsx b/src/features/common/components/table.tsx
@@ -35,7 +35,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[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
@@ -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,23 +31,17 @@ 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 (
     <aside
       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]'
       )}
     >
-      <Button className="ml-auto size-9 text-muted-foreground" variant="no-style" size="icon" onClick={toggleLeftSideBar}>
+      <Button className="ml-auto text-muted-foreground" variant="no-style" size="icon" onClick={toggleLeftSideBar}>
         {layout.isLeftSideBarExpanded ? <PanelLeftClose /> : <PanelLeftOpen />}
       </Button>
       <NavigationMenu>

diff --git a/src/features/search/components/search.tsx b/src/features/search/components/search.tsx
@@ -58,7 +58,11 @@ export function Search() {
   }, [setTerm])
 
   return (
-    <Command className={cn('bg-popover text-popover-foreground w-80 h-auto z-20 border border-input')} shouldFilter={false} loop>
+    <Command
+      className={cn('bg-popover text-popover-foreground w-80 h-auto z-20 border border-input', term && 'shadow-md')}
+      shouldFilter={false}
+      loop
+    >
       <CommandInput
         placeholder={searchPlaceholderLabel}
         value={term}

diff --git a/src/features/settings/components/theme-toggle.tsx b/src/features/settings/components/theme-toggle.tsx
@@ -24,9 +24,9 @@ export function ThemeToggle({ navTextClassName }: Props) {
         <Button
           variant="no-style"
           aria-label={themeTogglelabel}
-          className="flex h-12 items-center gap-2 whitespace-nowrap p-1 text-base font-normal"
+          className="my-1.5 flex items-center gap-2 whitespace-nowrap px-2 text-base font-normal"
         >
-          <div className="ml-[0.28rem] flex rounded-md border p-2">
+          <div className="ml-[0.4rem] flex rounded-md border p-2">
             <Sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           </div>

diff --git a/..._/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html b/..._/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html
@@ -717,9 +717,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -843,9 +841,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1076,9 +1072,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1202,9 +1196,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1434,9 +1426,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1560,9 +1550,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >

diff --git a/..._/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html b/..._/application-transaction-graph.WYEGSIGWZHTR6VYXC3EXFGZQHYKI6FQOZU2DOKHQCAWYEIHJBKEA.html
@@ -731,9 +731,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >

diff --git a/...napshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html b/...napshots__/asset-transfer-graph.563MNGEL2OF4IBA7CFLIJNMBETT5QNKZURSLIONJBTJFALGYOAUA.html
@@ -140,9 +140,7 @@
         <div
           class="w-min pl-1 pr-1 bg-card"
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >

diff --git a/...napshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html b/...napshots__/asset-transfer-graph.JBDSQEI37W5KWPQICT2IGCG2FWMUGJEUYYK3KFKNSYRNAXU2ARUA.html
@@ -167,9 +167,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >

diff --git a/...omponents/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html b/...omponents/__snapshots__/group-graph.%2FoRSr2uMFemQhwQliJO18b64Nl1QIkjA39ZszRCeSCI%3D.html
@@ -717,9 +717,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -843,9 +841,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1076,9 +1072,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1202,9 +1196,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1434,9 +1426,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >
@@ -1560,9 +1550,7 @@
         <div
           class=""
         >
-          <div
-            class="animate-in fade-in-40"
-          >
+          <div>
             <div
               class="flex items-center gap-1"
             >

diff --git 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: (
-                <a href={transaction.url} className={cn('text-primary underline')} rel="nofollow" target="_blank">
+                <a
+                  href={replaceIpfsWithGatewayIfNeeded(transaction.url)}
+                  className={cn('text-primary underline')}
+                  rel="nofollow"
+                  target="_blank"
+                >
                   {transaction.url}
                 </a>
               ),
-Original file line number
+Diff line change
@@ Expand Up / @@ -731,9 +731,7 @@ @@
             <div
               class=""
             >
-              <div
-                class="animate-in fade-in-40"
-              >
+              <div>
                 <div
                   class="flex items-center gap-1"
                 >
@@ Expand Down @@