Remove logos from signup modals, move signup hints to the top of modals, fix signup hints

Don't stop signup if enable-push failed

src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx

@@ -123,6 +123,7 @@ export const ModalConfirmConnect = () => {
       const options = { perms, appUrl }
       await confirmPending(pendingReqId, true, true, options)
     } else {
+
       try {
         await askNotificationPermission()
         const result = await swicCall('enablePush')
@@ -131,7 +132,7 @@ export const ModalConfirmConnect = () => {
       } catch (e: any) {
         console.log('error', e)
         notify('Please enable Notifications in website settings!', 'error')
-        return
+        // keep going
       }
 
       try {

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}>
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
+        <Stack gap={'0.2rem'} padding={'0 1rem'} 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,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'
@@ -100,7 +99,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}`)
           }
@@ -119,13 +118,15 @@ export const ModalLogin = () => {
   }, [isModalOpened, cleanUpStates])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
+        <Stack gap={'0.2rem'} padding={'0 1rem'} 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"
@@ -141,10 +142,14 @@ export const ModalLogin = () => {
           {...register('password')}
           {...inputProps}
           error={!!errors.password}
+          helperText={'Password you set in Cloud Sync settings'}
         />
-        <Button type="submit" fullWidth disabled={isLoading}>
+
-          Add account {isLoading && <LoadingSpinner />}
+        <Stack gap={'0.5rem'}>
-        </Button>
+          <Button type="submit" fullWidth disabled={isLoading}>
+            Add account {isLoading && <LoadingSpinner />}
+          </Button>
+        </Stack>
       </Stack>
     </Modal>
   )

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'}>
+        <Stack gap={'0.2rem'} padding={'0 1rem'} 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"
@@ -113,9 +114,11 @@ export const ModalSignUp = () => {
             },
           }}
         />
-        <Button fullWidth type="submit" disabled={isLoading}>
+        <Stack gap={'0.5rem'}>
-          Create account {isLoading && <LoadingSpinner />}
+          <Button fullWidth type="submit" disabled={isLoading}>
-        </Button>
+            Create account {isLoading && <LoadingSpinner />}
+          </Button>
+        </Stack>
       </Stack>
     </Modal>
   )

src/pages/AppPage/App.Page.tsx

@@ -46,7 +46,7 @@ const AppPage = () => {
   const shortAppNpub = getShortenNpub(appNpub)
   const appName = name || appDomain || shortAppNpub
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
-  const isAppNameExists = !!name
+  const isAppNameExists = !!name || !!appDomain
 
   const { timestamp } = connectPerm || {}
   const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected'

src/pages/KeyPage/components/ItemApp.tsx

@@ -13,7 +13,7 @@ export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name, url }) =>
   const appName = name || appDomain || shortAppNpub
   const appIcon = icon || `https://${appDomain}/favicon.ico`
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
-  const isAppNameExists = !!name
+  const isAppNameExists = !!name || !!appDomain
 
   return (
     <StyledItemAppContainer

src/shared/Input/Input.tsx

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