feat: sync design system (#475)

Co-authored-by: LuizAsFight <[email protected]>
FuelLabs · Sep 8, 2024 · 857ec11 · 857ec11
1 parent 7159c5b
commit 857ec11
Show file tree

Hide file tree

Showing 101 changed files with 1,739 additions and 743 deletions.
diff --git a/packages/app-commons/src/components/PageTitle/PageTitle.tsx b/packages/app-commons/src/components/PageTitle/PageTitle.tsx
@@ -1,72 +1,35 @@
 'use client';
-import type { BaseProps } from '@fuels/ui';
-import { Badge, HStack, Heading } from '@fuels/ui';
-import { tv } from 'tailwind-variants';
+import { Flex, HStack, HStackProps, Text } from '@fuels/ui';
 
-export type PageTitleProps = BaseProps<{
-  as?: string;
-  size?: '1' | '2' | '3';
-  children: React.ReactNode;
-  icon?: React.ReactNode;
-  rightElement?: React.ReactNode;
-}>;
+export type PageTitleProps = {
+  title: string;
+  children?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  inverse?: boolean;
+  mb?: HStackProps['mb'];
+};
 
 export function PageTitle({
+  title,
   children,
-  as = 'h2',
-  size = '1',
-  icon,
-  rightElement,
-  className,
+  subtitle,
+  inverse = false,
+  mb = '7',
 }: PageTitleProps) {
-  const classes = styles({ size });
   return (
-    <Heading as={as} className={classes.root({ className })}>
-      {icon && (
-        <Badge color="gray" size="2" className={classes.icon()}>
-          {icon}
-        </Badge>
-      )}
-      <HStack className={classes.title()}>{children}</HStack>
-      <div className="flex items-center h-full tablet:self-center">
-        {rightElement}
-      </div>
-    </Heading>
+    <HStack justify="between" mb={mb}>
+      <Flex gap="2" direction={inverse ? 'column-reverse' : 'column'}>
+        <Text as="h1" className="font-mono" size="5">
+          {title}
+        </Text>
+        {subtitle && (
+          <Text as="div" color="gray" size="2">
+            {subtitle}
+          </Text>
+        )}
+      </Flex>
+
+      {children}
+    </HStack>
   );
 }
-
-const styles = tv({
-  slots: {
-    root: [
-      'first:mb-8 flex items-center justify-between gap-2',
-      'border-border border-b',
-      'tablet:flex-nowrap tablet:gap-4',
-    ],
-    icon: ['h-full flex-shrink-0 px-2', 'tablet:self-start tablet:mt-1.5'],
-    title: [
-      'items-center basis-full gap-3 order-3 flex-shrink-0 justify-between',
-      'tablet:flex-col tablet:items-start tablet:gap-0',
-      'text-[1.7rem] tablet:text-[2rem] laptop:text-[2.2rem]',
-      'tablet:order-none tablet:flex-1 tablet:justify-start',
-    ],
-  },
-  variants: {
-    size: {
-      '1': {
-        root: 'flex-wrap pb-2 tablet:pb-4',
-        title: 'text-[1.7rem] tablet:text-[2rem] laptop:text-[2.2rem]',
-      },
-      '2': {
-        title: 'text-[1.4rem] tablet:text-[1.7rem] laptop:text-[1.9rem]',
-        root: 'pb-2 tablet:pb-4',
-      },
-      '3': {
-        title: 'text-[1.2rem] tablet:text-[1.4rem] laptop:text-[1.6rem]',
-        root: 'pb-2',
-      },
-    },
-  },
-  defaultVariants: {
-    size: '1',
-  },
-});
diff --git a/packages/app-explorer/.storybook/fonts.css b/packages/app-explorer/.storybook/fonts.css
@@ -1,7 +1,7 @@
 /* this is just for storybook */
 @font-face {
-  font-family: 'GeistSans';
-  src: url('/fonts/GeistVariableVF.woff2') format('woff2');
+  font-family: 'Inter';
+  src: url('/fonts/InterVariable.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 }
 
 :root {
-  --font-geist-sans: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   --font-geist-mono: 'GeistMono', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono',
     Menlo, Courier, monospace;

diff --git a/packages/app-explorer/.storybook/preview.tsx b/packages/app-explorer/.storybook/preview.tsx
@@ -4,14 +4,13 @@ import './fonts.css';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import type { Preview } from '@storybook/react';
-import React from 'react';
 import { withThemeDecorator } from 'storybook-addon-theme';
 
 import type { ReactNode } from 'react';
-import { Provider } from '../src/systems/Core/components/Provider';
+import { ThemeProvider } from '../src/systems/Core/components/Theme';
 
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  return <Provider>{children}</Provider>;
+  return <ThemeProvider>{children}</ThemeProvider>;
 }
 
 const preview: Preview = {

diff --git a/packages/app-explorer/public/fonts/GeistVariableVF.woff2 b/packages/app-explorer/public/fonts/GeistVariableVF.woff2
diff --git a/packages/app-explorer/public/fonts/InterVariable.woff2 b/packages/app-explorer/public/fonts/InterVariable.woff2
diff --git a/packages/app-explorer/src/app/error.css b/packages/app-explorer/src/app/error.css
@@ -1,7 +1,7 @@
 /* this is just for storybook */
 @font-face {
-  font-family: 'GeistSans';
-  src: url('/fonts/GeistVariableVF.woff2') format('woff2');
+  font-family: 'Inter';
+  src: url('/fonts/InterVariable.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 }
 
 :root {
-  --font-geist-sans: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   --font-geist-mono: 'GeistMono', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono',
     Menlo, Courier, monospace;

diff --git a/packages/app-explorer/src/app/global-error.tsx b/packages/app-explorer/src/app/global-error.tsx
@@ -6,7 +6,7 @@ import './globals.css';
 import Cookies from 'js-cookie';
 import type { Metadata } from 'next';
 import { ErrorPageComponent } from '~/systems/Core/components/ErrorPage/ErrorPage';
-import { Provider } from '~/systems/Core/components/Provider';
+import { ThemeProvider } from '~/systems/Core/components/Theme';
 import { cx } from '~/systems/Core/utils/cx';
 
 export const metadata: Metadata = {
@@ -35,9 +35,9 @@ export default function Page() {
         <link rel="icon" href="/favicon.svg" />
       </head>
       <body>
-        <Provider>
+        <ThemeProvider>
           <ErrorPageComponent />
-        </Provider>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/packages/app-explorer/src/app/layout.tsx b/packages/app-explorer/src/app/layout.tsx
@@ -3,13 +3,15 @@ import './globals.css';
 
 import { Analytics } from '@vercel/analytics/react';
 import { GeistMono } from 'geist/font/mono';
-import { GeistSans } from 'geist/font/sans';
 import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
 import { Layout } from '~/systems/Core/components/Layout/Layout';
-import { Provider } from '~/systems/Core/components/Provider';
-import { cx } from '~/systems/Core/utils/cx';
+import { PointsProgramEyebrow } from '~/systems/Core/components/PointsProgramEyebrow/PointsProgramEyebrow';
+import { ThemeProvider } from '~/systems/Core/components/Theme';
 import { SafaryScript } from '~/systems/Safary/Safary';
 
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+
 export const metadata: Metadata = {
   metadataBase: new URL('https://app.fuel.network'),
   title: 'Fuel Explorer',
@@ -33,18 +35,19 @@ export default function RootLayout({
     <html
       suppressHydrationWarning
       lang="en"
-      className={cx(`${GeistSans.variable} ${GeistMono.variable}`)}
+      className={`${inter.variable} ${GeistMono.variable}`}
     >
       <head>
         <link rel="icon" href="/favicon.svg" />
       </head>
       <body>
-        <Provider>
+        <ThemeProvider>
+          <PointsProgramEyebrow />
           <Layout contentClassName="[&_.rt-ContainerInner]:flex-col [&_.rt-ContainerInner]:gap-10">
             {children}
           </Layout>
           <Analytics />
-        </Provider>
+        </ThemeProvider>
       </body>
       <SafaryScript />
     </html>

diff --git a/packages/app-explorer/src/systems/Account/components/AccountHeader.tsx b/packages/app-explorer/src/systems/Account/components/AccountHeader.tsx
@@ -1,5 +1,4 @@
 import { Address } from '@fuels/ui';
-import { IconHash } from '@tabler/icons-react';
 import { Suspense } from 'react';
 
 import { PageTitle } from 'app-commons';
@@ -10,12 +9,9 @@ export function AccountHeader({ id }: { id: string }) {
   return (
     <>
       <PageTitle
-        icon={<IconHash size={20} stroke={1.2} />}
-        className="border-b-gray-3"
-      >
-        Account
-        <Address full={true} value={id} />
-      </PageTitle>
+        title="Account"
+        subtitle={<Address full={true} value={id} />}
+      />
       <Suspense fallback={<AccountTabs address={id} />}>
         <AccountsTabsSync id={id} />
       </Suspense>

diff --git a/packages/app-explorer/src/systems/Account/components/AccountTabs/AccountTabs.tsx b/packages/app-explorer/src/systems/Account/components/AccountTabs/AccountTabs.tsx
@@ -27,7 +27,7 @@ export function AccountTabs({
   return (
     <NavigationTab
       {...props}
-      className="-mt-8 mb-8"
+      className="mb-8"
       defaultValue={defaultValue}
       value={defaultValue}
       renderTab={(children, item) => (

diff --git a/packages/app-explorer/src/systems/Account/components/AccountTitle/AccountTitle.tsx b/packages/app-explorer/src/systems/Account/components/AccountTitle/AccountTitle.tsx
@@ -1,18 +1,15 @@
 'use client';
 
 import { Address, useBreakpoints } from '@fuels/ui';
-import { IconHash } from '@tabler/icons-react';
 import { PageTitle } from 'app-commons';
 
 export function AccountTitle({ id }: { id: string }) {
   const { isLaptop } = useBreakpoints();
+
   return (
     <PageTitle
-      icon={<IconHash size={20} stroke={1.2} />}
-      className="border-b-gray-3"
-    >
-      Account
-      <Address full={isLaptop} value={id} />
-    </PageTitle>
+      title="Account"
+      subtitle={<Address full={isLaptop} value={id} />}
+    />
   );
 }
diff --git a/packages/app-explorer/src/systems/Block/components/BlockHeader.tsx b/packages/app-explorer/src/systems/Block/components/BlockHeader.tsx
@@ -1,9 +1,7 @@
 'use client';
 import { Address, LoadingBox, LoadingWrapper } from '@fuels/ui';
-import { IconCube } from '@tabler/icons-react';
 import { PageTitle } from 'app-commons';
 import { useParams } from 'next/navigation';
-import { PageSubtitle } from '~/systems/Core/components/PageSubtitle/PageSubtitle';
 import { ViewMode } from '~/systems/Core/components/ViewMode/ViewMode';
 import type { ViewModes } from '~/systems/Core/components/ViewMode/constants';
 
@@ -19,21 +17,22 @@ export function BlockHeader({
   const { mode } = useParams<{ mode: ViewModes }>();
   return (
     <PageTitle
-      icon={<IconCube size={24} stroke={2.4} />}
-      rightElement={!isLoading && <ViewMode mode={mode} />}
+      title="Block"
+      subtitle={
+        <LoadingWrapper
+          isLoading={isLoading}
+          loadingEl={<LoadingBox className="w-20 h-5 mt-1" />}
+          regularEl={
+            isValidAddress(id) ? (
+              <Address full value={id || ''} fixed="b256" />
+            ) : (
+              <>#{id}</>
+            )
+          }
+        />
+      }
     >
-      Block
-      <LoadingWrapper
-        isLoading={isLoading}
-        loadingEl={<LoadingBox className="w-20 h-5 mt-1" />}
-        regularEl={
-          isValidAddress(id) ? (
-            <Address full value={id || ''} fixed="b256" />
-          ) : (
-            <PageSubtitle>#{id}</PageSubtitle>
-          )
-        }
-      />
+      {!isLoading && <ViewMode mode={mode} />}
     </PageTitle>
   );
 }
diff --git a/packages/app-explorer/src/systems/Block/components/BlockScreenSimple.tsx b/packages/app-explorer/src/systems/Block/components/BlockScreenSimple.tsx
@@ -1,15 +1,7 @@
 'use client';
 
 import type { GQLBlockFragment, Maybe } from '@fuel-explorer/graphql';
-import {
-  Address,
-  Grid,
-  Icon,
-  LoadingBox,
-  LoadingWrapper,
-  VStack,
-} from '@fuels/ui';
-import { IconListDetails } from '@tabler/icons-react';
+import { Address, Grid, LoadingBox, LoadingWrapper, VStack } from '@fuels/ui';
 import { PageTitle } from 'app-commons';
 import NextLink from 'next/link';
 import { Routes } from '~/routes';
@@ -65,9 +57,7 @@ export function BlockScreenSimple({
           />
         </CardInfo>
       </Grid>
-      <PageTitle size="3" icon={<Icon icon={IconListDetails} />}>
-        Transactions
-      </PageTitle>
+      <PageTitle title="Transactions" />
       {isLoading ? (
         <TxListLoader numberOfTxs={4} />
       ) : (

diff --git a/packages/app-explorer/src/systems/Bridge/components/BridgeScreenLoader.tsx b/packages/app-explorer/src/systems/Bridge/components/BridgeScreenLoader.tsx
@@ -1,23 +1,16 @@
 import { Box, LoadingBox, VStack } from '@fuels/ui';
-import { IconArrowsShuffle } from '@tabler/icons-react';
 import { PageTitle } from 'app-commons';
 import { BridgeTxItemsLoading } from 'app-portal';
 
 export function BridgeScreenLoader({ view }: { view: 'history' | 'bridge' }) {
   return (
     <Box className="m-auto w-full max-w-[455px]">
-      <PageTitle
-        size="2"
-        icon={<IconArrowsShuffle size={18} stroke={1.5} />}
-        className="border-b-0 first:mb-0"
-      >
-        Fuel Bridge
-      </PageTitle>
+      <PageTitle title="Fuel Bridge" />
       {view === 'history' ? (
         <BridgeTxItemsLoading />
       ) : (
         <VStack gap="4">
-          <LoadingBox className="w-full h-[var(--space-6)]" />
+          <LoadingBox className="w-full h-9" />
           <LoadingBox className="w-full h-[201px]" />
           <LoadingBox className="w-full h-[151px]" />
         </VStack>

diff --git a/packages/app-explorer/src/systems/Contract/components/ContractHeader.tsx b/packages/app-explorer/src/systems/Contract/components/ContractHeader.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { Address } from '@fuels/ui';
-import { IconChecklist } from '@tabler/icons-react';
 
 import { PageTitle } from 'app-commons';
 import { ContractTabs } from './ContractTabs';
@@ -10,12 +9,9 @@ export function ContractHeader({ id }: { id: string }) {
   return (
     <>
       <PageTitle
-        icon={<IconChecklist size={24} stroke={1.2} />}
-        className="border-b-gray-3"
-      >
-        Contract
-        <Address value={id} full={true} fixed="b256" />
-      </PageTitle>
+        title="Contract"
+        subtitle={<Address value={id} full={true} fixed="b256" />}
+      />
       <ContractTabs contractId={id} />
     </>
   );