Warning message desktop(new) and mobile(fix)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [unreleased]
+
+### Features
+
+* Add beta warning message to desktop when creating/joining a community [#3351](https://github.com/TryQuiet/quiet/issues/3351)
+
 ## [8.0.0]
 
 ### Features

packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx

@@ -282,6 +282,20 @@ export const CreateUsernameComponent: React.FC<CreateUsernameComponentProps> = (
                   }),
                 }}
               />
+              <Grid container alignItems='center' direction='row' className={classes.marginMedium}>
+                <Grid item className={classes.iconDiv}>
+                  <WarningIcon className={classes.warrningIcon} />
+                </Grid>
+                <Grid item xs>
+                  <Typography
+                    variant='body2'
+                    className={classes.warrningMessage}
+                    data-testid={'createUsernameBetaWarning'}
+                  >
+                    Quiet is in beta and shouldn't be used for activities requiring security.
+                  </Typography>
+                </Grid>
+              </Grid>
             </Grid>
           </form>
         </>

packages/mobile/src/components/CreateCommunity/CreateCommunity.component.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useRef, useState } from 'react'
-import { Keyboard, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native'
+import { Keyboard, KeyboardAvoidingView, Platform, TextInput, View, Image } from 'react-native'
 import { defaultTheme } from '../../styles/themes/default.theme'
 import { Button } from '../Button/Button.component'
 import { Input } from '../Input/Input.component'
@@ -9,6 +9,8 @@ import { TextWithLink } from '../TextWithLink/TextWithLink.component'
 import { CreateCommunityProps } from './CreateCommunity.types'
 import { Splash } from '../Splash/Splash.component'
 
+import { icons } from '../../assets'
+
 export const CreateCommunity: FC<CreateCommunityProps> = ({
   createCommunityAction,
   redirectionAction,
@@ -90,7 +92,24 @@ export const CreateCommunity: FC<CreateCommunityProps> = ({
             <View style={{ marginTop: 32 + 12 }}>
               <Button onPress={onPress} title={'Continue'} loading={loading} />
             </View>
-            <View style={{ marginTop: 32 + 12 }}>
+            <View
+              style={{
+                marginTop: 32 + 12,
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                gap: 4,
+              }}
+            >
+              <Image
+                source={icons.icon_warning}
+                resizeMode='cover'
+                resizeMethod='resize'
+                style={{
+                  width: 16,
+                  height: 16,
+                }}
+              />
               <Typography
                 fontSize={14}
                 style={{ color: defaultTheme.palette.typography.grayDark, textAlign: 'center' }}

packages/mobile/src/components/CreateCommunity/__tests__/__snapshots__/CreateCommunity.test.tsx.snap

@@ -385,10 +385,29 @@ exports[`Spinner component renders component 1`] = `
     <View
       style={
         {
+          "alignItems": "flex-start",
+          "flexDirection": "row",
+          "gap": 4,
+          "justifyContent": "center",
           "marginTop": 44,
         }
       }
     >
+      <Image
+        resizeMethod="resize"
+        resizeMode="cover"
+        source={
+          {
+            "testUri": "../../../src/assets/icons/png/icon_warning.png",
+          }
+        }
+        style={
+          {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
       <Text
         color="main"
         fontSize={14}

packages/mobile/src/components/JoinCommunity/JoinCommunity.component.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState, useRef } from 'react'
-import { Keyboard, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native'
+import { Keyboard, KeyboardAvoidingView, Platform, TextInput, View, Image } from 'react-native'
 import { defaultTheme } from '../../styles/themes/default.theme'
 import { Button } from '../Button/Button.component'
 import { Input } from '../Input/Input.component'
@@ -13,6 +13,7 @@ import { Splash } from '../Splash/Splash.component'
 import { InvitationData } from '@quiet/types'
 
 import { createLogger } from '../../utils/logger'
+import { icons } from '../../assets'
 
 const logger = createLogger('joinCommunity:component')
 
@@ -123,12 +124,29 @@ export const JoinCommunity: FC<JoinCommunityProps> = ({
             <View style={{ marginTop: 32 + 12 }}>
               <Button onPress={onPress} title={'Continue'} loading={loading} />
             </View>
-            <View style={{ marginTop: 32 + 12 }}>
+            <View
+              style={{
+                marginTop: 32 + 12,
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                gap: 4,
+              }}
+            >
+              <Image
+                source={icons.icon_warning}
+                resizeMode='cover'
+                resizeMethod='resize'
+                style={{
+                  width: 16,
+                  height: 16,
+                }}
+              />
               <Typography
                 fontSize={14}
                 style={{ color: defaultTheme.palette.typography.grayDark, textAlign: 'center' }}
               >
-                {"Quiet is in beta and shouldn't be used for acticdvities requiring security."}
+                {"Quiet is in beta and shouldn't be used for activities requiring security."}
               </Typography>
             </View>
           </KeyboardAvoidingView>

packages/mobile/src/components/JoinCommunity/__tests__/__snapshots__/JoinCommunity.test.tsx.snap

@@ -385,10 +385,29 @@ exports[`JoinCommunity component renders component 1`] = `
     <View
       style={
         {
+          "alignItems": "flex-start",
+          "flexDirection": "row",
+          "gap": 4,
+          "justifyContent": "center",
           "marginTop": 44,
         }
       }
     >
+      <Image
+        resizeMethod="resize"
+        resizeMode="cover"
+        source={
+          {
+            "testUri": "../../../src/assets/icons/png/icon_warning.png",
+          }
+        }
+        style={
+          {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
       <Text
         color="main"
         fontSize={14}
@@ -410,7 +429,7 @@ exports[`JoinCommunity component renders component 1`] = `
         }
         verticalTextAlign="center"
       >
-        Quiet is in beta and shouldn't be used for acticdvities requiring security.
+        Quiet is in beta and shouldn't be used for activities requiring security.
       </Text>
     </View>
   </View>