From 6d4a8b4f64840320afff4a99519ddb25dfac73ef Mon Sep 17 00:00:00 2001
From: artur <brugeman.artur@gmail.com>
Date: Mon, 19 Feb 2024 11:01:34 +0300
Subject: [PATCH] Remove logos from signup modals, move signup hints to the top
 of modals, fix signup hints

---
 .../Modal/ModalImportKeys/ModalImportKeys.tsx      | 11 ++++++-----
 src/components/Modal/ModalLogin/ModalLogin.tsx     | 14 ++++++--------
 src/components/Modal/ModalSignUp/ModalSignUp.tsx   | 12 +++++-------
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx b/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
index 9595b87..d8e4dda 100644
--- a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
+++ b/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
@@ -6,7 +6,6 @@ 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'
@@ -149,13 +148,15 @@ export const ModalImportKeys = () => {
   const nsecHelperText = getNsecHelperText()
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+    <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'}>
           <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"
diff --git a/src/components/Modal/ModalLogin/ModalLogin.tsx b/src/components/Modal/ModalLogin/ModalLogin.tsx
index 37190ae..fd0fafa 100644
--- a/src/components/Modal/ModalLogin/ModalLogin.tsx
+++ b/src/components/Modal/ModalLogin/ModalLogin.tsx
@@ -5,7 +5,6 @@ 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'
@@ -119,13 +118,15 @@ export const ModalLogin = () => {
   }, [isModalOpened, cleanUpStates])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+    <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'}>
           <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"
@@ -148,9 +149,6 @@ export const ModalLogin = () => {
           <Button type="submit" fullWidth disabled={isLoading}>
             Add account {isLoading && <LoadingSpinner />}
           </Button>
-          <Typography padding={'0 0.5rem'} noWrap variant="body2" color={'GrayText'}>
-            Import your keys from another nsec.app instance
-          </Typography>
         </Stack>
       </Stack>
     </Modal>
diff --git a/src/components/Modal/ModalSignUp/ModalSignUp.tsx b/src/components/Modal/ModalSignUp/ModalSignUp.tsx
index b867d84..f3165fc 100644
--- a/src/components/Modal/ModalSignUp/ModalSignUp.tsx
+++ b/src/components/Modal/ModalSignUp/ModalSignUp.tsx
@@ -4,7 +4,6 @@ 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'
@@ -84,13 +83,15 @@ export const ModalSignUp = () => {
   }, [isModalOpened])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
       <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
           <Typography fontWeight={600} variant="h5">
             Sign up
           </Typography>
+          <Typography noWrap variant="body2" color={'GrayText'}>
+            Generate new Nostr keys
+          </Typography>
         </Stack>
         <Input
           label="Username"
@@ -117,9 +118,6 @@ export const ModalSignUp = () => {
           <Button fullWidth type="submit" disabled={isLoading}>
             Create account {isLoading && <LoadingSpinner />}
           </Button>
-          <Typography padding={'0 0.5rem'} noWrap variant="body2" color={'GrayText'}>
-            New keys will be generated for you
-          </Typography>
         </Stack>
       </Stack>
     </Modal>