refactor: Start implementing the new design system

yearn · Dec 18, 2022 · 57638fe · 57638fe
1 parent 0af17cf
commit 57638fe
Show file tree

Hide file tree

Showing 12 changed files with 228 additions and 344 deletions.
diff --git a/components/common/AppWrapper.tsx b/components/common/AppWrapper.tsx
@@ -1,44 +1,36 @@
 import React, {ReactElement} from 'react';
 import {AppProps} from 'next/app';
-import {AnimatePresence, motion} from 'framer-motion';
 import KBar from 'components/common/Kbar';
 import Meta from 'components/common/Meta';
 import Footer from 'components/common/StandardFooter';
-import Header from 'components/common/StandardHeader';
+import Header from '@yearn-finance/web-lib/layouts/Header.next';
 import {KBarProvider} from 'kbar';
-
-const transition = {duration: 0.3, ease: [0.17, 0.67, 0.83, 0.67]};
-const thumbnailVariants = {
-	initial: {y: 20, opacity: 0, transition},
-	enter: {y: 0, opacity: 1, transition},
-	exit: {y: -20, opacity: 0, transition}
-};
+import Link from 'next/link';
+import LogoYearn from 'components/icons/LogoYearn';
 
 function	WithLayout(props: AppProps): ReactElement {
 	const	{Component, pageProps, router} = props;
 
 	return (
-		<React.Fragment>
-			<Header
-				shouldUseNetworks={true}
-				shouldUseWallets={true} />
-			<div id={'app'} className={'mx-auto mb-0 flex w-full max-w-6xl flex-col pt-6 md:pt-0'}>
-				<AnimatePresence mode={'wait'}>
-					<motion.div
-						key={router.asPath}
-						initial={'initial'}
-						animate={'enter'}
-						exit={'exit'}
-						variants={thumbnailVariants}>
-						<Component
-							key={router.route}
-							router={props.router}
-							{...pageProps} />
-					</motion.div>
-				</AnimatePresence>
+		<div id={'app'} className={'mx-auto mb-0 flex max-w-6xl font-aeonik'}>
+			<div className={'block min-h-[100vh] w-full'}>
+				<Header
+					linkComponent={<Link href={''} />}
+					currentPathName={router.pathname}
+					onOpenMenuMobile={() => {}}
+					nav={[
+						{path: '/', label: 'Home'},
+						{path: '/foo', label: 'Foo'},
+						{path: '/bar', label: 'Bar'},
+					]}
+					logo={<LogoYearn className={'h-8 w-8'} />}/>
+				<Component
+					key={router.route}
+					router={props.router}
+					{...pageProps} />
+				<Footer />
 			</div>
-			<Footer />
-		</React.Fragment>
+		</div>
 	);
 }
 

