Merge pull request #178 from fedimint/fix-fonts

fix: gateway fonts
fedimint · Sep 8, 2023 · 64aad55 · 64aad55
2 parents 11a6161 + 4a653d5
commit 64aad55
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 5 deletions.
diff --git a/apps/gateway-ui/src/index.tsx b/apps/gateway-ui/src/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { SharedChakraProvider, theme, Fonts } from '@fedimint/ui';
+import spaceGroteskTtf from '@fedimint/ui/assets/fonts/SpaceGrotesk-Variable.ttf';
+import interTtf from '@fedimint/ui/assets/fonts/Inter-Variable.ttf';
 import { App } from './App';
 import { i18nProvider } from '@fedimint/utils';
 import { languages } from './languages';
@@ -13,7 +15,7 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <Fonts />
+    <Fonts spaceGroteskTtf={spaceGroteskTtf} interTtf={interTtf} />
     <SharedChakraProvider theme={theme}>
       <App />
     </SharedChakraProvider>

diff --git a/apps/gateway-ui/src/react-app-env.d.ts b/apps/gateway-ui/src/react-app-env.d.ts
@@ -1 +1,7 @@
 /// <reference types="react-scripts" />
+
+// Fonts are handled by react-scripts as well
+declare module '*.ttf' {
+  const src: string;
+  export default src;
+}
diff --git a/apps/guardian-ui/src/App.tsx b/apps/guardian-ui/src/App.tsx
@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { Box, VStack, Spinner, Heading, Text, Center } from '@chakra-ui/react';
 import { theme, Fonts, SharedChakraProvider, Wrapper } from '@fedimint/ui';
+import spaceGroteskTtf from '@fedimint/ui/assets/fonts/SpaceGrotesk-Variable.ttf';
+import interTtf from '@fedimint/ui/assets/fonts/Inter-Variable.ttf';
 import { SetupContextProvider } from './setup/SetupContext';
 import { AdminContextProvider } from './admin/AdminContext';
 import { FederationSetup } from './setup/FederationSetup';
@@ -71,7 +73,7 @@ export const App = React.memo(function App() {
 
   return (
     <React.StrictMode>
-      <Fonts />
+      <Fonts spaceGroteskTtf={spaceGroteskTtf} interTtf={interTtf} />
       <SharedChakraProvider theme={theme}>
         <Center>
           <Box width='100%'>{content}</Box>

diff --git a/apps/guardian-ui/src/react-app-env.d.ts b/apps/guardian-ui/src/react-app-env.d.ts
@@ -1 +1,7 @@
 /// <reference types='react-scripts' />
+
+// Fonts are handled by react-scripts as well
+declare module '*.ttf' {
+  const src: string;
+  export default src;
+}
diff --git a/...ardian-ui/public/fonts/Inter-Variable.ttf → packages/ui/assets/fonts/Inter-Variable.ttf b/...ardian-ui/public/fonts/Inter-Variable.ttf → packages/ui/assets/fonts/Inter-Variable.ttf
diff --git a/...ui/public/fonts/SpaceGrotesk-Variable.ttf → ...ui/assets/fonts/SpaceGrotesk-Variable.ttf b/...ui/public/fonts/SpaceGrotesk-Variable.ttf → ...ui/assets/fonts/SpaceGrotesk-Variable.ttf
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
@@ -374,23 +374,28 @@ export const theme = extendTheme(
   withDefaultColorScheme({ colorScheme: 'gray', components: ['Table'] })
 );
 
-export const Fonts = () => (
+interface FontsProps {
+  spaceGroteskTtf: string;
+  interTtf: string;
+}
+
+export const Fonts: React.FC<FontsProps> = ({ spaceGroteskTtf, interTtf }) => (
   <Global
     styles={`
       @font-face {
         font-family: ${SPACE_GROTESK};
         font-style: normal;
         font-weight: 300 700;
         font-display: swap;
-        src: url('/fonts/SpaceGrotesk-Variable.ttf') format('truetype');
+        src: url(${spaceGroteskTtf}) format('truetype');
       }
 
       @font-face {
         font-family: ${INTER};
         font-style: normal;
         font-weight: 100 900;
         font-display: swap;
-        src: url('/fonts/Inter-Variable.ttf') format('truetype');
+        src: url(${interTtf}) format('truetype');
       }
     `}
   />