add local fonts

config-overrides.js

@@ -3,37 +3,37 @@ const path = require('path')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 
 module.exports = function override(config) {
-	const fallback = config.resolve.fallback || {}
-	Object.assign(fallback, {
-		crypto: require.resolve('crypto-browserify'),
-		stream: require.resolve('stream-browserify'),
-		assert: require.resolve('assert'),
-		http: require.resolve('stream-http'),
-		https: require.resolve('https-browserify'),
-		os: require.resolve('os-browserify'),
-		url: require.resolve('url'),
-	})
-	config.resolve.fallback = fallback
-	config.plugins = (config.plugins || []).concat([
-		new webpack.ProvidePlugin({
-			process: 'process/browser',
-			Buffer: ['buffer', 'Buffer'],
-		}),
-	])
-	config.module.rules.unshift({
-		test: /\.m?js$/,
-		resolve: {
-			fullySpecified: false, // disable the behavior
-		},
-	})
-	// turns off the plugin that forbids importing from node_modules for the above-mentioned stuff
-	config.resolve.plugins = config.resolve.plugins.filter((plugin) => {
-		return !(plugin instanceof ModuleScopePlugin)
-	})
+  const fallback = config.resolve.fallback || {}
+  Object.assign(fallback, {
+    crypto: require.resolve('crypto-browserify'),
+    stream: require.resolve('stream-browserify'),
+    assert: require.resolve('assert'),
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    os: require.resolve('os-browserify'),
+    url: require.resolve('url'),
+  })
+  config.resolve.fallback = fallback
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ])
+  config.module.rules.unshift({
+    test: /\.m?js$/,
+    resolve: {
+      fullySpecified: false, // disable the behavior
+    },
+  })
+  // turns off the plugin that forbids importing from node_modules for the above-mentioned stuff
+  config.resolve.plugins = config.resolve.plugins.filter((plugin) => {
+    return !(plugin instanceof ModuleScopePlugin)
+  })
 
-	config.resolve.alias = {
-		'@': path.resolve(__dirname, 'src'),
-	}
+  config.resolve.alias = {
+    '@': path.resolve(__dirname, 'src'),
+  }
 
-	return config
+  return config
 }

public/index.html

@@ -10,12 +10,6 @@
     <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <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=Inter:wght@200;300;400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -6,6 +6,7 @@ import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography, useTheme } from '@mui/material'
+import { StyledAppLogo } from './styled'
 import { useNavigate } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { FormInputType, schema } from './const'
@@ -148,15 +149,13 @@ export const ModalImportKeys = () => {
   const nsecHelperText = getNsecHelperText()
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
-      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
+    <Modal open={isModalOpened} onClose={handleCloseModal}>
+      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
+          <StyledAppLogo />
           <Typography fontWeight={600} variant="h5">
             Import key
           </Typography>
-          <Typography noWrap variant="body2" color={'GrayText'}>
-            Bring your existing Nostr keys to Nsec.app
-          </Typography>
         </Stack>
         <Input
           label="Choose a username"

src/components/Modal/ModalLogin/ModalLogin.tsx

@@ -5,6 +5,7 @@ import { swicCall } from '@/modules/swic'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography } from '@mui/material'
+import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
 import { useNavigate, useSearchParams } from 'react-router-dom'
