Skip to content

Commit

Permalink
Merge pull request #68 from yearn/issue-51-new-design-system
Browse files Browse the repository at this point in the history 
feat: New design system
  • Loading branch information
@Majorfi
Majorfi authored Jan 9, 2023
2 parents 0af17cf + f5db6ac commit 93db49f
Show file tree
Hide file tree
Showing 15 changed files with 319 additions and 408 deletions.
54 changes: 24 additions & 30 deletions components/common/AppWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,38 @@
import React, {ReactElement} from 'react';
import {AppProps} from 'next/app';
import {AnimatePresence, motion} from 'framer-motion';
import React from 'react';
import Link from 'next/link';
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 LogoYearn from 'components/icons/LogoYearn';
import {KBarProvider} from 'kbar';
import Header from '@yearn-finance/web-lib/layouts/Header.next';

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 type {AppProps} from 'next/app';
import type {ReactElement} from 'react';

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={(): void => undefined}
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>
);
}

Expand Down
31 changes: 0 additions & 31 deletions components/common/KBarButton.tsx
View file

This file was deleted.

10 changes: 6 additions & 4 deletions components/common/Kbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React, {forwardRef, ReactElement, useMemo} from 'react';
import {ActionId,
ActionImpl,
KBarAnimator,
import React, {forwardRef, useMemo} from 'react';
import {KBarAnimator,
KBarPortal,
KBarPositioner,
KBarResults,
KBarSearch,
useMatches} from 'kbar';

import type {ActionId,
ActionImpl} from 'kbar';
import type {ReactElement} from 'react';

const searchStyle = {
padding: '12px 16px',
fontSize: '16px',
Expand Down
4 changes: 3 additions & 1 deletion components/common/Meta.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, {ReactElement} from 'react';
import React from 'react';
import Head from 'next/head';
import {DefaultSeo} from 'next-seo';
import meta from 'public/manifest.json';

import type {ReactElement} from 'react';

function Meta(): ReactElement {
return (
<>
Expand Down
25 changes: 15 additions & 10 deletions components/common/StandardFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
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 from 'react';
import Link from 'next/link';
import meta from 'public/manifest.json';
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 type {ReactElement} from 'react';


function Footer(): ReactElement {
Expand Down Expand Up @@ -41,31 +46,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'}>
Expand Down
120 changes: 0 additions & 120 deletions components/common/StandardHeader.tsx
View file

This file was deleted.

6 changes: 4 additions & 2 deletions components/icons/LogoYearn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, {ReactElement} from 'react';
import React from 'react';

import type {ReactElement} from 'react';

function LogoYearn(props: React.SVGProps<SVGSVGElement>): ReactElement {
return (
Expand All @@ -13,7 +15,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>
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -30,8 +30,8 @@
"@types/node": "^18.11.2",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.40.1",
"@typescript-eslint/parser": "^5.40.1",
"@typescript-eslint/eslint-plugin": "^5.46.1",
"@typescript-eslint/parser": "^5.46.1",
"autoprefixer": "^10.4.12",
"babel-loader": "^8.2.5",
"eslint": ">= 8.25.0",
Expand Down
9 changes: 5 additions & 4 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React, {ReactElement} from 'react';
import {AppProps} from 'next/app';
import {WithYearn} from '@yearn-finance/web-lib/contexts';
import React from 'react';
import AppWrapper from 'components/common/AppWrapper';
import {WithYearn} from '@yearn-finance/web-lib/contexts/WithYearn';

import type {AppProps} from 'next/app';
import type {ReactElement} from 'react';

import '../style.css';

Expand All @@ -11,7 +13,6 @@ function MyApp(props: AppProps): ReactElement {
options={{
web3: {
shouldUseWallets: true,
shouldUseStrictChainMode: false,
defaultChainID: 1,
supportedChainID: [1, 10, 250, 42161, 1337, 31337]
}
Expand Down
7 changes: 5 additions & 2 deletions pages/_document.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React, {ReactElement} from 'react';
import Document, {DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript} from 'next/document';
import React from 'react';
import Document, {Head, Html, Main, NextScript} from 'next/document';

import type {DocumentContext, DocumentInitialProps} from 'next/document';
import type {ReactElement} from 'react';

const modeScript = `
let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
Expand Down
Loading

1 comment on commit 93db49f

@vercel
Copy link

@vercel vercel bot commented on 93db49f Jan 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web-lib-template – ./

web-template-bay.vercel.app
web-lib-template-git-main.yearn.farm
web-lib-template.yearn.farm
web.ycorpo.com

Please sign in to comment.