From c08e26629a5e638d141a9bde54863c76dea6a553 Mon Sep 17 00:00:00 2001
From: Bekbolsun <bekbolsun.azamatov.1579.7@gmail.com>
Date: Tue, 20 Feb 2024 18:33:36 +0600
Subject: [PATCH 1/3] add adaptive styles in modal connect

---
 .../ModalConfirmConnect/ModalConfirmConnect.tsx     |  9 ++++-----
 src/components/Modal/ModalConfirmConnect/styled.tsx |  3 +++
 .../сomponents/ActionToggleButton.tsx               | 12 ++++--------
 .../Modal/ModalConfirmConnect/сomponents/styled.tsx | 13 +++++++++++++
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
index a576e50..b05509a 100644
--- a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
+++ b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
@@ -97,8 +97,7 @@ export const ModalConfirmConnect = () => {
     if (isModalOpened && (!isNpubExists /*|| !isAppNpubExists*/ || (pendingReqId && !isPendingReqIdExists))) {
       // if (isPopup) window.close()
       // else closeModalAfterRequest()
-      if (!isPopup)
-        closeModalAfterRequest()
+      if (!isPopup) closeModalAfterRequest()
       return null
     }
   }
@@ -198,11 +197,11 @@ export const ModalConfirmConnect = () => {
           >
             {appAvatarTitle}
           </Avatar>
-          <Box>
-            <Typography variant="h5" fontWeight={600}>
+          <Box overflow={'auto'}>
+            <Typography variant="h5" fontWeight={600} noWrap>
               {appName}
             </Typography>
-            <Typography variant="body2" color={'GrayText'}>
+            <Typography variant="body2" color={'GrayText'} noWrap>
               New app would like to connect
             </Typography>
           </Box>
diff --git a/src/components/Modal/ModalConfirmConnect/styled.tsx b/src/components/Modal/ModalConfirmConnect/styled.tsx
index b6e1c03..e3e6437 100644
--- a/src/components/Modal/ModalConfirmConnect/styled.tsx
+++ b/src/components/Modal/ModalConfirmConnect/styled.tsx
@@ -21,5 +21,8 @@ export const StyledToggleButtonsGroup = styled((props: ToggleButtonGroupProps) =
       border: 'initial',
       borderRadius: '1rem',
     },
+    '@media screen and (max-width: 320px)': {
+      marginBottom: '0.25rem',
+    },
   })
 )
diff --git a/src/components/Modal/ModalConfirmConnect/сomponents/ActionToggleButton.tsx b/src/components/Modal/ModalConfirmConnect/сomponents/ActionToggleButton.tsx
index ecf5ed7..3495022 100644
--- a/src/components/Modal/ModalConfirmConnect/сomponents/ActionToggleButton.tsx
+++ b/src/components/Modal/ModalConfirmConnect/сomponents/ActionToggleButton.tsx
@@ -4,22 +4,18 @@ import { StyledToggleButton } from './styled'
 
 type ActionToggleButtonProps = ToggleButtonProps & {
   description?: string
-  hasinfo?: boolean
 }
 
