feat: header + layouy + part of home

LuizAsFight · LuizAsFight · commit a578f5b2160a · 2024-02-07T19:42:16.000-03:00
diff --git a/packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx b/packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx
@@ -1,8 +1,8 @@
-import { cssObj } from '@fuel-ui/css';
-import { Heading, Tabs } from '@fuel-ui/react';
 import { useNodeInfo } from '@fuel-wallet/react';
+import { Heading, Tabs } from '@fuels/ui';
 import type { ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { tv } from 'tailwind-variants';
 import { VITE_FUEL_VERSION } from '~/config';
 import { FuelVersionDialog } from '~/systems/Chains/fuel/containers/FuelVersionDialog';
 import { Layout } from '~/systems/Core';
@@ -13,6 +13,7 @@ type BridgeHomeProps = {
 };
 
 export const BridgeHome = ({ children }: BridgeHomeProps) => {
+  const classes = styles();
   const { isCompatible } = useNodeInfo({
     version: VITE_FUEL_VERSION,
   });
@@ -21,16 +22,17 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
 
   return (
     <Layout>
-      <Layout.Content css={styles.content}>
-        <Heading as="h2" css={styles.heading}>
+      <Layout.Content className={classes.content()}>
+        <Heading as="h2" className={classes.heading()}>
           Fuel Native Bridge
         </Heading>
         <FuelVersionDialog isOpen={!(isCompatible ?? true)} />
         <Tabs
           defaultValue={location.pathname.replace(/\/$/, '')}
           onValueChange={(path) => navigate(path)}
+          variant="surface"
         >
-          <Tabs.List css={styles.tabs}>
+          <Tabs.List className={classes.tabs()}>
             <Tabs.Trigger value={Pages.bridge}>Bridge</Tabs.Trigger>
             <Tabs.Trigger value={Pages.transactions}>History</Tabs.Trigger>
           </Tabs.List>
@@ -41,22 +43,10 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
   );
 };
 
-const styles = {
-  content: cssObj({
-    maxWidth: '$sm',
-  }),
-  heading: cssObj({
-    mt: 0,
-    mb: '$4',
-    // Align title with the content of the page
-    ml: -2,
-  }),
-  tabs: cssObj({
-    ml: 0,
-  }),
-  buttonLink: cssObj({
-    '&:hover': {
-      textDecoration: 'none',
-    },
-  }),
-};
+const styles = tv({
+  slots: {
+    content: 'max-w-[455px]',
+    heading: 'mt-0 mb-4 ml-[-2px]',
+    tabs: 'ml-0',
+  },
+});
diff --git a/packages/app-portal/src/systems/Core/components/Header.tsx b/packages/app-portal/src/systems/Core/components/Header.tsx
@@ -1,11 +1,13 @@
-import { cssObj } from '@fuel-ui/css';
-import { Nav } from '@fuel-ui/react';
+import { Nav, useTheme } from '@fuels/ui';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Pages } from '~/types';
 
