Richtext//RichtextCollapsible: add fontSize fixes #425 fonts: update …

…font size to be same on all devices
liqd · Mar 23, 2023 · 809dbff · 809dbff
1 parent 9adc2f4
commit 809dbff
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/src/components/Richtext.js b/src/components/Richtext.js
@@ -7,6 +7,7 @@ import RenderHTML, {
 
 import { baseUrl } from '../BaseApi'
 import { COLORS } from '../theme/colors'
+import { FONTS, SIZES } from '../theme/fonts'
 
 import { LinkTextSourceSans } from './LinkTextSourceSans'
 import { RichtextCollapsibleItem } from './RichtextCollapsibleItem'
@@ -106,6 +107,18 @@ export const Richtext = ({ text }) => {
     },
     a: {
       color: COLORS.text
+    },
+    p: {
+      fontFamily: FONTS.familySans,
+      fontSize: SIZES.base,
+    },
+    li: {
+      fontFamily: FONTS.familySans,
+      fontSize: SIZES.base,
+    },
+    div: {
+      fontFamily: FONTS.familySans,
+      fontSize: SIZES.base,
     }
   }
 

diff --git a/src/components/RichtextCollapsibleItem.js b/src/components/RichtextCollapsibleItem.js
@@ -14,7 +14,7 @@ export const RichtextCollapsibleItem = ({ title, body }) => {
 
   return (
     <TouchableOpacity
-      accessibilityRole="button" 
+      accessibilityRole="button"
       onPress={() => setCollapsed(!collapsed)}
     >
       <View style={styles.collapsibleButton}>
@@ -27,7 +27,7 @@ export const RichtextCollapsibleItem = ({ title, body }) => {
       </View>
       {!collapsed && (
         <View style={styles.collapsibleBody}>
-          <Text>{body}</Text>
+          <Text style={styles.collapsibleBodyText}>{body}</Text>
         </View>
       )}
     </TouchableOpacity>

diff --git a/src/components/RichtextCollapsibleItem.styles.js b/src/components/RichtextCollapsibleItem.styles.js
@@ -29,6 +29,10 @@ export const styles = StyleSheet.create({
     paddingTop: SPACINGS.multiplyBy(0.5),
     paddingBottom: SPACINGS.multiplyBy(1.25),
     marginBottom: SPACINGS.multiplyBy(0.5),
-    borderBottomWidth: 1
+    borderBottomWidth: 1,
+  },
+  collapsibleBodyText: {
+    fontFamily: FONTS.familySans,
+    fontSize: SIZES.base,
   }
 })
diff --git a/src/theme/fonts.js b/src/theme/fonts.js
@@ -1,27 +1,28 @@
-const baseFontSize = 18
-const baseLineHeight = 22
+import { PixelRatio } from 'react-native'
+
+const pixelRatio = PixelRatio.getFontScale()
 
 export const FONTS = {
   familySans: 'SourceSansPro_400Regular',
   familySemiBold: 'SourceSansPro_600SemiBold',
 }
 
 export const SIZES = {
-  xs: baseFontSize * 0.8125, //
-  sm: baseFontSize * 0.9375, //
-  base: baseFontSize,
-  md: baseFontSize * 1.0625, //
-  lg: baseFontSize * 1.25, //
-  xl: baseFontSize * 1.375, //
-  xxl: baseFontSize * 1.75, //
+  xs: pixelRatio * 13,
+  sm: pixelRatio * 16,
+  base: pixelRatio * 18,
+  md: pixelRatio * 20,
+  lg: pixelRatio * 22,
+  xl: pixelRatio * 28,
+  xxl: pixelRatio * 34,
 }
 
 export const LINEHEIGHTS = {
-  sm: baseLineHeight * 0.95,
-  base: baseLineHeight,
-  md: baseLineHeight * 1.1,
-  lg: baseLineHeight * 1.3,
-  xl: baseLineHeight * 1.9,
+  sm: pixelRatio * 21,
+  base: pixelRatio * 22,
+  md: pixelRatio * 24,
+  lg: pixelRatio * 28,
+  xl: pixelRatio * 30,
 }
 
 export const LETTERSPACING = {