Merge pull request #276 from IFRCGo/fix/font-import

Separate font imports into separate links

Author: tnagorra

index.html

@@ -23,7 +23,11 @@
         </title>
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght@300;400;600;700&family=OpenSans:wght@300;400;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+        <!-- link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght@300;400;600;700&family=OpenSans:wght@300;400;600;700&display=swap" rel="stylesheet" -->
         <style>
             html, body {
                 margin: 0;

src/App/PageError/index.tsx

@@ -1,8 +1,9 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useRouteError } from 'react-router-dom';
 
 import useBooleanState from '#hooks/useBooleanState';
-import Button, { useButtonFeatures } from '#components/Button';
+import Button from '#components/Button';
+import Link from '#components/Link';
 
 import styles from './styles.module.css';
 
@@ -24,9 +25,15 @@ function PageError() {
             toggle: toggleFullErrorVisibility,
         },
     ] = useBooleanState(false);
-    const {
-        className: containerClassName,
-    } = useButtonFeatures({});
+
+    const handleReloadButtonClick = useCallback(
+        () => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            window.location.reload(true);
+        },
+        [],
+    );
 
     return (
         <div className={styles.pageError}>
@@ -66,13 +73,21 @@ function PageError() {
                 </div>
                 <div className={styles.footer}>
                     {/* NOTE: using the anchor element as it will refresh the page */}
-                    <a
-                        className={containerClassName}
+                    <Link
                         href="/"
+                        external
+                        variant="secondary"
                     >
                         {/* FIXME: use translations */}
                         Go back to homepage
-                    </a>
+                    </Link>
+                    <Button
+                        name={undefined}
+                        onClick={handleReloadButtonClick}
+                    >
+                        {/* FIXME: use translations */}
+                        Reload
+                    </Button>
                 </div>
             </div>
         </div>

src/App/PageError/styles.module.css

@@ -43,6 +43,7 @@
             display: flex;
             align-items: center;
             justify-content: flex-end;
+            gap: var(--go-ui-spacing-md);
         }
     }
 }

src/components/Breadcrumbs/styles.module.css

@@ -8,16 +8,10 @@
 
         &:not(:last-child) {
             color: var(--go-ui-color-gray-70);
-            font-weight: var(--go-ui-font-weight-light);
-            :hover {
-                text-decoration: underline;
-                color: var(--go-ui-color-primary-red);
-            }
         }
 
         &:last-child {
             color: var(--go-ui-color-black);
-            font-weight: var(--go-ui-font-weight-semibold);
         }
     }
 

src/index.css

@@ -42,15 +42,11 @@
     --go-ui-line-height-sm: 1.375;
     --go-ui-line-height-md: 1.5;
 
-    --go-ui-font-weight-thin: 100;
-    --go-ui-font-weight-extra-light: 200;
     --go-ui-font-weight-light: 300;
     --go-ui-font-weight-normal: 400;
     --go-ui-font-weight-medium: 500;
     --go-ui-font-weight-semibold: 600;
     --go-ui-font-weight-bold: 700;
-    --go-ui-font-weight-extrabold: 800;
-    --go-ui-font-weight-black: 900;
 
     --go-ui-width-screen-sm: 640px;
     --go-ui-width-screen-md: 768px;
@@ -267,4 +263,8 @@ ul, ol, p {
         size: portrait A4;
         margin: 10mm;
     }
+
+    body {
+        font-family: 'Open Sans', sans-serif;
+    }
 }

src/views/Emergencies/index.tsx

@@ -312,7 +312,7 @@ export function Component() {
                         </Fragment>
                     ))}
                 </div>
-                <div className={styles.footerDescription}>
+                <div>
                     {strings.emergencyPerformanceProblems}
                 </div>
             </div>

src/views/Emergencies/styles.module.css

@@ -57,9 +57,5 @@
             display: flex;
             gap: var(--go-ui-spacing-xs);
         }
-
-        .footer-description {
-            font-style: italic;
-        }
     }
 }