src/components/Footer/Footer.tsx

@@ -2,7 +2,6 @@ import { Box, Button, Link as LinkMui } from '@mui/material'
 import { Link } from 'react-router-dom'
 import styles from './style.module.scss'
 import { Container } from '../Container'
-import nostrImage from '../../assets/images/nostr.gif'
 
 export const Footer = () => (
   <footer className={`${styles.borderTop} ${styles.footer}`}>
@@ -118,7 +117,12 @@ export const Footer = () => (
             }}
             variant={'contained'}
           >
-            <img src={nostrImage} width="25" alt="nostr logo" height="25" />
+            <img
+              src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
+              width="25"
+              alt="nostr logo"
+              height="25"
+            />
           </Button>
         </Box>
       </Box>

src/index.css

@@ -16,6 +16,30 @@
   box-sizing: border-box;
 }
 
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 300;
+  src: local('Roboto-Light'), url(./assets/roboto-font/Roboto-Light.ttf);
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 400;
+  src: local('Roboto-Regular'), url(./assets/Roboto-font/Roboto-Regular.ttf);
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 500;
+  src: local('Roboto-Medium'), url(./assets/Roboto-font/Roboto-Medium.ttf);
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 700;
+  src: local('Roboto-Bold'), url(./assets/Roboto-font/Roboto-Bold.ttf);
+}
+
 body {
   margin: 0;
   min-width: 320px;
@@ -107,160 +131,3 @@ button:disabled {
   border-radius: 50%;
   overflow: hidden;
 }
-
-/* Fonts */
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-medium.eot');
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url('assets/fonts/roboto-medium.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-medium.woff2') format('woff2'),
-    url('assets/fonts/roboto-medium.woff') format('woff'),
-    url('assets/fonts/roboto-medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-lightitalic.eot');
-  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
-    url('assets/fonts/roboto-lightitalic.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-lightitalic.woff2') format('woff2'),
-    url('assets/fonts/roboto-lightitalic.woff') format('woff'),
-    url('assets/fonts/roboto-lightitalic.ttf') format('truetype');
-  font-weight: 300;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-blackitalic.eot');
-  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
-    url('assets/fonts/roboto-blackitalic.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-blackitalic.woff2') format('woff2'),
-    url('assets/fonts/roboto-blackitalic.woff') format('woff'),
-    url('assets/fonts/roboto-blackitalic.ttf') format('truetype');
-  font-weight: 900;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-light.eot');
-  src: local('Roboto Light'), local('Roboto-Light'),
-    url('assets/fonts/roboto-light.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-light.woff2') format('woff2'),
-    url('assets/fonts/roboto-light.woff') format('woff'),
-    url('assets/fonts/roboto-light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-bolditalic.eot');
-  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
-    url('assets/fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-bolditalic.woff2') format('woff2'),
-    url('assets/fonts/roboto-bolditalic.woff') format('woff'),
-    url('assets/fonts/roboto-bolditalic.ttf') format('truetype');
-  font-weight: bold;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-bold.eot');
-  src: local('Roboto Bold'), local('Roboto-Bold'),
-    url('assets/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-bold.woff2') format('woff2'),
-    url('assets/fonts/roboto-bold.woff') format('woff'),
-    url('assets/fonts/roboto-bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-mediumitalic.eot');
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url('assets/fonts/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-mediumitalic.woff2') format('woff2'),
-    url('assets/fonts/roboto-mediumitalic.woff') format('woff'),
-    url('assets/fonts/roboto-mediumitalic.ttf') format('truetype');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-black.eot');
-  src: local('Roboto Black'), local('Roboto-Black'),
-    url('assets/fonts/roboto-black.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-black.woff2') format('woff2'),
-    url('assets/fonts/roboto-black.woff') format('woff'),
-    url('assets/fonts/roboto-black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-italic.eot');
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url('assets/fonts/roboto-italic.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-italic.woff2') format('woff2'),
-    url('assets/fonts/roboto-italic.woff') format('woff'),
-    url('assets/fonts/roboto-italic.ttf') format('truetype');
-  font-weight: normal;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-thinitalic.eot');
-  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
-    url('assets/fonts/roboto-thinitalic.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-thinitalic.woff2') format('woff2'),
-    url('assets/fonts/roboto-thinitalic.woff') format('woff'),
-    url('assets/fonts/roboto-thinitalic.ttf') format('truetype');
-  font-weight: 100;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-thin.eot');
-  src: local('Roboto Thin'), local('Roboto-Thin'),
-    url('assets/fonts/roboto-thin.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-thin.woff2') format('woff2'),
-    url('assets/fonts/roboto-thin.woff') format('woff'),
-    url('assets/fonts/roboto-thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('assets/fonts/roboto-regular.eot');
-  src: local('Roboto'), local('Roboto-Regular'),
-    url('assets/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'),
-    url('assets/fonts/roboto-regular.woff2') format('woff2'),
-    url('assets/fonts/roboto-regular.woff') format('woff'),
-    url('assets/fonts/roboto-regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}

src/layouts/modal/index.tsx

@@ -10,7 +10,6 @@ import styles from './style.module.scss'
 import { appPublicRoutes } from '../../routes'
 import { faClose } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import nostrImage from '../../assets/images/nostr.gif'
 
 function useRouteMatch(patterns: readonly string[]) {
   const { pathname } = useLocation()
@@ -35,7 +34,14 @@ export const Modal = () => {
       to: appPublicRoutes.nostr,
       title: 'Login',
       sx: { padding: '10px' },
-      label: <img src={nostrImage} width="25" alt="nostr logo" height="25" />
+      label: (
+        <img
+          src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
+          width="25"
+          alt="nostr logo"
+          height="25"
+        />
+      )
     }
   ]
   const routeMatch = useRouteMatch(tabs.map((t) => t.to))

src/pages/landing/index.tsx

@@ -109,11 +109,11 @@ export const LandingPage = () => {
     <div className={styles.background}>
       <div
         className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
-        style={{ backgroundImage: `url("${bg_l}")` }}
+        style={{ backgroundImage: `url(${bg_l})` }}
       ></div>
       <div
         className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
-        style={{ backgroundImage: `url("${bg_r}")` }}
+        style={{ backgroundImage: `url(${bg_r})` }}
       ></div>
 
       <Container className={styles.container}>