feat(connect-popup): load suite-like fonts

trezor · Sep 16, 2022 · 6ee22ca · 6ee22ca
1 parent bfbf44f
commit 6ee22ca
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/packages/connect-popup/src/static/popup.html b/packages/connect-popup/src/static/popup.html
@@ -17,6 +17,9 @@
         <meta http-equiv="Pragma" content="no-cache" />
         <meta http-equiv="Expires" content="-1" />
         <link href="./popup.css" rel="stylesheet" />
+
+        <!-- suite-like fonts -->
+        <link media="all" rel="stylesheet" href="./fonts/fonts.css" />
     </head>
     <body>
         <main>

diff --git a/packages/connect-popup/webpack/prod.webpack.config.ts b/packages/connect-popup/webpack/prod.webpack.config.ts
@@ -81,6 +81,7 @@ export default {
                 },
             ],
         }),
+        // legacy fonts, should be removed once refactoring into React is finished
         new CopyPlugin({
             patterns: [
                 {
@@ -89,6 +90,14 @@ export default {
                 },
             ],
         }),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: `${path.join(__dirname, '../../suite-data/files/fonts')}`,
+                    to: `${DIST}/fonts`,
+                },
+            ],
+        }),
         new CopyPlugin({
             patterns: [
                 {

diff --git a/packages/connect-ui/src/index.tsx b/packages/connect-ui/src/index.tsx
@@ -11,6 +11,7 @@ import { ErrorView, ErrorViewProps } from './views/Error';
 import { ThemeWrapper } from './support/ThemeWrapper';
 import { IntlWrapper } from './support/IntlWrapper';
 import { ErrorBoundary } from './support/ErrorBoundary';
+import { GlobalStyle } from './support/GlobalStyle';
 
 export type ConnectUIProps = TransportProps | PassphraseProps | ErrorViewProps;
 
@@ -31,6 +32,7 @@ export const ConnectUI = (props: ConnectUIProps) => {
 
     return (
         <ErrorBoundary>
+            <GlobalStyle />
             <ThemeWrapper>
                 {/* todo: load translations from somewhere and pass them to intl */}
                 <IntlWrapper>{getComponent()}</IntlWrapper>

diff --git a/packages/connect-ui/src/support/GlobalStyle.tsx b/packages/connect-ui/src/support/GlobalStyle.tsx
@@ -0,0 +1,7 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+    * {
+        font-family: "TT Hoves", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    }
+`;