@@ -99,7 +100,7 @@ export const ModalLogin = () => {
       if (isPopup && isModalOpened) {
         swicCall('fetchPendingRequests', npub, appNpub)
 
-        fetchNpubNames(npub).then((names) => {
+        fetchNpubNames(npub).then(names => {
           if (names.length) {
             setValue('username', `${names[0]}@${DOMAIN}`)
           }
@@ -118,15 +119,13 @@ export const ModalLogin = () => {
   }, [isModalOpened, cleanUpStates])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
-      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
+    <Modal open={isModalOpened} onClose={handleCloseModal}>
+      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
+          <StyledAppLogo />
           <Typography fontWeight={600} variant="h5">
             Login
           </Typography>
-          <Typography noWrap variant="body2" color={'GrayText'}>
-            Sync keys from the cloud to this device
-          </Typography>
         </Stack>
         <Input
           label="Username or nip05 or npub"
@@ -142,14 +141,10 @@ export const ModalLogin = () => {
           {...register('password')}
           {...inputProps}
           error={!!errors.password}
-          helperText={'Password you set in Cloud Sync settings'}
         />
-
-        <Stack gap={'0.5rem'}>
-          <Button type="submit" fullWidth disabled={isLoading}>
-            Add account {isLoading && <LoadingSpinner />}
-          </Button>
-        </Stack>
+        <Button type="submit" fullWidth disabled={isLoading}>
+          Add account {isLoading && <LoadingSpinner />}
+        </Button>
       </Stack>
     </Modal>
   )

src/components/Modal/ModalSignUp/ModalSignUp.tsx

@@ -4,6 +4,7 @@ import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography, useTheme } from '@mui/material'
 import React, { ChangeEvent, useEffect, useState } from 'react'
+import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
 import { CheckmarkIcon } from '@/assets'
@@ -83,15 +84,13 @@ export const ModalSignUp = () => {
   }, [isModalOpened])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
+    <Modal open={isModalOpened} onClose={handleCloseModal}>
       <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit}>
-        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
+          <StyledAppLogo />
           <Typography fontWeight={600} variant="h5">
             Sign up
           </Typography>
-          <Typography noWrap variant="body2" color={'GrayText'}>
-            Generate new Nostr keys
-          </Typography>
         </Stack>
         <Input
           label="Username"
@@ -114,11 +113,9 @@ export const ModalSignUp = () => {
             },
           }}
         />
-        <Stack gap={'0.5rem'}>
-          <Button fullWidth type="submit" disabled={isLoading}>
-            Create account {isLoading && <LoadingSpinner />}
-          </Button>
-        </Stack>
+        <Button fullWidth type="submit" disabled={isLoading}>
+          Create account {isLoading && <LoadingSpinner />}
+        </Button>
       </Stack>
     </Modal>
   )

src/index.css

@@ -1,17 +1,63 @@
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter ExtraLight'),
+    local('Inter-ExtraLight'),
+    url('./assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Light'),
+    local('Inter-Light'),
+    url('./assets/fonts/Inter/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Regular'),
+    local('Inter-Regular'),
+    url('./assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Medium'),
+    local('Inter-Medium'),
+    url('./assets/fonts/Inter/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter SemiBold'),
+    local('Inter-SemiBold'),
+    url('./assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Bold'),
+    local('Inter-Bold'),
+    url('./assets/fonts/Inter/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: 'Inter', sans-serif;
 }
 
 html,

src/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './index.css'
+import ThemeProvider from './modules/theme/ThemeProvider'
 import App from './App'
+import './index.css'
 import reportWebVitals from './reportWebVitals'
 import { swicRegister } from './modules/swic'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { persistor, store } from './store'
-import ThemeProvider from './modules/theme/ThemeProvider'
 import { PersistGate } from 'redux-persist/integration/react'
 import { SnackbarProvider } from 'notistack'
 

src/modules/theme/theme.ts

@@ -21,6 +21,7 @@ const commonTheme: Theme = createTheme({
       styleOverrides: {
         root: {
           textTransform: 'initial',
+          color: 'red',
         },
       },
     },
@@ -96,4 +97,6 @@ const darkTheme: Theme = createTheme({
   },
 })
 
+console.log(darkTheme)
+
 export { lightTheme, darkTheme }

src/shared/Input/Input.tsx

@@ -56,7 +56,7 @@ const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({
       },
     },
     '& > .helper_text': {
-      margin: '0.5rem 0.5rem 0',
+      margin: '0.5rem 1rem 0',
       color: theme.palette.text.primary,
     },
     '& > .label': {