Skip to content

Commit a578f5b

Browse files
committed
feat: header + layouy + part of home
1 parent 29c9aed commit a578f5b

File tree

4 files changed

+72
-73
lines changed

4 files changed

+72
-73
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { cssObj } from '@fuel-ui/css';
2-
import { Heading, Tabs } from '@fuel-ui/react';
31
import { useNodeInfo } from '@fuel-wallet/react';
2+
import { Heading, Tabs } from '@fuels/ui';
43
import type { ReactNode } from 'react';
54
import { useLocation, useNavigate } from 'react-router-dom';
5+
import { tv } from 'tailwind-variants';
66
import { VITE_FUEL_VERSION } from '~/config';
77
import { FuelVersionDialog } from '~/systems/Chains/fuel/containers/FuelVersionDialog';
88
import { Layout } from '~/systems/Core';
@@ -13,6 +13,7 @@ type BridgeHomeProps = {
1313
};
1414

1515
export const BridgeHome = ({ children }: BridgeHomeProps) => {
16+
const classes = styles();
1617
const { isCompatible } = useNodeInfo({
1718
version: VITE_FUEL_VERSION,
1819
});
@@ -21,16 +22,17 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
2122

2223
return (
2324
<Layout>
24-
<Layout.Content css={styles.content}>
25-
<Heading as="h2" css={styles.heading}>
25+
<Layout.Content className={classes.content()}>
26+
<Heading as="h2" className={classes.heading()}>
2627
Fuel Native Bridge
2728
</Heading>
2829
<FuelVersionDialog isOpen={!(isCompatible ?? true)} />
2930
<Tabs
3031
defaultValue={location.pathname.replace(/\/$/, '')}
3132
onValueChange={(path) => navigate(path)}
33+
variant="surface"
3234
>
33-
<Tabs.List css={styles.tabs}>
35+
<Tabs.List className={classes.tabs()}>
3436
<Tabs.Trigger value={Pages.bridge}>Bridge</Tabs.Trigger>
3537
<Tabs.Trigger value={Pages.transactions}>History</Tabs.Trigger>
3638
</Tabs.List>
@@ -41,22 +43,10 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
4143
);
4244
};
4345

44-
const styles = {
45-
content: cssObj({
46-
maxWidth: '$sm',
47-
}),
48-
heading: cssObj({
49-
mt: 0,
50-
mb: '$4',
51-
// Align title with the content of the page
52-
ml: -2,
53-
}),
54-
tabs: cssObj({
55-
ml: 0,
56-
}),
57-
buttonLink: cssObj({
58-
'&:hover': {
59-
textDecoration: 'none',
60-
},
61-
}),
62-
};
46+
const styles = tv({
47+
slots: {
48+
content: 'max-w-[455px]',
49+
heading: 'mt-0 mb-4 ml-[-2px]',
50+
tabs: 'ml-0',
51+
},
52+
});
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { cssObj } from '@fuel-ui/css';
2-
import { Nav } from '@fuel-ui/react';
1+
import { Nav, useTheme } from '@fuels/ui';
32
import { useLocation, useNavigate } from 'react-router-dom';
43
import { Pages } from '~/types';
54

5+
import { tv } from 'tailwind-variants';
66
import { removeTrailingSlash } from '../utils';
77

