From 9c3a30097221db538ae3093dc5e2d6f16c9b18e4 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Wed, 10 Mar 2021 11:49:14 +0100
Subject: [PATCH] Try to fix font size does not adapat

---
 src/components/Parse/Emojis.tsx                |  3 ++-
 src/components/Parse/HTML.tsx                  |  3 ++-
 src/i18n/en/screens/meSettingsFontsize.ts      |  2 ++
 src/i18n/zh-Hans/screens/meSettingsFontsize.ts |  2 ++
 src/screens/Tabs/Me/Fontsize.tsx               |  7 ++++---
 src/utils/styles/constants.ts                  | 12 ------------
 src/utils/styles/scaling.ts                    | 13 +++++++++++++
 7 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/styles/scaling.ts

diff --git a/src/components/Parse/Emojis.tsx b/src/components/Parse/Emojis.tsx
index a9e49152..00ce337c 100644
--- a/src/components/Parse/Emojis.tsx
+++ b/src/components/Parse/Emojis.tsx
@@ -1,5 +1,6 @@
 import { getSettingsFontsize } from '@utils/slices/settingsSlice'
-import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { StyleSheet, Text } from 'react-native'
diff --git a/src/components/Parse/HTML.tsx b/src/components/Parse/HTML.tsx
index 328b9612..062e8965 100644
--- a/src/components/Parse/HTML.tsx
+++ b/src/components/Parse/HTML.tsx
@@ -5,8 +5,9 @@ import ParseEmojis from '@components/Parse/Emojis'
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { getSettingsFontsize } from '@utils/slices/settingsSlice'
-import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { LinearGradient } from 'expo-linear-gradient'
 import React, { useCallback, useState } from 'react'
diff --git a/src/i18n/en/screens/meSettingsFontsize.ts b/src/i18n/en/screens/meSettingsFontsize.ts
index fb769473..16a24b55 100644
--- a/src/i18n/en/screens/meSettingsFontsize.ts
+++ b/src/i18n/en/screens/meSettingsFontsize.ts
@@ -2,6 +2,8 @@ export default {
   heading: 'Toot font size',
   content: {
     showcase: 'Example toot',
+    demo:
+    '<p>This is a demo toot😊. You can choose from several options from below.<br /><br />This setting only affects the main content of toots, but not other font sizes.</p>',
     availableSizes: 'Available sizes',
     sizes: { S: 'S', M: 'M - Default', L: 'L', XL: 'XL', XXL: 'XXL' }
   }
diff --git a/src/i18n/zh-Hans/screens/meSettingsFontsize.ts b/src/i18n/zh-Hans/screens/meSettingsFontsize.ts
index 523e5d2a..343f19b5 100644
--- a/src/i18n/zh-Hans/screens/meSettingsFontsize.ts
+++ b/src/i18n/zh-Hans/screens/meSettingsFontsize.ts
@@ -2,6 +2,8 @@ export default {
   heading: '嘟文字号',
   content: {
     showcase: '嘟文示例',
+    demo:
+      '<p>这是一条测试用的嘟文😊。以下是可供选择的字号，从小号至超大号。<br /><br />这个设置仅会调整嘟文的正文字号，不影响其它字号。</p>',
     availableSizes: '可选字号',
     sizes: { S: '小号', M: '默认', L: '大号', XL: '特大号', XXL: '超大号' }
   }
diff --git a/src/screens/Tabs/Me/Fontsize.tsx b/src/screens/Tabs/Me/Fontsize.tsx
index cdee5ddf..613ca754 100644
--- a/src/screens/Tabs/Me/Fontsize.tsx
+++ b/src/screens/Tabs/Me/Fontsize.tsx
@@ -8,7 +8,8 @@ import {
   getSettingsFontsize,
   SettingsState
 } from '@utils/slices/settingsSlice'
-import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -53,8 +54,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
     reblogged: false,
     muted: false,
     bookmarked: false,
-    content:
-      '<p>- tooot supports multiple accounts<br />- tooot supports browsing external instance<br />- tooot aims to support multiple languages</p>',
+    content: t('content.demo'),
     reblog: null,
     application: {
       name: 'tooot',
@@ -77,6 +77,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
       <>
         {([-1, 0, 1, 2, 3] as [-1, 0, 1, 2, 3]).map(size => (
           <Text
+            key={size}
             style={[
               styles.size,
               {
diff --git a/src/utils/styles/constants.ts b/src/utils/styles/constants.ts
index 6dbc5755..d573c0aa 100644
--- a/src/utils/styles/constants.ts
+++ b/src/utils/styles/constants.ts
@@ -1,15 +1,3 @@
-import { Dimensions } from 'react-native'
-
-const { width } = Dimensions.get('screen')
-
-const guidelineBaseWidth = 375
-// const guidelineBaseHeight = 667
-
-const scale = (size: number) => (width / guidelineBaseWidth) * size
-// const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
-export const adaptiveScale = (size: number, factor: number = 0) =>
-  size + (scale(size) - size) * factor
-
 const Base = 4
 
 export const StyleConstants = {
diff --git a/src/utils/styles/scaling.ts b/src/utils/styles/scaling.ts
new file mode 100644
index 00000000..84150604
--- /dev/null
+++ b/src/utils/styles/scaling.ts
@@ -0,0 +1,13 @@
+import { Dimensions } from 'react-native'
+
+const { width } = Dimensions.get('screen')
+
+const guidelineBaseWidth = 375
+// const guidelineBaseHeight = 667
+
+const scale = (size: number) => (width / guidelineBaseWidth) * size
+// const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
+const adaptiveScale = (size: number, factor: number = 0) =>
+  size + (scale(size) - size) * factor
+
+export { adaptiveScale }