feat: new design (#96)

* chore: initial styling adjustments * chore: dark mode * chore: refactor the transaction component hierarchy * chore: outline button base tweaks * chore: style header, sidebar and make content scrollable * chore: tweak description list spacing * chore: responsive latest block and transactions * chore: remove default badge margin
algorandfoundation · Jun 15, 2024 · 9b97688 · 9b97688
1 parent 57efbe9
commit 9b97688
Show file tree

Hide file tree

Showing 193 changed files with 1,036 additions and 1,354 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title>Algorand Studio</title>
   </head>
   <body>
-    <div id="root" class="flex justify-center"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-subscriber": "^1.3.0",
+    "@algorandfoundation/algokit-subscriber": "^1.3.1",
     "@algorandfoundation/algokit-utils": "^6.0.4",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",

diff --git a/public/fonts/L0x7DF4xlVMF-BfR8bXMIjhOm32WWpCBC10.woff2 b/public/fonts/L0x7DF4xlVMF-BfR8bXMIjhOm32WWpCBC10.woff2
diff --git a/public/fonts/RobotoMono-cyrillic-ext.woff2 b/public/fonts/RobotoMono-cyrillic-ext.woff2
diff --git a/public/fonts/RobotoMono-cyrillic.woff2 b/public/fonts/RobotoMono-cyrillic.woff2
diff --git a/public/fonts/RobotoMono-greek.woff2 b/public/fonts/RobotoMono-greek.woff2
diff --git a/public/fonts/RobotoMono-italic-cyrillic-ext.woff2 b/public/fonts/RobotoMono-italic-cyrillic-ext.woff2
diff --git a/public/fonts/RobotoMono-italic-cyrillic.woff2 b/public/fonts/RobotoMono-italic-cyrillic.woff2
diff --git a/public/fonts/RobotoMono-italic-greek.woff2 b/public/fonts/RobotoMono-italic-greek.woff2
diff --git a/public/fonts/RobotoMono-italic-latin-ext.woff2 b/public/fonts/RobotoMono-italic-latin-ext.woff2
diff --git a/public/fonts/RobotoMono-italic-vietnamese.woff2 b/public/fonts/RobotoMono-italic-vietnamese.woff2
diff --git a/public/fonts/RobotoMono-latin-ext.woff2 b/public/fonts/RobotoMono-latin-ext.woff2
diff --git a/public/fonts/RobotoMono-latin.woff2 b/public/fonts/RobotoMono-latin.woff2
diff --git a/public/fonts/RobotoMono-vietnamese.woff2 b/public/fonts/RobotoMono-vietnamese.woff2
diff --git a/public/fonts/poppins-100-italic-devanagari.woff2 b/public/fonts/poppins-100-italic-devanagari.woff2
diff --git a/public/fonts/poppins-100-italic-latin-ext.woff2 b/public/fonts/poppins-100-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-100-italic-latin.woff2 b/public/fonts/poppins-100-italic-latin.woff2
diff --git a/public/fonts/poppins-100-normal-devanagari.woff2 b/public/fonts/poppins-100-normal-devanagari.woff2
diff --git a/public/fonts/poppins-100-normal-latin-ext.woff2 b/public/fonts/poppins-100-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-100-normal-latin.woff2 b/public/fonts/poppins-100-normal-latin.woff2
diff --git a/public/fonts/poppins-200-italic-devanagari.woff2 b/public/fonts/poppins-200-italic-devanagari.woff2
diff --git a/public/fonts/poppins-200-italic-latin-ext.woff2 b/public/fonts/poppins-200-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-200-italic-latin.woff2 b/public/fonts/poppins-200-italic-latin.woff2
diff --git a/public/fonts/poppins-200-normal-devanagari.woff2 b/public/fonts/poppins-200-normal-devanagari.woff2
diff --git a/public/fonts/poppins-200-normal-latin-ext.woff2 b/public/fonts/poppins-200-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-200-normal-latin.woff2 b/public/fonts/poppins-200-normal-latin.woff2
diff --git a/public/fonts/poppins-300-italic-devanagari.woff2 b/public/fonts/poppins-300-italic-devanagari.woff2
diff --git a/public/fonts/poppins-300-italic-latin-ext.woff2 b/public/fonts/poppins-300-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-300-italic-latin.woff2 b/public/fonts/poppins-300-italic-latin.woff2
diff --git a/public/fonts/poppins-300-normal-devanagari.woff2 b/public/fonts/poppins-300-normal-devanagari.woff2
diff --git a/public/fonts/poppins-300-normal-latin-ext.woff2 b/public/fonts/poppins-300-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-300-normal-latin.woff2 b/public/fonts/poppins-300-normal-latin.woff2
diff --git a/public/fonts/poppins-400-italic-devanagari.woff2 b/public/fonts/poppins-400-italic-devanagari.woff2
diff --git a/public/fonts/poppins-400-italic-latin-ext.woff2 b/public/fonts/poppins-400-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-400-italic-latin.woff2 b/public/fonts/poppins-400-italic-latin.woff2
diff --git a/public/fonts/poppins-400-normal-devanagari.woff2 b/public/fonts/poppins-400-normal-devanagari.woff2
diff --git a/public/fonts/poppins-400-normal-latin-ext.woff2 b/public/fonts/poppins-400-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-400-normal-latin.woff2 b/public/fonts/poppins-400-normal-latin.woff2
diff --git a/public/fonts/poppins-500-italic-devanagari.woff2 b/public/fonts/poppins-500-italic-devanagari.woff2
diff --git a/public/fonts/poppins-500-italic-latin-ext.woff2 b/public/fonts/poppins-500-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-500-italic-latin.woff2 b/public/fonts/poppins-500-italic-latin.woff2
diff --git a/public/fonts/poppins-500-normal-devanagari.woff2 b/public/fonts/poppins-500-normal-devanagari.woff2
diff --git a/public/fonts/poppins-500-normal-latin-ext.woff2 b/public/fonts/poppins-500-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-500-normal-latin.woff2 b/public/fonts/poppins-500-normal-latin.woff2
diff --git a/public/fonts/poppins-600-italic-devanagari.woff2 b/public/fonts/poppins-600-italic-devanagari.woff2
diff --git a/public/fonts/poppins-600-italic-latin-ext.woff2 b/public/fonts/poppins-600-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-600-italic-latin.woff2 b/public/fonts/poppins-600-italic-latin.woff2
diff --git a/public/fonts/poppins-600-normal-devanagari.woff2 b/public/fonts/poppins-600-normal-devanagari.woff2
diff --git a/public/fonts/poppins-600-normal-latin-ext.woff2 b/public/fonts/poppins-600-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-600-normal-latin.woff2 b/public/fonts/poppins-600-normal-latin.woff2
diff --git a/public/fonts/poppins-700-italic-devanagari.woff2 b/public/fonts/poppins-700-italic-devanagari.woff2
diff --git a/public/fonts/poppins-700-italic-latin-ext.woff2 b/public/fonts/poppins-700-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-700-italic-latin.woff2 b/public/fonts/poppins-700-italic-latin.woff2
diff --git a/public/fonts/poppins-700-normal-devanagari.woff2 b/public/fonts/poppins-700-normal-devanagari.woff2
diff --git a/public/fonts/poppins-700-normal-latin-ext.woff2 b/public/fonts/poppins-700-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-700-normal-latin.woff2 b/public/fonts/poppins-700-normal-latin.woff2
diff --git a/public/fonts/poppins-800-italic-devanagari.woff2 b/public/fonts/poppins-800-italic-devanagari.woff2
diff --git a/public/fonts/poppins-800-italic-latin-ext.woff2 b/public/fonts/poppins-800-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-800-italic-latin.woff2 b/public/fonts/poppins-800-italic-latin.woff2
diff --git a/public/fonts/poppins-800-normal-devanagari.woff2 b/public/fonts/poppins-800-normal-devanagari.woff2
diff --git a/public/fonts/poppins-800-normal-latin-ext.woff2 b/public/fonts/poppins-800-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-800-normal-latin.woff2 b/public/fonts/poppins-800-normal-latin.woff2
diff --git a/public/fonts/poppins-900-italic-devanagari.woff2 b/public/fonts/poppins-900-italic-devanagari.woff2
diff --git a/public/fonts/poppins-900-italic-latin-ext.woff2 b/public/fonts/poppins-900-italic-latin-ext.woff2
diff --git a/public/fonts/poppins-900-italic-latin.woff2 b/public/fonts/poppins-900-italic-latin.woff2
diff --git a/public/fonts/poppins-900-normal-devanagari.woff2 b/public/fonts/poppins-900-normal-devanagari.woff2
diff --git a/public/fonts/poppins-900-normal-latin-ext.woff2 b/public/fonts/poppins-900-normal-latin-ext.woff2
diff --git a/public/fonts/poppins-900-normal-latin.woff2 b/public/fonts/poppins-900-normal-latin.woff2
diff --git a/src/App.routes.tsx b/src/App.routes.tsx
@@ -32,71 +32,71 @@ export const routes = evalTemplates([
         errorElement: <ErrorPage title={explorePageTitle} />,
       },
       {
-        template: Urls.Network,
+        template: Urls.Explore,
         element: (
           <NetworkPage>
             <Outlet />
           </NetworkPage>
         ),
         children: [
           {
-            template: Urls.Network,
+            template: Urls.Explore,
             element: <ExplorePage />,
             errorElement: <ErrorPage title={explorePageTitle} />,
           },
           {
-            template: Urls.Network.Transaction.ById,
+            template: Urls.Explore.Transaction.ById,
             errorElement: <ErrorPage title={transactionPageTitle} />,
             children: [
               {
-                template: Urls.Network.Transaction.ById,
+                template: Urls.Explore.Transaction.ById,
                 element: <TransactionPage />,
               },
               {
-                template: Urls.Network.Transaction.ById.Inner.ById,
+                template: Urls.Explore.Transaction.ById.Inner.ById,
                 element: <InnerTransactionPage />,
               },
             ],
           },
           {
-            template: Urls.Network.Block.ByRound,
+            template: Urls.Explore.Block.ByRound,
             children: [
               {
-                template: Urls.Network.Block.ByRound,
+                template: Urls.Explore.Block.ByRound,
                 errorElement: <ErrorPage title={blockPageTitle} />,
                 element: <BlockPage />,
               },
               {
-                template: Urls.Network.Block.ByRound.Group.ById,
+                template: Urls.Explore.Block.ByRound.Group.ById,
                 errorElement: <ErrorPage title={groupPageTitle} />,
                 element: <GroupPage />,
               },
             ],
           },
           {
-            template: Urls.Network.Account.ByAddress,
+            template: Urls.Explore.Account.ByAddress,
             element: <AccountPage />,
             errorElement: <ErrorPage title={accountPageTitle} />,
           },
           {
-            template: Urls.Network.Asset.ById,
+            template: Urls.Explore.Asset.ById,
             element: <AssetPage />,
             errorElement: <ErrorPage title={assetPageTitle} />,
           },
           {
-            template: Urls.Network.Application.ById,
+            template: Urls.Explore.Application.ById,
             errorElement: <ErrorPage title={applicationPageTitle} />,
             element: <ApplicationPage />,
           },
           {
-            template: Urls.Network.Tx,
+            template: Urls.Explore.Tx,
             element: <TxPage />,
           },
         ],
       },
       {
         template: Urls.AppStudio,
-        element: <div>App Studio</div>,
+        element: <ErrorPage title="App Studio" />,
       },
       {
         template: Urls.Settings,

diff --git a/src/assets/icons/block.svg b/src/assets/icons/block.svg
diff --git a/src/assets/icons/code-block.svg b/src/assets/icons/code-block.svg
diff --git a/src/assets/icons/cog.svg b/src/assets/icons/cog.svg
diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
diff --git a/src/assets/icons/transaction.svg b/src/assets/icons/transaction.svg
diff --git a/src/assets/icons/wallet.svg b/src/assets/icons/wallet.svg
diff --git a/src/features/accounts/components/account-activity-tabs.tsx b/src/features/accounts/components/account-activity-tabs.tsx
@@ -1,5 +1,4 @@
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
-import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
 import { Account } from '../models'
 import { AccountTransactionHistory } from './account-transaction-history'
@@ -36,13 +35,13 @@ export function AccountActivityTabs({ account }: Props) {
     <Tabs defaultValue={accountLiveTransactionsTabId}>
       <TabsList aria-label={accountActivityLabel}>
         {tabs.map((tab) => (
-          <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-44')} value={tab.id}>
+          <TabsTrigger key={tab.id} className="w-56" value={tab.id}>
             {tab.label}
           </TabsTrigger>
         ))}
       </TabsList>
       {tabs.map((tab) => (
-        <OverflowAutoTabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border')}>
+        <OverflowAutoTabsContent key={tab.id} value={tab.id}>
           <div className="grid">
             <div className="overflow-auto p-4">{tab.children}</div>
           </div>

diff --git a/src/features/accounts/components/account-application-tabs.tsx b/src/features/accounts/components/account-application-tabs.tsx
@@ -1,5 +1,4 @@
-import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
-import { cn } from '@/features/common/utils'
+import { Tabs, OverflowAutoTabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { useMemo } from 'react'
 import { Account } from '../models'
 import {
@@ -35,13 +34,13 @@ export function AccountApplicationTabs({ account }: Props) {
     <Tabs defaultValue={accountCreatedApplicationsTabId}>
       <TabsList aria-label={accountApplicationLabel}>
         {tabs.map((tab) => (
-          <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-36')} value={tab.id}>
+          <TabsTrigger key={tab.id} className="w-36" value={tab.id}>
             {tab.label}
           </TabsTrigger>
         ))}
       </TabsList>
       {tabs.map((tab) => (
-        <OverflowAutoTabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border')}>
+        <OverflowAutoTabsContent key={tab.id} value={tab.id}>
           <div className="grid">
             <div className="overflow-auto p-4">{tab.children}</div>
           </div>

diff --git a/src/features/accounts/components/account-asset-tabs.tsx b/src/features/accounts/components/account-asset-tabs.tsx
@@ -1,5 +1,4 @@
-import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
-import { cn } from '@/features/common/utils'
+import { Tabs, OverflowAutoTabsContent, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { useMemo } from 'react'
 import { AccountAssetsHeld } from './account-assets-held'
 import { Account } from '../models'
@@ -44,13 +43,13 @@ export function AccountAssetTabs({ account }: Props) {
     <Tabs defaultValue={accountHeldAssetsTabId}>
       <TabsList aria-label={accountAssetLabel}>
         {tabs.map((tab) => (
-          <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-36')} value={tab.id}>
+          <TabsTrigger key={tab.id} className="w-36" value={tab.id}>
             {tab.label}
           </TabsTrigger>
         ))}
       </TabsList>
       {tabs.map((tab) => (
-        <OverflowAutoTabsContent key={tab.id} value={tab.id} className={cn('border-solid border-2 border-border')}>
+        <OverflowAutoTabsContent key={tab.id} value={tab.id}>
           <div className="grid">
             <div className="overflow-auto p-4">{tab.children}</div>
           </div>

diff --git a/src/features/accounts/components/account-details.tsx b/src/features/accounts/components/account-details.tsx
@@ -13,31 +13,25 @@ type Props = {
 
 export function AccountDetails({ account }: Props) {
   return (
-    <div className={cn('space-y-6 pt-7')}>
+    <div className={cn('space-y-4')}>
       <AccountInfo account={account} />
       <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
-          <h1 className={cn('text-2xl text-primary font-bold')}>{accountActivityLabel}</h1>
-          <div className={cn('border-solid border-2 border-border grid grid-cols-[1fr_max-content]')}>
-            <AccountActivityTabs account={account} />
-          </div>
+          <h2>{accountActivityLabel}</h2>
+          <AccountActivityTabs account={account} />
         </CardContent>
       </Card>
 
       <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
-          <h1 className={cn('text-2xl text-primary font-bold')}>{accountAssetLabel}</h1>
-          <div className={cn('border-solid border-2 border-border grid')}>
-            <AccountAssetTabs account={account} />
-          </div>
+          <h2>{accountAssetLabel}</h2>
+          <AccountAssetTabs account={account} />
         </CardContent>
       </Card>
       <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
-          <h1 className={cn('text-2xl text-primary font-bold')}>{accountApplicationLabel}</h1>
-          <div className={cn('border-solid border-2 border-border grid')}>
-            <AccountApplicationTabs account={account} />
-          </div>
+          <h2>{accountApplicationLabel}</h2>
+          <AccountApplicationTabs account={account} />
         </CardContent>
       </Card>
     </div>

diff --git a/src/features/accounts/components/account-link.tsx b/src/features/accounts/components/account-link.tsx
@@ -26,7 +26,7 @@ export const AccountLink = fixedForwardRef(
       <>
         <TemplatedNavLink
           className={cn(!children && 'text-primary underline', className)}
-          urlTemplate={Urls.Network.Account.ByAddress}
+          urlTemplate={Urls.Explore.Account.ByAddress}
           urlParams={{ address, networkId: selectedNetwork }}
           ref={ref}
           {...rest}