fix: Apply custom font to modal content (#274)

* Move font class up to body tag * Integrate font with tailwind setting
hyperlane-xyz · Sep 27, 2024 · d468e2c · d468e2c
1 parent a49d396
commit d468e2c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 28 deletions.
diff --git 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) {
       <div
         style={styles.container}
         id="app-content"
-        className={`relative flex flex-col justify-between h-full min-h-screen w-full min-w-screen ${MAIN_FONT.className}`}
+        className="relative flex flex-col justify-between h-full min-h-screen w-full min-w-screen"
       >
         <Header />
         <div className="sm:px-4 mx-auto grow flex items-center max-w-screen-xl">

diff --git 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'] });
+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/features/wallet/SideBarMenu.tsx b/src/features/wallet/SideBarMenu.tsx
@@ -86,7 +86,7 @@ export function SideBarMenu({
           <div className="w-full rounded-t-md bg-primary-500 py-2 px-3.5 text-white text-base font-normal tracking-wider">
             Connected Wallets
           </div>
-          <div className="my-3 px-3 space-y-3">
+          <div className="my-3 px-3 space-y-2">
             {readyAccounts.map((acc, i) => (
               <AccountSummary key={i} account={acc} />
             ))}

diff --git 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 <div></div>;
   }
 
+  // Note, the font definition is required both here and in _document.tsx
+  // Otherwise Next.js will not load the font
   return (
-    <ErrorBoundary>
-      <QueryClientProvider client={reactQueryClient}>
-        <WarpContext>
-          <EvmWalletContext>
-            <SolanaWalletContext>
-              <CosmosWalletContext>
-                <AppLayout>
-                  <Component {...pageProps} />
-                  <Analytics />
-                </AppLayout>
-                <ToastContainer
-                  transition={Zoom}
-                  position={toast.POSITION.BOTTOM_RIGHT}
-                  limit={2}
-                />
-              </CosmosWalletContext>
-            </SolanaWalletContext>
-          </EvmWalletContext>
-        </WarpContext>
-      </QueryClientProvider>
-    </ErrorBoundary>
+    <div className={`${MAIN_FONT.variable} font-sans text-black`}>
+      <ErrorBoundary>
+        <QueryClientProvider client={reactQueryClient}>
+          <WarpContext>
+            <EvmWalletContext>
+              <SolanaWalletContext>
+                <CosmosWalletContext>
+                  <AppLayout>
+                    <Component {...pageProps} />
+                    <Analytics />
+                  </AppLayout>
+                  <ToastContainer
+                    transition={Zoom}
+                    position={toast.POSITION.BOTTOM_RIGHT}
+                    limit={2}
+                  />
+                </CosmosWalletContext>
+              </SolanaWalletContext>
+            </EvmWalletContext>
+          </WarpContext>
+        </QueryClientProvider>
+      </ErrorBoundary>
+    </div>
   );
 }
diff --git 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() {
         <meta property="og:image" content={`${APP_URL}/logo.png`} />
         <meta property="og:description" content={APP_DESCRIPTION} />
       </Head>
-      <body className="text-black">
+      <body className={`${MAIN_FONT.variable} font-sans text-black`}>
         <Main />
         <NextScript />
       </body>

diff --git 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'],
     },