feat: enable next as default styling

yearn · Sep 19, 2022 · 650c092 · 650c092 · vercel · Sep 19, 2022
1 parent fbc0d0c
commit 650c092
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
 		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
 	},
 	"dependencies": {
-		"@yearn-finance/web-lib": "^0.13.18",
+		"@yearn-finance/web-lib": "^0.13.20",
 		"axios": "^0.27.2",
 		"ethcall": "^4.8.2",
 		"ethers": "^5.7.1",
@@ -46,7 +46,7 @@
 		"postcss-nesting": "^10.2.0",
 		"sass": "^1.54.9",
 		"sharp": "^0.31.0",
-		"ts-loader": "^9.3.1",
+		"ts-loader": "^9.4.0",
 		"typescript": "^4.8.3"
 	}
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,27 +1,47 @@
 import React, {ReactElement} from 'react';
-import Document, {DocumentContext, Head, Html, Main, NextScript} from 'next/document';
+import Document, {DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript} from 'next/document';
+
+const modeScript = `
+  let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+  updateMode()
+  darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
+  window.addEventListener('storage', updateModeWithoutTransitions)
+
+  function updateMode() {
+    let isSystemDarkMode = darkModeMediaQuery.matches
+    let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
+
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+
+    if (isDarkMode === isSystemDarkMode) {
+      delete window.localStorage.isDarkMode
+    }
+  }
+
+  function updateModeWithoutTransitions() {
+    updateMode()
+  }
+`;
 
-type TInitialProps = {
-    html: string;
-    head?: (JSX.Element | null)[] | undefined;
-    styles?: React.ReactElement[] | React.ReactFragment | undefined;
-}
 
 class MyDocument extends Document {
-	static async getInitialProps(ctx: DocumentContext): Promise<TInitialProps> {
+	static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
 		const initialProps = await Document.getInitialProps(ctx);
-		return {...initialProps} as any; // eslint-disable-line
+		return {...initialProps};
 	}
 
 	render(): ReactElement {
 		return (
 			<Html lang={'en'}>
 				<Head>
-					<link rel={'preconnect'} href={'https://fonts.googleapis.com'} />
-					<link rel={'preconnect'} href={'https://fonts.gstatic.com'} crossOrigin={'true'} />
-					<link href={'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap'} rel={'stylesheet'} />
+					<script dangerouslySetInnerHTML={{__html: modeScript}} />
 				</Head>
-				<body className={'bg-neutral-200 transition-colors duration-150'} data-theme={'light'}>
+				<body className={'bg-neutral-200 transition-colors duration-150'}>
 					<Main />
 					<NextScript />
 				</body>

diff --git a/style.css b/style.css
@@ -1,17 +1,13 @@
 /* This will load Tailwindcss + all the overwrite from Yearn lib */
-@import '@yearn-finance/web-lib/dist/style.css';
+@import '@yearn-finance/web-lib/dist/style.next.css';
 
 :root {
-	--default-rounded: 0rem;
-}
-
-:root body[data-theme="light"] {
 	& .project--kbar-wrapper {
 		@apply rounded-default opacity-60 bg-neutral-300/70 hover:bg-neutral-300 transition-colors;
 	}
 }
 
-:root body[data-theme="dark"] {
+:root.dark {
 	& .project--kbar-wrapper {
 		@apply rounded-default opacity-60 bg-neutral-100/70 hover:bg-neutral-100 transition-colors;
 	}
@@ -60,10 +56,3 @@
 		@apply mt-1 pl-2 text-xs transition-colors text-neutral-600
 	}
 }
-
-
-:root body[data-theme="dark"] {
-	& .yearn--input-caption {
-		@apply text-neutral-700
-	}
-}
diff --git a/yarn.lock b/yarn.lock
@@ -2642,10 +2642,10 @@
     "@web3-react/types" "^8.0.20-beta.0"
     eventemitter3 "^4.0.7"
 
-"@yearn-finance/web-lib@^0.13.18":
-  version "0.13.18"
-  resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-0.13.18.tgz#f39e720b862b7f756e35d797336825e88580955b"
-  integrity sha512-WxStvnW/hur4QDs/qudVNJAeCpupkn/xt+DB55zrcHZD+RKDoBVWN2VEB3PO9oIpN0sqRYHCS2mHJRNZKdwP1g==
+"@yearn-finance/web-lib@^0.13.20":
+  version "0.13.20"
+  resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-0.13.20.tgz#ff728db04613f3df9b366c3f6591f9bf715ca858"
+  integrity sha512-eL8Y7vimthvHQksUgIrKedeCmfEjWXfv1vblIy+mk0RtI4xR4aMGUGRphoz0RCbhbS3H84Cira/9tgd8LbksNw==
   dependencies:
     "@coinbase/wallet-sdk" "^3.4.2"
     "@ethersproject/experimental" "^5.6.3"
@@ -6796,10 +6796,10 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-ts-loader@^9.3.1:
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
-  integrity sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==
+ts-loader@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.4.0.tgz#b3f4b4d8553f3a15bef512f123fb488669a2ffc6"
+  integrity sha512-0G3UMhk1bjgsgiwF4rnZRAeTi69j9XMDtmDDMghGSqlWESIAS3LFgJe//GYfE4vcjbyzuURLB9Us2RZIWp2clQ==
   dependencies:
     chalk "^4.1.0"
     enhanced-resolve "^5.0.0"