+import { tv } from 'tailwind-variants';
 import { removeTrailingSlash } from '../utils';
 
 export function Header() {
+  const classes = styles();
+  const { toggleTheme } = useTheme();
   const location = useLocation();
   const navigate = useNavigate();
   const isLinkActive = (url: string) => {
@@ -14,48 +16,53 @@ export function Header() {
     );
   };
 
+  const themeToggle = (
+    <Nav.ThemeToggle whenOpened="no-effect" onToggle={() => toggleTheme()} />
+  );
+
   return (
     <Nav>
-      <Nav.Desktop>
-        <Nav.Logo />
-        <Nav.Spacer />
+      <Nav.Desktop className={'px-10 justify-between'}>
+        <Nav.Menu>
+          <Nav.Logo />
+        </Nav.Menu>
         <Nav.Menu>
           <Nav.MenuItem
             as="div"
-            css={styles.menuItem}
+            className={classes.menuItem()}
             isActive={isLinkActive(Pages.bridge)}
             onClick={() => navigate(Pages.bridge)}
           >
             Bridge
           </Nav.MenuItem>
           <Nav.MenuItem
             as="div"
-            css={styles.menuItem}
+            className={classes.menuItem()}
             isActive={isLinkActive(Pages.ecosystem)}
             onClick={() => navigate(Pages.ecosystem)}
           >
             Ecosystem
           </Nav.MenuItem>
+          {themeToggle}
         </Nav.Menu>
-        <Nav.ThemeToggle />
       </Nav.Desktop>
       <Nav.Mobile>
         <Nav.MobileContent>
           <Nav.Logo />
-          <Nav.ThemeToggle />
+          {themeToggle}
         </Nav.MobileContent>
         <Nav.Menu>
           <Nav.MenuItem
             as="div"
-            css={styles.menuItem}
+            className={classes.menuItem()}
             isActive={isLinkActive(Pages.bridge)}
             onClick={() => navigate(Pages.bridge)}
           >
             Bridge
           </Nav.MenuItem>
           <Nav.MenuItem
             as="div"
-            css={styles.menuItem}
+            className={classes.menuItem()}
             isActive={isLinkActive(Pages.ecosystem)}
             onClick={() => navigate(Pages.ecosystem)}
           >
@@ -67,8 +74,8 @@ export function Header() {
   );
 }
 
-const styles = {
-  menuItem: cssObj({
-    cursor: 'pointer',
-  }),
-};
+export const styles = tv({
+  slots: {
+    menuItem: 'pointer',
+  },
+});
diff --git a/packages/app-portal/src/systems/Core/components/Layout.tsx b/packages/app-portal/src/systems/Core/components/Layout.tsx
@@ -1,29 +1,26 @@
-import type { ThemeUtilsCSS } from '@fuel-ui/css';
-import { cssObj } from '@fuel-ui/css';
-import { Box, Flex } from '@fuel-ui/react';
 import type { FC, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { META_DESC, META_OGIMG } from '~/constants';
 import { OverlayDialog } from '~/systems/Overlay';
 
 import { coreStyles } from '../styles';
 
+import { Box, Flex, cx } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
 import { Header } from './Header';
 
 type ContentProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: any;
   children: ReactNode;
-  css?: ThemeUtilsCSS;
+  className?: string;
 };
 
-const Content = ({ as, children, css }: ContentProps) => {
+const Content = ({ as, children, className }: ContentProps) => {
+  const classes = styles();
+
   return (
-    <Box
-      as={as}
-      css={{ ...styles.content, ...css }}
-      className="layout__content"
-    >
+    <Box as={as} className={cx(classes.content(), className)}>
       {children}
     </Box>
   );
@@ -39,6 +36,7 @@ type LayoutProps = {
 };
 
 export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
+  const classes = styles();
   const titleText = title || '';
   return (
     <>
@@ -55,11 +53,13 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
           href="data:image/png;base64,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"
         />
       </Helmet>
-      <Flex as="main" direction="column" css={styles.root}>
+      <Flex as="main" direction="column" className={classes.root()}>
         <Header />
         <OverlayDialog />
-        <Box css={styles.scrollView}>
-          <Box css={coreStyles.scrollableContent}>{children}</Box>
+        <Box className={classes.scrollView()}>
+          <Box>{children}</Box>
+          {/* TODO: add scrollable content class */}
+          {/* <Box className={coreStyles.scrollableContent()}>{children}</Box> */}
         </Box>
       </Flex>
     </>
@@ -68,20 +68,16 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
 
 Layout.Content = Content;
 
-const styles = {
-  root: cssObj({
-    width: '100vw',
-    height: '100vh',
-    overflow: 'hidden',
-    position: 'absolute',
-  }),
-  scrollView: cssObj({
-    flex: 1,
-    ...coreStyles.scrollable(),
-  }),
-  content: cssObj({
-    padding: '$16 $4 $4 $4',
-    maxWidth: 955,
-    margin: '0 auto',
-  }),
-};
+export const styles = tv({
+  slots: {
+    root: 'w-screen h-screen overflow-hidden absolute',
+    // TODO: add scrollable in scrollView
+    scrollView: 'flex-1',
+    content: 'p-4 pt-16 max-w-[955px] mx-auto',
+
+    // scrollView: cssObj({
+    //   flex: 1,
+    //   ...coreStyles.scrollable(),
+    // }),
+  },
+});
diff --git a/packages/app-portal/src/systems/Settings/providers/FuelsUiProvider.tsx b/packages/app-portal/src/systems/Settings/providers/FuelsUiProvider.tsx
@@ -1,11 +1,17 @@
-import { Theme, Toaster, getStorageTheme } from '@fuels/ui';
+import { Theme, ThemesPossible, Toaster, getStorageTheme } from '@fuels/ui';
 import '@fuels/ui/styles.css';
+import { useEffect, useState } from 'react';
 
 export function FuelsUiProvider({ children }: { children: React.ReactNode }) {
-  const defaultTheme = getStorageTheme();
+  const currentTheme = getStorageTheme();
+  const [theme, setTheme] = useState<ThemesPossible>(currentTheme);
+
+  useEffect(() => {
+    setTheme(currentTheme);
+  }, [currentTheme]);
 
   return (
-    <Theme appearance={defaultTheme} hasBackground={false}>
+    <Theme appearance={theme} hasBackground={false}>
       {children}
       <Toaster />
     </Theme>
