prevent overlap of clear button, fix font, reduce space on recent statuses (#8322)

* prevent overlap of clear button, fix font, reduce space on recent statuses

* remove font size

* prevent newlines on android external keyboard

* move to reducer action

* change newline behaviour to space

app/screens/custom_status/components/custom_status_input.tsx

@@ -8,6 +8,7 @@ import {TextInput, View} from 'react-native';
 import ClearButton from '@components/custom_status/clear_button';
 import {CUSTOM_STATUS_TEXT_CHARACTER_LIMIT} from '@constants/custom_status';
 import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 import CustomStatusEmoji from './custom_status_emoji';
 
@@ -29,24 +30,19 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             marginRight: 16,
             marginLeft: 52,
         },
-        clearButton: {
-            position: 'absolute',
-            top: 3,
-            right: 14,
-        },
         input: {
             alignSelf: 'stretch',
             color: theme.centerChannelColor,
             flex: 1,
-            fontSize: 17,
             paddingHorizontal: 16,
             textAlignVertical: 'center',
             height: '100%',
+            ...typography('Body', 200, 'Regular'),
         },
         inputContainer: {
             justifyContent: 'center',
             alignItems: 'center',
-            height: 48,
+            height: 80,
             backgroundColor: theme.centerChannelBg,
             flexDirection: 'row',
         },
@@ -83,11 +79,11 @@ const CustomStatusInput = ({emoji, isStatusSet, onChangeText, onClearHandle, onO
                     style={style.input}
                     secureTextEntry={false}
                     underlineColorAndroid='transparent'
+                    multiline={true}
                     value={text}
                 />
                 {isStatusSet ? (
                     <View
-                        style={style.clearButton}
                         testID='custom_status.status.input.clear.button'
                     >
                         <ClearButton

app/screens/custom_status/components/custom_status_suggestion/custom_status_suggestion.tsx

@@ -11,6 +11,7 @@ import Emoji from '@components/emoji';
 import {CST} from '@constants/custom_status';
 import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 type Props = {
     duration?: CustomStatusDuration;
@@ -43,7 +44,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             paddingTop: 14,
             paddingBottom: 14,
             justifyContent: 'center',
-            width: '70%',
+            width: '93%',
             flex: 1,
         },
         divider: {
@@ -57,6 +58,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         },
         customStatusText: {
             color: theme.centerChannelColor,
+            ...typography('Body', 200, 'Regular'),
         },
     };
 });

app/screens/custom_status/custom_status.tsx

@@ -128,7 +128,7 @@ function reducer(state: NewStatusType, action: {
             return state;
         }
         case 'text':
-            return {...state, text: action.value};
+            return {...state, text: action.value?.replace('\n', ' ')};
         case 'emoji':
             return {...state, emoji: action.value};
         case 'duration':