Merge pull request #90 from yearn/feat/mono

Feat/mono
yearn · Oct 3, 2024 · 4cf2f53 · 4cf2f53
2 parents 403e508 + dc6b82b
commit 4cf2f53
Show file tree

Hide file tree

Showing 26 changed files with 16,129 additions and 39 deletions.
diff --git a/packages/lib/components/Header.tsx b/packages/lib/components/Header.tsx
@@ -244,7 +244,7 @@ function AppHeader({version}: {version: 'bootstrap' | 'live'}): ReactElement {
 						</button>
 					</div>
 					<div className={'flex w-1/3 justify-center'}>
-						<LogoYPools className={'mt-6 text-[#63C532]'} />
+						<LogoYPools className={'text-accent mt-6'} />
 					</div>
 					<div className={'flex w-1/3 items-center justify-end'}>
 						<NetworkSelector networks={[]} />

diff --git a/packages/lib/components/Meta.tsx b/packages/lib/components/Meta.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import Head from 'next/head';
+
+import type {ReactElement} from 'react';
+
+type TMeta = {
+	title: string;
+	titleColor: string;
+	themeColor: string;
+	description: string;
+	og: string;
+	uri: string;
+};
+
+export function Meta(meta: TMeta): ReactElement {
+	return (
+		<Head>
+			<title>{meta.title}</title>
+			<meta
+				httpEquiv={'X-UA-Compatible'}
+				content={'IE=edge'}
+			/>
+			<meta
+				name={'viewport'}
+				content={'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover'}
+			/>
+			<meta
+				name={'description'}
+				content={meta.description}
+			/>
+			<meta
+				name={'msapplication-TileColor'}
+				content={meta.titleColor}
+			/>
+			<meta
+				name={'theme-color'}
+				content={meta.themeColor}
+			/>
+
+			<meta
+				name={'application-name'}
+				content={meta.title}
+			/>
+			<meta
+				name={'apple-mobile-web-app-title'}
+				content={meta.title}
+			/>
+			<meta
+				name={'apple-mobile-web-app-capable'}
+				content={'yes'}
+			/>
+			<meta
+				name={'apple-mobile-web-app-status-bar-style'}
+				content={'default'}
+			/>
+			<meta
+				name={'format-detection'}
+				content={'telephone=no'}
+			/>
+			<meta
+				name={'mobile-web-app-capable'}
+				content={'yes'}
+			/>
+			<meta
+				name={'msapplication-config'}
+				content={'/favicons/browserconfig.xml'}
+			/>
+			<meta
+				name={'msapplication-tap-highlight'}
+				content={'no'}
+			/>
+
+			<link
+				rel={'manifest'}
+				href={'/manifest.json'}
+			/>
+			<link
+				rel={'mask-icon'}
+				href={'/favicons/safari-pinned-tab.svg'}
+				color={meta.themeColor}
+			/>
+			<link
+				rel={'shortcut icon'}
+				type={'image/x-icon'}
+				href={'/favicons/favicon.ico'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'32x32'}
+				href={'/favicons/favicon-32x32.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'16x16'}
+				href={'/favicons/favicon-16x16.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'512x512'}
+				href={'/favicons/favicon-512x512.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'192x192'}
+				href={'/favicons/android-icon-192x192.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'144x144'}
+				href={'/favicons/android-icon-144x144.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				href={'/favicons/apple-icon.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				sizes={'152x152'}
+				href={'/favicons/apple-icon-152x152.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				sizes={'180x180'}
+				href={'/favicons/apple-icon-180x180.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				sizes={'167x167'}
+				href={'/favicons/apple-icon-167x167.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'512x512'}
+				href={'/favicons/favicon-512x512.png'}
+			/>
+			<meta
+				name={'googlebot'}
+				content={'index,nofollow'}
+			/>
+			<meta charSet={'utf-8'} />
+			<meta
+				property={'twitter:image'}
+				content={meta.og}
+			/>
+			<meta
+				property={'twitter:card'}
+				content={'summary_large_image'}
+			/>
+			<meta
+				property={'twitter:title'}
+				content={meta.title}
+			/>
+			<meta
+				property={'twitter:description'}
+				content={meta.description}
+			/>
+
+			<meta
+				property={'og:image'}
+				content={meta.og}
+			/>
+			<meta
+				property={'og:url'}
+				content={meta.uri}
+			/>
+			<meta
+				property={'og:title'}
+				content={meta.title}
+			/>
+			<meta
+				property={'og:description'}
+				content={meta.description}
+			/>
+		</Head>
+	);
+}
diff --git a/packages/lib/components/WithFonts.tsx b/packages/lib/components/WithFonts.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import localFont from 'next/font/local';
+
+import type {ReactElement, ReactNode} from 'react';
+
+const aeonik = localFont({
+	variable: '--font-aeonik',
+	display: 'swap',
+	src: [
+		{
+			path: '../public/fonts/Aeonik-Regular.woff2',
+			weight: '400',
+			style: 'normal'
+		},
+		{
+			path: '../public/fonts/Aeonik-Bold.woff2',
+			weight: '700',
+			style: 'normal'
+		},
+		{
+			path: '../public/fonts/Aeonik-Black.ttf',
+			weight: '900',
+			style: 'normal'
+		}
+	]
+});
+
+const aeonikMono = localFont({
+	variable: '--font-aeonik-mono',
+	display: 'swap',
+	src: [
+		{
+			path: '../public/fonts/AeonikMono-Regular.woff2',
+			weight: '400',
+			style: 'normal'
+		},
+		{
+			path: '../public/fonts/AeonikMono-Bold.woff2',
+			weight: '700',
+			style: 'normal'
+		}
+	]
+});
+
+export function WithFonts(props: {children: ReactNode}): ReactElement {
+	return (
+		<div style={{fontFamily: `${aeonik.style.fontFamily}, ${aeonikMono.style.fontFamily}`}}>
+			<style
+				jsx
+				global>
+				{`
+					:root {
+						--aeonik-font: ${aeonik.style.fontFamily};
+						--font-aeonik-mono: ${aeonikMono.style.fontFamily};
+					}
+				`}
+			</style>
+
+			{props.children}
+		</div>
+	);
+}
diff --git a/packages/lib/public/fonts/Aeonik-Black.ttf b/packages/lib/public/fonts/Aeonik-Black.ttf
diff --git a/packages/lib/public/fonts/Aeonik-Bold.eot b/packages/lib/public/fonts/Aeonik-Bold.eot