-export const ActionToggleButton: FC<ActionToggleButtonProps> = ({ hasinfo = false, ...props }) => {
+export const ActionToggleButton: FC<ActionToggleButtonProps> = (props) => {
   const { title, description = '' } = props
   return (
     <StyledToggleButton {...props}>
-      <Typography variant="body2">{title}</Typography>
+      <Typography variant="body2" noWrap className="title">
+        {title}
+      </Typography>
       <Typography className="description" variant="caption" color={'GrayText'}>
         {description}
       </Typography>
-      {hasinfo && (
-        <Typography className="info" color={'GrayText'}>
-          Info
-        </Typography>
-      )}
     </StyledToggleButton>
   )
 }
diff --git a/src/components/Modal/ModalConfirmConnect/сomponents/styled.tsx b/src/components/Modal/ModalConfirmConnect/сomponents/styled.tsx
index d47a07c..1e46327 100644
--- a/src/components/Modal/ModalConfirmConnect/сomponents/styled.tsx
+++ b/src/components/Modal/ModalConfirmConnect/сomponents/styled.tsx
@@ -29,4 +29,17 @@ export const StyledToggleButton = styled((props: ToggleButtonProps) => (
     fontSize: '10px',
     fontWeight: 500,
   },
+  '@media screen and (max-width: 320px)': {
+    '& .title': {
+      fontSize: '14px',
+    },
+    '& .description': {
+      margin: '0.25rem 0',
+      display: '-webkit-box',
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
 }))

From 6e334c5078c263dce439bb3b7b5bc32abdd7ace3 Mon Sep 17 00:00:00 2001
From: Bekbolsun <bekbolsun.azamatov.1579.7@gmail.com>
Date: Wed, 21 Feb 2024 20:51:07 +0600
Subject: [PATCH 2/3] fix adaptive styles

---
 .../Modal/ModalAppDetails/styled.tsx          |  3 +-
 .../Modal/ModalImportKeys/ModalImportKeys.tsx |  5 +-
 .../Modal/ModalImportKeys/styled.tsx          | 13 +++-
 src/components/ReloadBadge/ReloadBadge.tsx    | 20 +++---
 src/components/Warning/Warning.tsx            | 20 +++---
 src/components/Warning/styled.tsx             |  3 +-
 src/layout/Layout.tsx                         |  8 ++-
 src/pages/AppPage/App.Page.tsx                | 25 +++++---
 src/pages/AppPage/styled.tsx                  | 34 ++++++++--
 src/pages/KeyPage/components/Apps.tsx         | 18 +-----
 .../components/BackgroundSigningWarning.tsx   | 26 ++++++--
 src/pages/KeyPage/components/styled.tsx       |  3 +-
 src/pages/KeyPage/styled.tsx                  |  3 +-
 src/routes/AppRoutes.tsx                      | 12 ++--
 src/shared/Button/Button.tsx                  |  3 +
 src/shared/DebounceInput/DebounceInput.tsx    |  3 +-
 src/shared/IOSBackButton/styled.tsx           |  6 +-
 src/shared/IconApp/IconApp.tsx                | 25 +++++++-
 src/shared/IconApp/const.ts                   | 53 ++++++++++++++++
 src/shared/IconApp/styled.tsx                 | 54 ++++++++++++++++
 src/shared/IconApp/types.ts                   | 24 +++++++
 src/shared/Input/Input.tsx                    | 62 ++++---------------
 src/shared/Input/styled.tsx                   | 45 ++++++++++++++
 src/shared/Input/types.ts                     |  9 +++
 .../InputCopyButton/InputCopyButton.tsx       |  9 +--
 src/shared/InputCopyButton/styled.tsx         | 12 +++-
 src/types/app-nsec.ts                         |  6 ++
 src/types/utils.ts                            | 10 +++
 src/utils/consts.ts                           |  8 +++
 29 files changed, 394 insertions(+), 128 deletions(-)
 create mode 100644 src/shared/IconApp/const.ts
 create mode 100644 src/shared/IconApp/styled.tsx
 create mode 100644 src/shared/IconApp/types.ts
 create mode 100644 src/shared/Input/styled.tsx
 create mode 100644 src/shared/Input/types.ts
 create mode 100644 src/types/app-nsec.ts
 create mode 100644 src/types/utils.ts

diff --git a/src/components/Modal/ModalAppDetails/styled.tsx b/src/components/Modal/ModalAppDetails/styled.tsx
index aea9c6c..be5c17b 100644
--- a/src/components/Modal/ModalAppDetails/styled.tsx
+++ b/src/components/Modal/ModalAppDetails/styled.tsx
@@ -1,4 +1,5 @@
-import { AppInputProps, Input } from '@/shared/Input/Input'
+import { Input } from '@/shared/Input/Input'
+import { AppInputProps } from '@/shared/Input/types'
 import { styled } from '@mui/material'
 import { forwardRef } from 'react'
 
diff --git a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx b/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
index d8e4dda..5d75193 100644
--- a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
+++ b/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
@@ -18,6 +18,7 @@ import { DOMAIN } from '@/utils/consts'
 import { CheckmarkIcon } from '@/assets'
 import { getPublicKey, nip19 } from 'nostr-tools'
 import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
+import { HeadingContainer } from './styled'
 
 const FORM_DEFAULT_VALUES = {
   username: '',
@@ -150,14 +151,14 @@ export const ModalImportKeys = () => {
   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'}>
+        <HeadingContainer>
           <Typography fontWeight={600} variant="h5">
             Import key
           </Typography>
           <Typography noWrap variant="body2" color={'GrayText'}>
             Bring your existing Nostr keys to Nsec.app
           </Typography>
-        </Stack>
+        </HeadingContainer>
         <Input
           label="Choose a username"
           fullWidth
diff --git a/src/components/Modal/ModalImportKeys/styled.tsx b/src/components/Modal/ModalImportKeys/styled.tsx
index ab5f55c..2cfc79d 100644
--- a/src/components/Modal/ModalImportKeys/styled.tsx
+++ b/src/components/Modal/ModalImportKeys/styled.tsx
@@ -1,5 +1,5 @@
 import { AppLogo } from '@/assets'
-import { Box, styled } from '@mui/material'
+import { Box, Stack, StackProps, styled } from '@mui/material'
 
 export const StyledAppLogo = styled((props) => (
   <Box {...props}>
@@ -12,3 +12,14 @@ export const StyledAppLogo = styled((props) => (
   display: 'grid',
   placeItems: 'center',
 }))
+
+export const HeadingContainer = styled((props: StackProps) => <Stack {...props} />)(() => ({
+  gap: '0.2rem',
+  padding: '0 1rem',
+  alignSelf: 'flex-start',
+  overflow: 'auto',
+  width: '100%',
+  '@media screen and (max-width: 320px)': {
+    padding: '0 0.75rem',
+  },
+}))
diff --git a/src/components/ReloadBadge/ReloadBadge.tsx b/src/components/ReloadBadge/ReloadBadge.tsx
index 549f3b0..acf5524 100644
--- a/src/components/ReloadBadge/ReloadBadge.tsx
+++ b/src/components/ReloadBadge/ReloadBadge.tsx
@@ -1,5 +1,5 @@
 import { FC, memo, useCallback } from 'react'
-import { Collapse, Stack, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import { StyledAlert, StyledReloadButton } from './styled'
 import { useSessionStorage } from 'usehooks-ts'
 import { RELOAD_STORAGE_KEY } from '@/utils/consts'
@@ -10,16 +10,14 @@ type ReloadBadgeContentProps = {
 
 const ReloadBadgeContent: FC<ReloadBadgeContentProps> = memo(({ onReload }) => {
   return (
-    <Collapse in>
-      <StyledAlert>
-        <Stack direction={'row'} className="content">
-          <Typography flex={1} className="title">
-            New version available!
-          </Typography>
-          <StyledReloadButton onClick={onReload}>Reload</StyledReloadButton>
-        </Stack>
-      </StyledAlert>
-    </Collapse>
+    <StyledAlert>
+      <Stack direction={'row'} className="content">
+        <Typography flex={1} className="title">
+          New version available!
+        </Typography>
+        <StyledReloadButton onClick={onReload}>Reload</StyledReloadButton>
+      </Stack>
+    </StyledAlert>
   )
 })
 
diff --git a/src/components/Warning/Warning.tsx b/src/components/Warning/Warning.tsx
index 3fd7f89..eab0dd2 100644
--- a/src/components/Warning/Warning.tsx
+++ b/src/components/Warning/Warning.tsx
@@ -1,21 +1,27 @@
 import { FC, ReactNode } from 'react'
 import { IconContainer, StyledContainer } from './styled'
-import { BoxProps, Stack, Typography } from '@mui/material'
+import { BoxProps, Typography } from '@mui/material'
 
 type WarningProps = {
   message?: string | ReactNode
-  hint?: string | ReactNode
   icon?: ReactNode
 } & BoxProps
 
-export const Warning: FC<WarningProps> = ({ hint, message, icon, ...restProps }) => {
+export const Warning: FC<WarningProps> = ({ message, icon, ...restProps }) => {
+  const renderMessage = () => {
+    if (typeof message === 'string') {
+      return (
+        <Typography noWrap width={'100%'}>
+          {message}
+        </Typography>
+      )
+    }
+    return message
+  }
   return (
     <StyledContainer {...restProps}>
       {icon && <IconContainer>{icon}</IconContainer>}
-      <Stack flex={1} direction={'column'} gap={'0.2rem'}>
-        <Typography noWrap>{message}</Typography>
-        {hint && <Typography>{hint}</Typography>}
-      </Stack>
+      {renderMessage()}
     </StyledContainer>
   )
 }
diff --git a/src/components/Warning/styled.tsx b/src/components/Warning/styled.tsx
index 3c19743..a574464 100644
--- a/src/components/Warning/styled.tsx
+++ b/src/components/Warning/styled.tsx
@@ -7,13 +7,14 @@ export const StyledContainer = styled((props: BoxProps) => <Box {...props} />)((
     padding: '0.5rem',
     display: 'flex',
     alignItems: 'center',
-    gap: '1rem',
+    gap: '0.5rem',
     cursor: 'pointer',
   }
 })
 
 export const IconContainer = styled((props: BoxProps) => <Box {...props} />)(() => ({
   width: '40px',
+  minWidth: '40px',
   height: '40px',
   borderRadius: '50%',
   background: 'grey',
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
index ab15bb4..288f863 100644
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@@ -27,11 +27,17 @@ const StyledContainer = styled((props: ContainerProps) => <Container maxWidth="s
   flexDirection: 'column',
   paddingBottom: '1rem',
   position: 'relative',
-  '&': {
+  '& > main': {
     flex: 1,
     maxHeight: '100%',
   },
   '&:not(.reload) > main': {
     paddingTop: 'calc(66px + 1rem)',
   },
+  '@media screen and (max-width: 320px)': {
+    marginBottom: '0.25rem',
+    paddingLeft: '0.75rem',
+    paddingBottom: '0.75rem',
+    paddingRight: '0.75rem',
+  },
 })
diff --git a/src/pages/AppPage/App.Page.tsx b/src/pages/AppPage/App.Page.tsx
index 3410255..d0f8585 100644
--- a/src/pages/AppPage/App.Page.tsx
+++ b/src/pages/AppPage/App.Page.tsx
@@ -9,7 +9,6 @@ import { getAppIconTitle, getDomain, getShortenNpub } from '@/utils/helpers/help
 import { Button } from '@/shared/Button/Button'
 import { ACTION_TYPE } from '@/utils/consts'
 import { Permissions } from './components/Permissions/Permissions'
-import { StyledAppIcon } from './styled'
 import { useToggleConfirm } from '@/hooks/useToggleConfirm'
 import { ConfirmModal } from '@/shared/ConfirmModal/ConfirmModal'
 import { swicCall } from '@/modules/swic'
@@ -20,6 +19,8 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import MoreIcon from '@mui/icons-material/MoreVertRounded'
 import { ModalAppDetails } from '@/components/Modal/ModalAppDetails/ModalAppDetails'
+import { IconApp } from '@/shared/IconApp/IconApp'
+import { HeadingContainer, AppInfoContainer, AppNameContainer } from './styled'
 
 const AppPage = () => {
   const keys = useAppSelector(selectKeys)
@@ -67,12 +68,13 @@ const AppPage = () => {
     <>
       <Stack maxHeight={'100%'} overflow={'auto'} alignItems={'flex-start'} height={'100%'}>
         <IOSBackButton onNavigate={() => navigate(`key/${npub}`)} />
-        <Stack marginBottom={'1rem'} direction={'row'} gap={'1rem'} width={'100%'} alignItems={'center'}>
-          <StyledAppIcon src={icon}>{appAvatarTitle}</StyledAppIcon>
-          <Box flex={'1'} overflow={'hidden'}>
-            <Stack direction={'row'} alignItems={'flex-start'} gap={'0.5rem'} marginBottom={'0.5rem'}>
-              <Box display={'flex'} flexDirection={'column'} flex={1}>
-                <Typography variant="h4" noWrap>
+
+        <HeadingContainer>
+          <IconApp size="big" picture={icon} alt={appAvatarTitle} />
+          <Box flex={'1'} overflow={'auto'} alignSelf={'flex-start'} width={'100%'}>
+            <AppInfoContainer>
+              <AppNameContainer>
+                <Typography className="app_name" variant="h4" noWrap>
                   {appName}
                 </Typography>
                 {isAppNameExists && (
@@ -80,16 +82,19 @@ const AppPage = () => {
                     {shortAppNpub}
                   </Typography>
                 )}
-              </Box>
+              </AppNameContainer>
+
               <IconButton onClick={handleShowAppDetailsModal}>
                 <MoreIcon />
               </IconButton>
-            </Stack>
+            </AppInfoContainer>
+
             <Typography variant="body2" noWrap>
               {connectedOn}
             </Typography>
           </Box>
-        </Stack>
+        </HeadingContainer>
+
         <Box marginBottom={'1rem'}>
           <SectionTitle marginBottom={'0.5rem'}>Disconnect</SectionTitle>
           <Button fullWidth onClick={handleShow}>
diff --git a/src/pages/AppPage/styled.tsx b/src/pages/AppPage/styled.tsx
index 594291d..000611a 100644
--- a/src/pages/AppPage/styled.tsx
+++ b/src/pages/AppPage/styled.tsx
@@ -1,6 +1,32 @@
-import { Avatar, AvatarProps, styled } from '@mui/material'
+import { Box, BoxProps, Stack, StackProps, styled } from '@mui/material'
 
-export const StyledAppIcon = styled((props: AvatarProps) => <Avatar {...props} variant="rounded" />)(() => ({
-  width: 70,
-  height: 70,
+export const HeadingContainer = styled((props: StackProps) => <Stack {...props} />)(() => ({
+  width: '100%',
+  marginBottom: '1rem',
+  flexDirection: 'row',
+  gap: '1rem',
+  alignItems: 'center',
+  '@media screen and (max-width: 320px)': {
+    flexDirection: 'column',
+    gap: '0.5rem',
+  },
+}))
+
+export const AppInfoContainer = styled((props: StackProps) => <Stack {...props} direction={'row'} />)(() => ({
+  width: '100%',
+  flex: 1,
+  alignItems: 'flex-start',
+  gap: '0.5rem',
+  marginBottom: '0.5rem',
+  overflow: 'hidden',
+  '@media screen and (max-width: 320px)': {
+    alignSelf: 'flex-start',
+  },
+}))
+
+export const AppNameContainer = styled((props: BoxProps) => <Box {...props} />)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  overflow: 'auto',
 }))
diff --git a/src/pages/KeyPage/components/Apps.tsx b/src/pages/KeyPage/components/Apps.tsx
index c8a90e0..4cecfa5 100644
--- a/src/pages/KeyPage/components/Apps.tsx
+++ b/src/pages/KeyPage/components/Apps.tsx
@@ -5,9 +5,7 @@ import { Box, Stack, Typography } from '@mui/material'
 import { FC } from 'react'
 import { StyledEmptyAppsBox } from '../styled'
 import { Button } from '@/shared/Button/Button'
-import { call } from '@/utils/helpers/helpers'
-import { swicCall } from '@/modules/swic'
-import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
+
 import { ItemApp } from './ItemApp'
 
 type AppsProps = {
@@ -16,22 +14,12 @@ type AppsProps = {
 }
 
 export const Apps: FC<AppsProps> = ({ apps = [] }) => {
-  const notify = useEnqueueSnackbar()
-
-  // eslint-disable-next-line
-  async function deletePerm(id: string) {
-    call(async () => {
-      await swicCall('deletePerm', id)
-      notify('Perm deleted!', 'success')
-    })
-  }
-
   const openAppStore = () => {
     window.open('https://nostrapp.link', '_blank')
   }
 
   return (
-    <Box flex={1} marginBottom={'1rem'} display={'flex'} flexDirection={'column'} overflow={'auto'}>
+    <Box marginBottom={'1rem'} display={'flex'} flexDirection={'column'}>
       <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'} marginBottom={'0.5rem'}>
         <SectionTitle>Connected apps</SectionTitle>
         <AppLink title="Discover Apps" onClick={openAppStore} />
@@ -45,7 +33,7 @@ export const Apps: FC<AppsProps> = ({ apps = [] }) => {
         </StyledEmptyAppsBox>
       )}
 
-      <Stack gap={'0.5rem'} overflow={'auto'} flex={1}>
+      <Stack gap={'0.5rem'} overflow={'auto'} flex={1} paddingBottom={'0.75rem'}>
         {apps.map((a) => (
           <ItemApp {...a} key={a.appNpub} />
         ))}
diff --git a/src/pages/KeyPage/components/BackgroundSigningWarning.tsx b/src/pages/KeyPage/components/BackgroundSigningWarning.tsx
index dcc4166..ca543d0 100644
--- a/src/pages/KeyPage/components/BackgroundSigningWarning.tsx
+++ b/src/pages/KeyPage/components/BackgroundSigningWarning.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { Warning } from '@/components/Warning/Warning'
-import { CircularProgress, Stack, Typography } from '@mui/material'
+import { CircularProgress, Stack, Typography, TypographyProps, styled } from '@mui/material'
 import AutoModeOutlinedIcon from '@mui/icons-material/AutoModeOutlined'
 
 type BackgroundSigningWarningProps = {
@@ -12,13 +12,29 @@ export const BackgroundSigningWarning: FC<BackgroundSigningWarningProps> = ({ is
   return (
     <Warning
       message={
-        <Stack direction={'row'} alignItems={'center'} gap={'1rem'}>
-          Enable background service {isEnabling ? <CircularProgress size={'1.5rem'} /> : null}
+        <Stack gap={'0.25rem'} overflow={'auto'} width={'100%'}>
+          <Typography variant="body1" noWrap fontWeight={'500'}>
+            Enable background service
+          </Typography>
+          <StyledHint>Please allow notifications for background operation.</StyledHint>
         </Stack>
       }
-      hint={<Typography variant="body2">Please allow notifications for background operation.</Typography>}
-      icon={<AutoModeOutlinedIcon htmlColor="white" />}
+      icon={
+        isEnabling ? (
+          <CircularProgress size={'1.5rem'} sx={{ color: '#fff' }} />
+        ) : (
+          <AutoModeOutlinedIcon htmlColor="white" />
+        )
+      }
       onClick={isEnabling ? undefined : onEnableBackSigning}
     />
   )
 }
+
+const StyledHint = styled((props: TypographyProps) => <Typography variant="body2" {...props} />)(() => ({
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+}))
diff --git a/src/pages/KeyPage/components/styled.tsx b/src/pages/KeyPage/components/styled.tsx
index 420c91c..4422ba6 100644
--- a/src/pages/KeyPage/components/styled.tsx
+++ b/src/pages/KeyPage/components/styled.tsx
@@ -1,4 +1,5 @@
-import { Input, AppInputProps } from '@/shared/Input/Input'
+import { Input } from '@/shared/Input/Input'
+import { AppInputProps } from '@/shared/Input/types'
 import { Stack, StackProps, styled } from '@mui/material'
 import { forwardRef } from 'react'
 
diff --git a/src/pages/KeyPage/styled.tsx b/src/pages/KeyPage/styled.tsx
index 0d2d241..cdd2872 100644
--- a/src/pages/KeyPage/styled.tsx
+++ b/src/pages/KeyPage/styled.tsx
@@ -1,4 +1,5 @@
-import { Input, AppInputProps } from '@/shared/Input/Input'
+import { Input } from '@/shared/Input/Input'
+import { AppInputProps } from '@/shared/Input/types'
 import { Box, Button, ButtonProps, styled, Badge } from '@mui/material'
 import { forwardRef } from 'react'
 
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index a0ca0f5..4643183 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -1,13 +1,15 @@
 import { Suspense, lazy } from 'react'
 import { Route, Routes, Navigate } from 'react-router-dom'
-import HomePage from '../pages/HomePage/Home.Page'
 import { Layout } from '../layout/Layout'
 import { CircularProgress, Stack } from '@mui/material'
-import CreatePage from '@/pages/CreatePage/Create.Page'
 
-const KeyPage = lazy(() => import('../pages/KeyPage/Key.Page'))
-const ConfirmPage = lazy(() => import('../pages/Confirm.Page'))
-const AppPage = lazy(() => import('../pages/AppPage/App.Page'))
+// Pages
+import CreatePage from '@/pages/CreatePage/Create.Page'
+import HomePage from '../pages/HomePage/Home.Page'
+import KeyPage from '../pages/KeyPage/Key.Page'
+
+const ConfirmPage = lazy(() => import('@/pages/Confirm.Page'))
+const AppPage = lazy(() => import('@/pages/AppPage/App.Page'))
 
 const LoadingSpinner = () => (
   <Stack height={'100%'} justifyContent={'center'} alignItems={'center'}>
diff --git a/src/shared/Button/Button.tsx b/src/shared/Button/Button.tsx
index 97886d8..eb02b0e 100644
--- a/src/shared/Button/Button.tsx
+++ b/src/shared/Button/Button.tsx
@@ -19,6 +19,9 @@ const StyledButton = styled(
   const commonStyles = {
     fontWeight: 500,
     borderRadius: '1rem',
+    '@media screen and (max-width: 320px)': {
+      padding: '0.25rem 0.75rem',
+    },
   }
   if (varianttype === 'secondary') {
     return {
diff --git a/src/shared/DebounceInput/DebounceInput.tsx b/src/shared/DebounceInput/DebounceInput.tsx
index 38cba7b..4a16056 100644
--- a/src/shared/DebounceInput/DebounceInput.tsx
+++ b/src/shared/DebounceInput/DebounceInput.tsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react'
-import { Input, AppInputProps } from '../Input/Input'
+import { Input } from '../Input/Input'
+import { AppInputProps } from '../Input/types'
 
 export type DebounceProps = {
   handleDebounce: (value: string) => void
diff --git a/src/shared/IOSBackButton/styled.tsx b/src/shared/IOSBackButton/styled.tsx
index 0a81189..93f7c46 100644
--- a/src/shared/IOSBackButton/styled.tsx
+++ b/src/shared/IOSBackButton/styled.tsx
@@ -9,7 +9,8 @@ export const StyledButton = styled((props: ButtonProps) => (
       startIcon: 'icon',
     }}
   />
-))(() => ({
+))(({ theme }) => ({
+  color: theme.palette.primary.main,
   marginBottom: '0.5rem',
   borderRadius: '8px',
   '&:is(:hover,:active)': {
@@ -18,4 +19,7 @@ export const StyledButton = styled((props: ButtonProps) => (
   '& .icon': {
     marginRight: '5px',
   },
+  '@media screen and (max-width: 320px)': {
+    marginBottom: '0.25rem',
+  },
 }))
diff --git a/src/shared/IconApp/IconApp.tsx b/src/shared/IconApp/IconApp.tsx
index 848f6f6..669a6c6 100644
--- a/src/shared/IconApp/IconApp.tsx
+++ b/src/shared/IconApp/IconApp.tsx
@@ -1,8 +1,11 @@
-import React, { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
+import { StyledAppIcon, StyledAppImg } from './styled'
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'
+import { IIconApp } from './types'
 
 const failedCache = new Map<string, boolean>()
 
-export const IconApp: FC<{ picture: string }> = ({ picture }) => {
+export const IconApp: FC<IIconApp> = ({ picture = '', alt, isRounded, isSmall, onClick, size, ...rest }) => {
   const c = failedCache.get(picture)
   const [isFailed, setIsFailed] = useState(c !== undefined ? c : true)
 
@@ -26,5 +29,21 @@ export const IconApp: FC<{ picture: string }> = ({ picture }) => {
     }
   }, [picture])
 
-  return <div>IconApp</div>
+  return (
+    <StyledAppIcon isNotLoaded={isFailed} size={size} onClick={onClick} {...rest}>
+      {alt ? (
+        <StyledAppImg size={size} alt={alt} isSmall={isSmall} src={isFailed ? '' : picture}>
+          {isFailed && (
+            <div className="MuiAvatar-root MuiAvatar-square MuiAvatar-colorDefault">
+              {alt.substring(0, 1).toUpperCase()}
+            </div>
+          )}
+        </StyledAppImg>
+      ) : (
+        <StyledAppImg size={size} alt={alt} isSmall={isSmall} src={isFailed ? '/' : picture}>
+          <ImageOutlinedIcon fontSize="inherit" />
+        </StyledAppImg>
+      )}
+    </StyledAppIcon>
+  )
 }
diff --git a/src/shared/IconApp/const.ts b/src/shared/IconApp/const.ts
new file mode 100644
index 0000000..1523c82
--- /dev/null
+++ b/src/shared/IconApp/const.ts
@@ -0,0 +1,53 @@
+import { APP_NSEC_SIZE } from '@/utils/consts'
+
+const SIZE_VALUE = {
+  [APP_NSEC_SIZE.BIG]: 70,
+  [APP_NSEC_SIZE.LARGE]: 56,
+  [APP_NSEC_SIZE.MEDIUM]: 40,
+  [APP_NSEC_SIZE.SMALL]: 36,
+  [APP_NSEC_SIZE.EXTRA_SMALL]: 30,
+}
+
+export const APP_SIZE_VALUE = {
+  [APP_NSEC_SIZE.BIG]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.BIG],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.BIG],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.BIG],
+  },
+  [APP_NSEC_SIZE.LARGE]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+  },
+  [APP_NSEC_SIZE.MEDIUM]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+  },
+  [APP_NSEC_SIZE.SMALL]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+  },
+  [APP_NSEC_SIZE.EXTRA_SMALL]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+  },
+}
+
+const FONT_SIZE_VALUE = {
+  [APP_NSEC_SIZE.BIG]: 24,
+  [APP_NSEC_SIZE.LARGE]: 20,
+  [APP_NSEC_SIZE.MEDIUM]: 16,
+  [APP_NSEC_SIZE.SMALL]: 12,
+  [APP_NSEC_SIZE.EXTRA_SMALL]: 10,
+}
+
+export const APP_NAME_FONT_SIZE_VALUE = {
+  [APP_NSEC_SIZE.LARGE]: FONT_SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+  [APP_NSEC_SIZE.BIG]: FONT_SIZE_VALUE[APP_NSEC_SIZE.BIG],
+  [APP_NSEC_SIZE.MEDIUM]: FONT_SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+  [APP_NSEC_SIZE.SMALL]: FONT_SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+  [APP_NSEC_SIZE.EXTRA_SMALL]: FONT_SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+}
diff --git a/src/shared/IconApp/styled.tsx b/src/shared/IconApp/styled.tsx
new file mode 100644
index 0000000..a96010e
--- /dev/null
+++ b/src/shared/IconApp/styled.tsx
@@ -0,0 +1,54 @@
+import { Avatar, Box, styled } from '@mui/material'
+import { forwardRef } from 'react'
+import { IAvatarStyled, IBoxStyled } from './types'
+import { grey } from '@mui/material/colors'
+import { AppNostrSize } from '@/types/app-nsec'
+import { APP_NAME_FONT_SIZE_VALUE, APP_SIZE_VALUE } from './const'
+import { APP_NSEC_SIZE } from '@/utils/consts'
+
+const color = grey[500]
+
+const getVariantApp = (isRounded: boolean, size: AppNostrSize) => {
+  if (isRounded) {
+    return {
+      height: 34,
+      minWidth: 34,
+      maxWidth: 34,
+      borderRadius: '7px',
+    }
+  }
+
+  return APP_SIZE_VALUE[size]
+}
+
+export const StyledAppIcon = styled(
+  forwardRef<HTMLAnchorElement, IBoxStyled>(function BoxDisplayName(props, ref) {
+    return <Box ref={ref} {...props} />
+  })
+)(({ theme, isNotLoaded, isRounded = false, size = APP_NSEC_SIZE.MEDIUM }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'hidden',
+  ...getVariantApp(isRounded, size),
+  transition: theme.transitions.create(['border-color', 'transition']),
+  backgroundColor: isNotLoaded ? color : theme.palette.background.default,
+  boxSizing: 'border-box',
+  ':active': {
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+}))
+
+export const StyledAppImg = styled(function BoxDisplayName(props: IAvatarStyled) {
+  return <Avatar variant="square" {...props} />
+})(({ isSmall = false, size = APP_NSEC_SIZE.MEDIUM }) => ({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  height: '100%',
+  width: '100%',
+  fontWeight: '500',
+  fontSize: APP_NAME_FONT_SIZE_VALUE[size],
+  '.MuiAvatar-img': {
+    objectFit: isSmall ? 'scale-down' : 'cover',
+  },
+}))
diff --git a/src/shared/IconApp/types.ts b/src/shared/IconApp/types.ts
new file mode 100644
index 0000000..e55d8e6
--- /dev/null
+++ b/src/shared/IconApp/types.ts
@@ -0,0 +1,24 @@
+import { AppNostrSize } from '@/types/app-nsec'
+import { AvatarProps, BoxProps } from '@mui/material'
+
+export type IconAppProps = {
+  size?: AppNostrSize
+  isRounded?: boolean
+  isSmall?: boolean
+  onClick?: () => void
+  isNotLoaded?: boolean
+}
+
+export type IconAppBase = {
+  picture: string
+  alt?: string
+}
+
+export type IIconApp = Omit<IconAppProps, 'isNotLoaded'> & IconAppBase
+
+export type IBoxStyled = IconAppProps & BoxProps
+
+export type IAvatarStyled = {
+  size?: AppNostrSize
+  isSmall?: boolean
+} & AvatarProps
diff --git a/src/shared/Input/Input.tsx b/src/shared/Input/Input.tsx
index b11cc32..8ede90f 100644
--- a/src/shared/Input/Input.tsx
+++ b/src/shared/Input/Input.tsx
@@ -1,74 +1,34 @@
 import { ReactNode, forwardRef } from 'react'
-import {
-  Box,
-  BoxProps,
-  FormHelperText,
-  FormHelperTextProps,
-  FormLabel,
-  InputBase,
-  InputBaseProps,
-  styled,
-} from '@mui/material'
+import { FormHelperText, FormLabel, InputBase } from '@mui/material'
+import { StyledInputContainer } from './styled'
+import { AppInputProps } from './types'
 
-export type AppInputProps = InputBaseProps & {
-  helperText?: string | ReactNode
-  helperTextProps?: FormHelperTextProps
-  containerProps?: BoxProps
-  label?: string
-}
+const renderItem = <T,>(item: T, value: ReactNode) => (item ? value : null)
 
 export const Input = forwardRef<HTMLInputElement, AppInputProps>(
   ({ helperText, containerProps, helperTextProps, label, ...props }, ref) => {
     return (
       <StyledInputContainer {...containerProps}>
-        {label ? (
+        {renderItem(
+          label,
           <FormLabel className="label" htmlFor={props.id}>
             {label}
           </FormLabel>
-        ) : null}
+        )}
+
         <InputBase
           autoComplete="off"
           {...props}
           classes={{ error: 'error', root: 'input_root', input: 'input', disabled: 'disabled' }}
           ref={ref}
         />
-        {helperText ? (
+        {renderItem(
+          helperText,
           <FormHelperText {...helperTextProps} className="helper_text">
             {helperText}
           </FormHelperText>
-        ) : null}
+        )}
       </StyledInputContainer>
     )
   }
 )
-
-const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({ theme }) => {
-  const isDark = theme.palette.mode === 'dark'
-  return {
-    width: '100%',
-    '& > .input_root': {
-      background: isDark ? '#000000A8' : '#000',
-      color: theme.palette.common.white,
-      padding: '0.75rem 1rem',
-      borderRadius: '1rem',
-      border: '0.3px solid #FFFFFF54',
-      fontSize: '0.875rem',
-      '&.error': {
-        border: '0.3px solid ' + theme.palette.error.main,
-      },
-    },
-    '& .input:is(.disabled, &)': {
-      WebkitTextFillColor: '#ffffff80',
-    },
-    '& > .helper_text': {
-      margin: '0.5rem 0.5rem 0',
-      color: theme.palette.text.primary,
-    },
-    '& > .label': {
-      margin: '0 1rem 0.5rem',
-      display: 'block',
-      color: theme.palette.primary.main,
-      fontSize: '0.875rem',
-    },
-  }
-})
diff --git a/src/shared/Input/styled.tsx b/src/shared/Input/styled.tsx
new file mode 100644
index 0000000..cab9c36
--- /dev/null
+++ b/src/shared/Input/styled.tsx
@@ -0,0 +1,45 @@
+import { Box, BoxProps, styled } from '@mui/material'
+
+export const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({ theme }) => {
+  const isDark = theme.palette.mode === 'dark'
+  return {
+    width: '100%',
+    '& > .input_root': {
+      background: isDark ? '#000000A8' : '#000',
+      color: theme.palette.common.white,
+      padding: '0.75rem 1rem',
+      borderRadius: '1rem',
+      border: '0.3px solid #FFFFFF54',
+      fontSize: '0.875rem',
+      '&.error': {
+        border: '0.3px solid ' + theme.palette.error.main,
+      },
+    },
+    '& .input:is(.disabled, &)': {
+      WebkitTextFillColor: '#ffffff80',
+    },
+    '& > .helper_text': {
+      margin: '0.5rem 0.5rem 0',
+      color: theme.palette.text.primary,
+    },
+    '& > .label': {
+      margin: '0 1rem 0.5rem',
+      display: 'block',
+      color: theme.palette.primary.main,
+      fontSize: '0.875rem',
+    },
+    '@media screen and (max-width: 320px)': {
+      '& > .input_root': {
+        padding: '0.5rem 0.75rem',
+        borderRadius: '0.75rem',
+      },
+      '& > .label': {
+        margin: '0 0.25rem 0.25rem',
+        fontSize: '0.75rem',
+      },
+      '& > .helper_text': {
+        fontSize: '0.75rem',
+      },
+    },
+  }
+})
diff --git a/src/shared/Input/types.ts b/src/shared/Input/types.ts
new file mode 100644
index 0000000..bb7f8aa
--- /dev/null
+++ b/src/shared/Input/types.ts
@@ -0,0 +1,9 @@
+import { BoxProps, FormHelperTextProps, InputBaseProps } from '@mui/material'
+import { ReactNode } from 'react'
+
+export type AppInputProps = InputBaseProps & {
+  helperText?: string | ReactNode
+  helperTextProps?: FormHelperTextProps
+  containerProps?: BoxProps
+  label?: string
+}
diff --git a/src/shared/InputCopyButton/InputCopyButton.tsx b/src/shared/InputCopyButton/InputCopyButton.tsx
index 0871c59..d896187 100644
--- a/src/shared/InputCopyButton/InputCopyButton.tsx
+++ b/src/shared/InputCopyButton/InputCopyButton.tsx
@@ -1,8 +1,7 @@
 import { FC, useEffect, useState } from 'react'
-import { Fade, IconButton, Typography } from '@mui/material'
+import { Fade, Typography } from '@mui/material'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import { CopyIcon } from '@/assets'
-import { StyledContainer } from './styled'
+import { StyledContainer, StyledCopyButton } from './styled'
 
 type InputCopyButtonProps = {
   value: string
@@ -40,9 +39,7 @@ export const InputCopyButton: FC<InputCopyButtonProps> = ({ value, onCopy = () =
         </Fade>
       )}
       <CopyToClipboard text={value} onCopy={handleCopy}>
-        <IconButton color="inherit">
-          <CopyIcon />
-        </IconButton>
+        <StyledCopyButton />
       </CopyToClipboard>
     </StyledContainer>
   )
diff --git a/src/shared/InputCopyButton/styled.tsx b/src/shared/InputCopyButton/styled.tsx
index 79be444..54e4134 100644
--- a/src/shared/InputCopyButton/styled.tsx
+++ b/src/shared/InputCopyButton/styled.tsx
@@ -1,7 +1,17 @@
-import { Stack, StackProps, styled } from '@mui/material'
+import { IconButton, Stack, StackProps, styled } from '@mui/material'
+import { CopyIcon } from '@/assets'
 
 export const StyledContainer = styled((props: StackProps & { copied: number }) => (
   <Stack {...props} direction={'row'} alignItems={'center'} />
 ))(({ theme, copied }) => ({
   color: copied ? theme.palette.success.main : theme.palette.textSecondaryDecorate.main,
 }))
+
+export const StyledCopyButton = styled((props) => (
+  <IconButton color="inherit" {...props}>
+    <CopyIcon />
+  </IconButton>
+))(() => ({
+  width: 40,
+  height: 40,
+}))
diff --git a/src/types/app-nsec.ts b/src/types/app-nsec.ts
new file mode 100644
index 0000000..a477698
--- /dev/null
+++ b/src/types/app-nsec.ts
@@ -0,0 +1,6 @@
+import { APP_NSEC_SIZE } from '@/utils/consts'
+import { OverridableStringUnion } from './utils'
+
+export type AppNostrSizeUnion = (typeof APP_NSEC_SIZE)[keyof typeof APP_NSEC_SIZE]
+
+export type AppNostrSize = OverridableStringUnion<AppNostrSizeUnion>
diff --git a/src/types/utils.ts b/src/types/utils.ts
new file mode 100644
index 0000000..d8f088f
--- /dev/null
+++ b/src/types/utils.ts
@@ -0,0 +1,10 @@
+export type OverridableStringUnion<T extends string> = GenerateStringUnion<DistributiveOmit<Record<T, true>>>
+
+type GenerateStringUnion<T> = Extract<
+  {
+    [Key in keyof T]: true extends T[Key] ? Key : never
+  }[keyof T],
+  string
+>
+
+type DistributiveOmit<T> = T extends T ? T : never
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index 96e6abb..1bd5123 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -25,3 +25,11 @@ export const ACTIONS: { [type: string]: string } = {
   nip04_encrypt: 'Encrypt message',
   nip04_decrypt: 'Decrypt message',
 }
+
+export const APP_NSEC_SIZE = {
+  BIG: 'big',
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small',
+  EXTRA_SMALL: 'extra-small',
+} as const

From 8c0b5f379ee45eb534de45350ab0913d92becf9d Mon Sep 17 00:00:00 2001
From: artur <brugeman.artur@gmail.com>
Date: Thu, 22 Feb 2024 14:21:24 +0300
Subject: [PATCH 3/3] Make nip05 name take priority over profile.name

---
 src/hooks/useProfile.ts      | 2 +-
 src/utils/helpers/helpers.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useProfile.ts b/src/hooks/useProfile.ts
index 6b7d7e9..5c476ea 100644
--- a/src/hooks/useProfile.ts
+++ b/src/hooks/useProfile.ts
@@ -14,7 +14,7 @@ export const useProfile = (npub: string) => {
   const [profile, setProfile] = useState<MetaEvent | null>(null)
   const currentKey = useAppSelector((state) => selectKeyByNpub(state, npub))
 
-  const userName = getProfileUsername(profile) || currentKey?.name
+  const userName = currentKey?.name || getProfileUsername(profile)
   const userAvatar = profile?.info?.picture || ''
   const avatarTitle = getFirstLetter(userName)
 
diff --git a/src/utils/helpers/helpers.ts b/src/utils/helpers/helpers.ts
index 27163b5..3977126 100644
--- a/src/utils/helpers/helpers.ts
+++ b/src/utils/helpers/helpers.ts
@@ -16,7 +16,7 @@ export const getShortenNpub = (npub = '') => {
 }
 
 export const getProfileUsername = (profile: MetaEvent | null) => {
-  if (!profile) return null
+  if (!profile) return undefined
   return profile?.info?.name || profile?.info?.display_name
 }