diff --git a/components/common/KBarButton.tsx b/components/common/KBarButton.tsx
diff --git a/components/common/StandardFooter.tsx b/components/common/StandardFooter.tsx
@@ -1,9 +1,12 @@
-import React, {ReactElement} from 'react';
-import Link from 'next/link';
-import {SwitchTheme} from '@yearn-finance/web-lib/components';
-import {useUI} from '@yearn-finance/web-lib/contexts';
-import {SocialDiscord, SocialGithub, SocialMedium, SocialTwitter} from '@yearn-finance/web-lib/icons';
-import meta from 'public/manifest.json';
+import React, {ReactElement}	from 'react';
+import Link						from 'next/link';
+import {SwitchTheme} 			from '@yearn-finance/web-lib/components/SwitchTheme';
+import {useUI} 					from '@yearn-finance/web-lib/contexts/useUI';
+import IconSocialDiscord 		from '@yearn-finance/web-lib/icons/IconSocialDiscord';
+import IconSocialGithub 		from '@yearn-finance/web-lib/icons/IconSocialGithub';
+import IconSocialMedium 		from '@yearn-finance/web-lib/icons/IconSocialMedium';
+import IconSocialTwitter 		from '@yearn-finance/web-lib/icons/IconSocialTwitter';
+import meta 					from 'public/manifest.json';
 
 
 function	Footer(): ReactElement {
@@ -41,31 +44,31 @@ function	Footer(): ReactElement {
 					href={'https://twitter.com/iearnfinance'}
 					target={'_blank'}
 					rel={'noreferrer'}>
-					<SocialTwitter className={'h-5 w-5'} />
+					<IconSocialTwitter className={'h-5 w-5'} />
 				</a>
 			</div>
 			<div className={'text-typo-secondary cursor-pointer px-2 transition-colors hover:text-primary'}>
 				<a
 					href={meta.github}
 					target={'_blank'}
 					rel={'noreferrer'}>
-					<SocialGithub className={'h-5 w-5'} />
+					<IconSocialGithub className={'h-5 w-5'} />
 				</a>
 			</div>
 			<div className={'text-typo-secondary cursor-pointer px-2 transition-colors hover:text-primary'}>
 				<a
 					href={'https://discord.yearn.finance/'}
 					target={'_blank'}
 					rel={'noreferrer'}>
-					<SocialDiscord className={'h-5 w-5'} />
+					<IconSocialDiscord className={'h-5 w-5'} />
 				</a>
 			</div>
 			<div className={'text-typo-secondary cursor-pointer px-2 transition-colors hover:text-primary'}>
 				<a
 					href={'https://medium.com/iearn'}
 					target={'_blank'}
 					rel={'noreferrer'}>
-					<SocialMedium className={'h-5 w-5'} />
+					<IconSocialMedium className={'h-5 w-5'} />
 				</a>
 			</div>
 			<div className={'pl-3'}>

diff --git a/components/common/StandardHeader.tsx b/components/common/StandardHeader.tsx
diff --git a/components/icons/LogoYearn.tsx b/components/icons/LogoYearn.tsx
@@ -13,7 +13,7 @@ function	LogoYearn(props: React.SVGProps<SVGSVGElement>): ReactElement {
 				cx={'512'}
 				cy={'512'}
 				r={'512'}
-				fill={'#FF90A1'}/>
+				fill={'#000000'}/>
 			<path d={'M645.095 167.388L512.731 345.535L501.031 330.202L378.173 168.118L295.537 229.447L460.078 449.941V609.105H564.653V449.21L728.463 229.447L645.095 167.388Z'} fill={'white'}/>
 			<path d={'M688.242 392.992L623.888 474.764C654.602 503.969 673.616 545.585 673.616 590.852C673.616 679.925 601.218 752.206 512 752.206C422.782 752.206 350.384 679.925 350.384 590.852C350.384 544.855 370.129 503.239 400.844 474.034L337.221 391.532C280.912 439.719 245.81 511.27 245.81 590.852C245.81 737.604 365.01 856.612 512 856.612C658.99 856.612 778.191 737.604 778.191 590.852C778.191 512 743.089 441.179 688.242 392.992Z'} fill={'white'}/>
 		</svg>

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
 	},
 	"dependencies": {
 		"@headlessui/react": "^1.7.3",
-		"@yearn-finance/web-lib": "^0.14.0",
+		"@yearn-finance/web-lib": "^0.17.55",
 		"axios": "^1.1.3",
 		"ethcall": "^4.8.5",
 		"ethers": "^5.7.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,6 @@
 import React, {ReactElement} from 'react';
 import {AppProps} from 'next/app';
-import {WithYearn} from '@yearn-finance/web-lib/contexts';
+import {WithYearn} from '@yearn-finance/web-lib/contexts/WithYearn';
 import AppWrapper from 'components/common/AppWrapper';
 
 import	'../style.css';
@@ -11,7 +11,6 @@ function	MyApp(props: AppProps): ReactElement {
 			options={{
 				web3: {
 					shouldUseWallets: true,
-					shouldUseStrictChainMode: false,
 					defaultChainID: 1,
 					supportedChainID: [1, 10, 250, 42161, 1337, 31337]
 				}

diff --git a/pages/disclaimer.tsx b/pages/disclaimer.tsx
@@ -1,7 +1,7 @@
 import React, {ReactElement} from 'react';
 import Link from 'next/link';
-import {Card} from '@yearn-finance/web-lib/components';
-import {Cross} from '@yearn-finance/web-lib/icons';
+import {Card} from '@yearn-finance/web-lib/components/Card';
+import IconCross from '@yearn-finance/web-lib/icons/IconCross';
 
 function	DisclaimerPage(): ReactElement {
 	return (
@@ -10,7 +10,7 @@ function	DisclaimerPage(): ReactElement {
 				<div className={'flex w-full flex-row justify-between pb-6'}>
 					<h4>{'Disclaimer'}</h4>
 					<Link href={'/'}>
-						<Cross className={'text-typo-primary hover:text-typo-primary-variant h-6 w-6 cursor-pointer transition-colors'} />
+						<IconCross className={'text-typo-primary hover:text-typo-primary-variant h-6 w-6 cursor-pointer transition-colors'} />
 					</Link>
 				</div>
 				<div className={'space-y-6 text-justify'}>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,7 @@
 import React, {ReactElement} from 'react';
-import {Banner, Card, DescriptionList} from '@yearn-finance/web-lib/components';
+import {Banner} from '@yearn-finance/web-lib/components/Banner';
+import {Card} from '@yearn-finance/web-lib/components/Card';
+import {DescriptionList} from '@yearn-finance/web-lib/components/DescriptionList';
 
 function	Content(): ReactElement {
 	return (