From 6c54d837fac4101201c581b123f412182de4d639 Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Fri, 27 Sep 2024 12:18:20 -0400 Subject: [PATCH 1/5] Move font class up to body tag --- src/components/layout/AppLayout.tsx | 4 ++-- src/features/wallet/SideBarMenu.tsx | 2 +- src/pages/_document.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx index 7b04c8f7..a21189be 100644 --- a/src/components/layout/AppLayout.tsx +++ b/src/components/layout/AppLayout.tsx @@ -1,7 +1,7 @@ import Head from 'next/head'; import { PropsWithChildren } from 'react'; -import { APP_NAME, BACKGROUND_COLOR, BACKGROUND_IMAGE, MAIN_FONT } from '../../consts/app'; +import { APP_NAME, BACKGROUND_COLOR, BACKGROUND_IMAGE } from '../../consts/app'; import { Footer } from '../nav/Footer'; import { Header } from '../nav/Header'; @@ -16,7 +16,7 @@ export function AppLayout({ children }: PropsWithChildren) {
diff --git a/src/features/wallet/SideBarMenu.tsx b/src/features/wallet/SideBarMenu.tsx index db11553a..5519460f 100644 --- a/src/features/wallet/SideBarMenu.tsx +++ b/src/features/wallet/SideBarMenu.tsx @@ -86,7 +86,7 @@ export function SideBarMenu({
Connected Wallets
-
+
{readyAccounts.map((acc, i) => ( ))} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 75ed663d..a10e8593 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,6 +1,6 @@ import { Head, Html, Main, NextScript } from 'next/document'; -import { APP_DESCRIPTION, APP_NAME, APP_URL, BRAND_COLOR } from '../consts/app'; +import { APP_DESCRIPTION, APP_NAME, APP_URL, BRAND_COLOR, MAIN_FONT } from '../consts/app'; export default function Document() { return ( @@ -31,7 +31,7 @@ export default function Document() { - +
From c3a69f030fe8a079c48dad10100066133dbabf17 Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Fri, 27 Sep 2024 12:51:14 -0400 Subject: [PATCH 2/5] Integrate font with tailwind setting --- src/consts/app.ts | 2 +- src/pages/_document.tsx | 2 +- tailwind.config.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/consts/app.ts b/src/consts/app.ts index a02867c5..c4dca516 100644 --- a/src/consts/app.ts +++ b/src/consts/app.ts @@ -2,7 +2,7 @@ import { Space_Grotesk } from 'next/font/google'; import { Color } from '../styles/Color'; -export const MAIN_FONT = Space_Grotesk({ subsets: ['latin'] }); +export const MAIN_FONT = Space_Grotesk({ subsets: ['latin'], variable: '--font-main' }); export const APP_NAME = 'Hyperlane Warp UI Template'; export const APP_DESCRIPTION = 'A DApp for Hyperlane Warp Route transfers'; export const APP_URL = 'hyperlane-warp-template.vercel.app'; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index a10e8593..9ed6bd65 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -31,7 +31,7 @@ export default function Document() { - +
diff --git a/tailwind.config.js b/tailwind.config.js index 3d6fddb9..755989ac 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { fontFamily: { - sans: ['sans-serif'], + sans: ['var(--font-main)'], serif: ['Garamond', 'serif'], mono: ['Courier New', 'monospace'], }, From 5060f3e6db64b2573e44dc301787fc1bb6af6bb5 Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Fri, 27 Sep 2024 13:11:39 -0400 Subject: [PATCH 3/5] Attempt to set both _document and _app --- src/consts/app.ts | 7 ++++++- src/pages/_app.tsx | 45 ++++++++++++++++++++++++--------------------- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/consts/app.ts b/src/consts/app.ts index c4dca516..50484be2 100644 --- a/src/consts/app.ts +++ b/src/consts/app.ts @@ -2,7 +2,12 @@ import { Space_Grotesk } from 'next/font/google'; import { Color } from '../styles/Color'; -export const MAIN_FONT = Space_Grotesk({ subsets: ['latin'], variable: '--font-main' }); +export const MAIN_FONT = Space_Grotesk({ + subsets: ['latin'], + variable: '--font-main', + preload: true, + fallback: ['sans-serif'], +}); export const APP_NAME = 'Hyperlane Warp UI Template'; export const APP_DESCRIPTION = 'A DApp for Hyperlane Warp Route transfers'; export const APP_URL = 'hyperlane-warp-template.vercel.app'; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1b071455..17b47eea 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,6 +10,7 @@ import '@hyperlane-xyz/widgets/styles.css'; import { ErrorBoundary } from '../components/errors/ErrorBoundary'; import { AppLayout } from '../components/layout/AppLayout'; +import { MAIN_FONT } from '../consts/app'; import { WarpContext } from '../context/WarpContext'; import { CosmosWalletContext } from '../features/wallet/context/CosmosWalletContext'; import { EvmWalletContext } from '../features/wallet/context/EvmWalletContext'; @@ -34,26 +35,28 @@ export default function App({ Component, pageProps }: AppProps) { } return ( - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + +
); } From b064fa738333735b4801dd196d51508cff30b545 Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Fri, 27 Sep 2024 13:17:38 -0400 Subject: [PATCH 4/5] Attempt to remove _app change --- src/pages/_app.tsx | 45 +++++++++++++++++++++------------------------ 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 17b47eea..1b071455 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,7 +10,6 @@ import '@hyperlane-xyz/widgets/styles.css'; import { ErrorBoundary } from '../components/errors/ErrorBoundary'; import { AppLayout } from '../components/layout/AppLayout'; -import { MAIN_FONT } from '../consts/app'; import { WarpContext } from '../context/WarpContext'; import { CosmosWalletContext } from '../features/wallet/context/CosmosWalletContext'; import { EvmWalletContext } from '../features/wallet/context/EvmWalletContext'; @@ -35,28 +34,26 @@ export default function App({ Component, pageProps }: AppProps) { } return ( -
- - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + ); } From 8a989e51e24a0cdfa22942d66de8bbf4968c3f27 Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Fri, 27 Sep 2024 13:25:41 -0400 Subject: [PATCH 5/5] Restore _app font setting --- src/pages/_app.tsx | 47 +++++++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1b071455..dd3cddce 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,6 +10,7 @@ import '@hyperlane-xyz/widgets/styles.css'; import { ErrorBoundary } from '../components/errors/ErrorBoundary'; import { AppLayout } from '../components/layout/AppLayout'; +import { MAIN_FONT } from '../consts/app'; import { WarpContext } from '../context/WarpContext'; import { CosmosWalletContext } from '../features/wallet/context/CosmosWalletContext'; import { EvmWalletContext } from '../features/wallet/context/EvmWalletContext'; @@ -33,27 +34,31 @@ export default function App({ Component, pageProps }: AppProps) { return
; } + // Note, the font definition is required both here and in _document.tsx + // Otherwise Next.js will not load the font return ( - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + +
); }