88
export function Header() {
9+
const classes = styles();
10+
const { toggleTheme } = useTheme();
911
const location = useLocation();
1012
const navigate = useNavigate();
1113
const isLinkActive = (url: string) => {
@@ -14,48 +16,53 @@ export function Header() {
1416
);
1517
};
1618

19+
const themeToggle = (
20+
<Nav.ThemeToggle whenOpened="no-effect" onToggle={() => toggleTheme()} />
21+
);
22+
1723
return (
1824
<Nav>
19-
<Nav.Desktop>
20-
<Nav.Logo />
21-
<Nav.Spacer />
25+
<Nav.Desktop className={'px-10 justify-between'}>
26+
<Nav.Menu>
27+
<Nav.Logo />
28+
</Nav.Menu>
2229
<Nav.Menu>
2330
<Nav.MenuItem
2431
as="div"
25-
css={styles.menuItem}
32+
className={classes.menuItem()}
2633
isActive={isLinkActive(Pages.bridge)}
2734
onClick={() => navigate(Pages.bridge)}
2835
>
2936
Bridge
3037
</Nav.MenuItem>
3138
<Nav.MenuItem
3239
as="div"
33-
css={styles.menuItem}
40+
className={classes.menuItem()}
3441
isActive={isLinkActive(Pages.ecosystem)}
3542
onClick={() => navigate(Pages.ecosystem)}
3643
>
3744
Ecosystem
3845
</Nav.MenuItem>
46+
{themeToggle}
3947
</Nav.Menu>
40-
<Nav.ThemeToggle />
4148
</Nav.Desktop>
4249
<Nav.Mobile>
4350
<Nav.MobileContent>
4451
<Nav.Logo />
45-
<Nav.ThemeToggle />
52+
{themeToggle}
4653
</Nav.MobileContent>
4754
<Nav.Menu>
4855
<Nav.MenuItem
4956
as="div"
50-
css={styles.menuItem}
57+
className={classes.menuItem()}
5158
isActive={isLinkActive(Pages.bridge)}
5259
onClick={() => navigate(Pages.bridge)}
5360
>
5461
Bridge
5562
</Nav.MenuItem>
5663
<Nav.MenuItem
5764
as="div"
58-
css={styles.menuItem}
65+
className={classes.menuItem()}
5966
isActive={isLinkActive(Pages.ecosystem)}
6067
onClick={() => navigate(Pages.ecosystem)}
6168
>
@@ -67,8 +74,8 @@ export function Header() {
6774
);
6875
}
6976

70-
const styles = {
71-
menuItem: cssObj({
72-
cursor: 'pointer',
73-
}),
74-
};
77+
export const styles = tv({
78+
slots: {
79+
menuItem: 'pointer',
80+
},
81+
});
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
1-
import type { ThemeUtilsCSS } from '@fuel-ui/css';
2-
import { cssObj } from '@fuel-ui/css';
3-
import { Box, Flex } from '@fuel-ui/react';
41
import type { FC, ReactNode } from 'react';
52
import { Helmet } from 'react-helmet';
63
import { META_DESC, META_OGIMG } from '~/constants';
74
import { OverlayDialog } from '~/systems/Overlay';
85

96
import { coreStyles } from '../styles';
107

8+
import { Box, Flex, cx } from '@fuels/ui';
9+
import { tv } from 'tailwind-variants';
1110
import { Header } from './Header';
1211

1312
type ContentProps = {
1413
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1514
as?: any;
1615
children: ReactNode;
17-
css?: ThemeUtilsCSS;
16+
className?: string;
1817
};
1918

20-
const Content = ({ as, children, css }: ContentProps) => {
19+
const Content = ({ as, children, className }: ContentProps) => {
20+
const classes = styles();
21+
2122
return (
22-
<Box
23-
as={as}
24-
css={{ ...styles.content, ...css }}
25-
className="layout__content"
26-
>
23+
<Box as={as} className={cx(classes.content(), className)}>
2724
{children}
2825
</Box>
2926
);
@@ -39,6 +36,7 @@ type LayoutProps = {
3936
};
4037

4138
export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
39+
const classes = styles();
4240
const titleText = title || '';
4341
return (
4442
<>
@@ -55,11 +53,13 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
5553
href="data:image/png;base64,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"
5654
/>
5755
</Helmet>
58-
<Flex as="main" direction="column" css={styles.root}>
56+
<Flex as="main" direction="column" className={classes.root()}>
5957
<Header />
6058
<OverlayDialog />
61-
<Box css={styles.scrollView}>
62-
<Box css={coreStyles.scrollableContent}>{children}</Box>
59+
<Box className={classes.scrollView()}>
60+
<Box>{children}</Box>
61+
{/* TODO: add scrollable content class */}
62+
{/* <Box className={coreStyles.scrollableContent()}>{children}</Box> */}
6363
</Box>
6464
</Flex>
6565
</>
@@ -68,20 +68,16 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
6868

6969
Layout.Content = Content;
7070

71-
const styles = {
72-
root: cssObj({
73-
width: '100vw',
74-
height: '100vh',
75-
overflow: 'hidden',
76-
position: 'absolute',
77-
}),
78-
scrollView: cssObj({
79-
flex: 1,
80-
...coreStyles.scrollable(),
81-
}),
82-
content: cssObj({
83-
padding: '$16 $4 $4 $4',
84-
maxWidth: 955,
85-
margin: '0 auto',
86-
}),
87-
};
71+
export const styles = tv({
72+
slots: {
73+
root: 'w-screen h-screen overflow-hidden absolute',
74+
// TODO: add scrollable in scrollView
75+
scrollView: 'flex-1',
76+
content: 'p-4 pt-16 max-w-[955px] mx-auto',
77+
78+
// scrollView: cssObj({
79+
// flex: 1,
80+
// ...coreStyles.scrollable(),
81+
// }),
82+
},
83+
});

packages/app-portal/src/systems/Settings/providers/FuelsUiProvider.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import { Theme, Toaster, getStorageTheme } from '@fuels/ui';
1+
import { Theme, ThemesPossible, Toaster, getStorageTheme } from '@fuels/ui';
22
import '@fuels/ui/styles.css';
3+
import { useEffect, useState } from 'react';
34

45
export function FuelsUiProvider({ children }: { children: React.ReactNode }) {
5-
const defaultTheme = getStorageTheme();
6+
const currentTheme = getStorageTheme();
7+
const [theme, setTheme] = useState<ThemesPossible>(currentTheme);
8+
9+
useEffect(() => {
10+
setTheme(currentTheme);
11+
}, [currentTheme]);
612

713
return (
8-
<Theme appearance={defaultTheme} hasBackground={false}>
14+
<Theme appearance={theme} hasBackground={false}>
915
{children}
1016
<Toaster />
1117
</Theme>

0 commit comments

Comments
 (0)