From 14154d5eb02fa4cf244eebfbd4a731e566262030 Mon Sep 17 00:00:00 2001
From: Kacper Michalik <kacper.michalik@rumblefish.pl>
Date: Thu, 19 Oct 2023 13:34:36 +0200
Subject: [PATCH] fix:child component and spacing

---
 .../ContextMenu/ContextMenu.component.tsx     | 24 +++--------------
 ...egisteredUsernameContextMenu.container.tsx | 27 ++++++++++++++-----
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx b/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx
index f90abdfc10..8855d708d5 100644
--- a/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx
+++ b/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx
@@ -4,7 +4,6 @@ import { Typography } from '../Typography/Typography.component'
 import { ContextMenuItemProps, ContextMenuProps } from './ContextMenu.types'
 import { defaultPalette } from '../../styles/palettes/default.palette'
 import { appImages } from '../../assets'
-import { Button } from '../Button/Button.component'
 
 export const ContextMenu: FC<ContextMenuProps> = ({
   visible,
@@ -16,8 +15,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({
   linkAction = () => {
     console.log('No action attached for link tap gesture.')
   },
-  unregisteredUsername,
-  username,
+
+  children,
 }) => {
   const [show, setShow] = React.useState<boolean>(false)
   const slidingAnimation = React.useRef(new Animated.Value(0)).current
@@ -163,24 +162,7 @@ export const ContextMenu: FC<ContextMenuProps> = ({
                 />
               </View>
             )}
-
-            {unregisteredUsername && username && (
-              <View style={{ padding: 20, alignItems: 'center' }}>
-                <Typography fontSize={14} style={{ textAlign: 'center' }}>
-                  The username{' '}
-                  <Typography fontSize={14} fontWeight={'bold'}>
-                    @{username}
-                  </Typography>{' '}
-                  has not been registered yet with the community owner, so it’s still possible for someone else to
-                  register the same username. When the community owner is online,{' '}
-                  <Typography fontSize={14} fontWeight={'bold'}>
-                    @{username}
-                  </Typography>{' '}
-                  will be registered automatically and this alert will go away.
-                </Typography>
-                <Button width={60} title={'OK'} onPress={handleClose} />
-              </View>
-            )}
+            {children}
           </View>
         </TouchableWithoutFeedback>
       </Animated.View>
diff --git a/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx b/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx
index ab66b04c86..67f0539119 100644
--- a/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx
+++ b/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx
@@ -3,18 +3,31 @@ import { useContextMenu } from '../../../hooks/useContextMenu'
 import { MenuName } from '../../../const/MenuNames.enum'
 import { ContextMenu } from '../ContextMenu.component'
 import { UnregisteredUsernameArgs } from '../ContextMenu.types'
+import { View } from 'react-native'
+import { Typography } from '../../Typography/Typography.component'
+import { Button } from '../../Button/Button.component'
 
 export const UnregisteredUsernameContextMenu: FC = () => {
   const title = 'Unregistered username'
   const usernameTakenContextMenu = useContextMenu<UnregisteredUsernameArgs>(MenuName.UnregisteredUsername)
 
   return (
-    <ContextMenu
-      title={title}
-      items={[]}
-      {...usernameTakenContextMenu}
-      unregisteredUsername
-      username={usernameTakenContextMenu.username}
-    />
+    <ContextMenu title={title} items={[]} {...usernameTakenContextMenu}>
+      <View style={{ padding: 20, alignItems: 'center' }}>
+        <Typography fontSize={14} style={{ textAlign: 'center', lineHeight: 20 }}>
+          The username{' '}
+          <Typography fontSize={14} fontWeight={'bold'}>
+            @{usernameTakenContextMenu.username}
+          </Typography>{' '}
+          has not been registered yet with the community owner, so it’s still possible for someone else to register the
+          same username. When the community owner is online,{' '}
+          <Typography fontSize={14} fontWeight={'bold'}>
+            @{usernameTakenContextMenu.username}
+          </Typography>{' '}
+          will be registered automatically and this alert will go away.
+        </Typography>
+        <Button width={60} title={'OK'} onPress={usernameTakenContextMenu.handleClose} />
+      </View>
+    </ContextMenu>
   )
 }