Fixed #352

src/screens/Compose/Root/Header/SpoilerInput.tsx

@@ -1,9 +1,12 @@
 import CustomText from '@components/Text'
+import { getSettingsFontsize } from '@utils/slices/settingsSlice'
 import { StyleConstants } from '@utils/styles/constants'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TextInput } from 'react-native'
+import { useSelector } from 'react-redux'
 import formatText from '../../formatText'
 import ComposeContext from '../../utils/createContext'
 
@@ -12,6 +15,16 @@ const ComposeSpoilerInput: React.FC = () => {
   const { t } = useTranslation('screenCompose')
   const { colors, mode } = useTheme()
 
+  const adaptiveFontsize = useSelector(getSettingsFontsize)
+  const adaptedFontsize = adaptiveScale(
+    StyleConstants.Font.Size.M,
+    adaptiveFontsize
+  )
+  const adaptedLineheight = adaptiveScale(
+    StyleConstants.Font.LineHeight.M,
+    adaptiveFontsize
+  )
+
   return (
     <TextInput
       keyboardAppearance={mode}
@@ -23,7 +36,9 @@ const ComposeSpoilerInput: React.FC = () => {
         marginRight: StyleConstants.Spacing.Global.PagePadding,
         borderBottomWidth: 0.5,
         color: colors.primaryDefault,
-        borderBottomColor: colors.border
+        borderBottomColor: colors.border,
+        fontSize: adaptedFontsize,
+        lineHeight: adaptedLineheight
       }}
       autoCapitalize='none'
       autoCorrect={false}

src/screens/Compose/Root/Header/TextInput.tsx

@@ -1,7 +1,9 @@
 import CustomText from '@components/Text'
 import PasteInput, { PastedFile } from '@mattermost/react-native-paste-input'
 import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice'
+import { getSettingsFontsize } from '@utils/slices/settingsSlice'
 import { StyleConstants } from '@utils/styles/constants'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,6 +23,16 @@ const ComposeTextInput: React.FC = () => {
     () => true
   )
 
+  const adaptiveFontsize = useSelector(getSettingsFontsize)
+  const adaptedFontsize = adaptiveScale(
+    StyleConstants.Font.Size.M,
+    adaptiveFontsize
+  )
+  const adaptedLineheight = adaptiveScale(
+    StyleConstants.Font.LineHeight.M,
+    adaptiveFontsize
+  )
+
   return (
     <PasteInput
       keyboardAppearance={mode}
@@ -31,7 +43,9 @@ const ComposeTextInput: React.FC = () => {
         marginLeft: StyleConstants.Spacing.Global.PagePadding,
         marginRight: StyleConstants.Spacing.Global.PagePadding,
         color: colors.primaryDefault,
-        borderBottomColor: colors.border
+        borderBottomColor: colors.border,
+        fontSize: adaptedFontsize,
+        lineHeight: adaptedLineheight
       }}
       autoFocus
       enablesReturnKeyAutomatically

src/screens/Tabs/Me/SettingsFontsize.tsx

@@ -102,49 +102,12 @@ const TabMeSettingsFontsize: React.FC<
 
   return (
     <ScrollView>
-      <CustomText
-        fontStyle='M'
-        style={{
-          textAlign: 'center',
-          marginTop: StyleConstants.Spacing.M,
-          marginBottom: StyleConstants.Spacing.M,
-          color: colors.primaryDefault
-        }}
-      >
-        {t('me.fontSize.showcase')}
-      </CustomText>
-      <View>
-        <ComponentSeparator
-          extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
-          extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
-        />
-        <TimelineDefault
-          // @ts-ignore
-          item={item}
-          disableDetails
-          disableOnPress
-        />
-        <ComponentSeparator
-          extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
-          extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
-        />
-      </View>
-      <CustomText
-        fontStyle='M'
-        style={{
-          textAlign: 'center',
-          marginTop: StyleConstants.Spacing.M,
-          marginBottom: StyleConstants.Spacing.M,
-          color: colors.primaryDefault
-        }}
-      >
-        {t('me.fontSize.availableSizes')}
-      </CustomText>
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'center',
+          marginTop: StyleConstants.Spacing.M
         }}
       >
         {sizesDemo}
@@ -185,6 +148,26 @@ const TabMeSettingsFontsize: React.FC<
           style={{ marginHorizontal: StyleConstants.Spacing.S }}
         />
       </View>
+      <View
+        style={{
+          marginVertical: StyleConstants.Spacing.L
+        }}
+      >
+        <ComponentSeparator
+          extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
+          extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
+        />
+        <TimelineDefault
+          // @ts-ignore
+          item={item}
+          disableDetails
+          disableOnPress
+        />
+        <ComponentSeparator
+          extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
+          extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
+        />
+      </View>
     </ScrollView>
   )
 }