fixed the layout

app/containers/Avatar/AvatarWithEdit.tsx

@@ -7,6 +7,8 @@ import { IAvatar } from './interfaces';
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import { BUTTON_HIT_SLOP } from '../message/utils';
+import { useAppSelector } from '../../lib/hooks';
+import { compareServerVersion } from '../../lib/methods/helpers';
 
 const styles = StyleSheet.create({
 	editAvatarButton: {
@@ -42,6 +44,10 @@ const AvatarWithEdit = ({
 }: IAvatarContainer): React.ReactElement => {
 	const { colors } = useTheme();
 
+	const { serverVersion } = useAppSelector(state => ({
+		serverVersion: state.server.version
+	}));
+
 	return (
 		<>
 			<AvatarContainer
@@ -58,7 +64,7 @@ const AvatarWithEdit = ({
 				isStatic={isStatic}
 				rid={rid}
 			/>
-			{handleEdit ? (
+			{handleEdit && serverVersion && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.6.0') ? (
 				<Button
 					title={I18n.t('Edit')}
 					type='secondary'

app/views/ChangeAvatarView/index.tsx

@@ -5,7 +5,6 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import ImagePicker, { Image } from 'react-native-image-crop-picker';
 import { shallowEqual } from 'react-redux';
 
-import { compareServerVersion } from '../../lib/methods/helpers';
 import KeyboardView from '../../containers/KeyboardView';
 import sharedStyles from '../Styles';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
@@ -65,11 +64,10 @@ const ChangeAvatarView = () => {
 	const [state, dispatch] = useReducer(reducer, initialState);
 	const [saving, setSaving] = useState(false);
 	const { colors } = useTheme();
-	const { userId, username, serverVersion } = useAppSelector(
+	const { userId, username } = useAppSelector(
 		state => ({
 			userId: getUserSelector(state).id,
-			username: getUserSelector(state).username,
+			username: getUserSelector(state).username
-			serverVersion: state.server.version
 		}),
 		shallowEqual
 	);
@@ -110,7 +108,6 @@ const ChangeAvatarView = () => {
 	const submit = async () => {
 		try {
 			setSaving(true);
-			console.log('🚀 ~ file: index.tsx:117 ~ submit ~ state', state);
 			if (context === 'room' && room?.rid) {
 				// Change Rooms Avatar
 				await changeRoomsAvatar(room.rid);
@@ -133,7 +130,6 @@ const ChangeAvatarView = () => {
 
 	const changeRoomsAvatar = async (rid: string) => {
 		try {
-			console.log('🚀 ~ file: index.tsx:135 ~ changeRoomsAvatar ~ rid', rid, state);
 			await Services.saveRoomSettings(rid, { roomAvatar: state?.data });
 		} catch (e) {
 			log(e);
@@ -143,7 +139,6 @@ const ChangeAvatarView = () => {
 
 	const changeUserAvatar = async (avatarUpload: IAvatar) => {
 		try {
-			console.log('🚀 ~ file: index.tsx:144 ~ changeUserAvatar ~ avatarUpload', avatarUpload);
 			await Services.setAvatarFromService(avatarUpload);
 		} catch (e) {
 			return handleError(e, 'changing_avatar');
@@ -152,7 +147,6 @@ const ChangeAvatarView = () => {
 
 	const resetUserAvatar = async () => {
 		try {
-			console.log('🚀 ~ file: index.tsx:154 ~ resetUserAvatar ~ userId', userId);
 			await Services.resetAvatar(userId);
 		} catch (e) {
 			return handleError(e, 'changing_avatar');
@@ -255,7 +249,7 @@ const ChangeAvatarView = () => {
 						onPress={pickImage}
 						testID='change-avatar-view-logout-other-locations'
 					/>
-					{context === 'room' && serverVersion && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.6.0') ? (
+					{context === 'room' ? (
 						<Button
 							title={I18n.t('Delete_image')}
 							type='primary'

app/views/ChangeAvatarView/styles.ts

@@ -6,7 +6,7 @@ export default StyleSheet.create({
 	avatarContainer: {
 		alignItems: 'center',
 		justifyContent: 'center',
-		marginBottom: 32
+		marginBottom: 24
 	},
 	separator: {
 		marginVertical: 16

app/views/RoomInfoEditView/index.tsx

@@ -527,7 +527,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						{...scrollPersistTaps}
 					>
 						<View style={styles.avatarContainer}>
-							<AvatarWithEdit type={room.t} text={room.name} rid={room.rid} size={100} handleEdit={this.handleEditAvatar} />
+							<AvatarWithEdit type={room.t} text={room.name} rid={room.rid} handleEdit={this.handleEditAvatar} />
 						</View>
 						<FormTextInput
 							inputRef={e => {

app/views/RoomInfoEditView/styles.ts

@@ -76,7 +76,8 @@ export default StyleSheet.create({
 	avatarContainer: {
 		alignItems: 'center',
 		justifyContent: 'center',
-		marginBottom: 10
+		marginBottom: 32,
+		marginTop: 16
 	},
 	resetButton: {
 		padding: 4,

app/views/RoomInfoView/index.tsx

@@ -416,7 +416,6 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 				text={room.name || roomUser.username}
 				style={styles.avatar}
 				type={this.t}
-				size={100}
 				rid={room?.rid}
 				handleEdit={showAvatarEdit ? this.handleEditAvatar : undefined}
 			>

app/views/RoomInfoView/styles.ts

@@ -21,7 +21,8 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		marginBottom: 20,
-		paddingVertical: 8
+		paddingBottom: 8,
+		paddingTop: 32
 	},
 	avatar: {
 		marginHorizontal: 10