fix font sizes

apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js

@@ -162,19 +162,18 @@ export const ActionSheetTagsSection = ({item}) => {
           marginTop: 5,
           alignItems: 'center',
         }}>
+        {tags.filter(
+          (o) => o.noteIds.length >= 1 && !note.tags.find((t) => t === o.title),
+        ).length === 0 ? null : (
           <Text
             style={{
               fontFamily: WEIGHT.regular,
               fontSize: SIZE.xs,
               color: colors.pri,
             }}>
-          {tags.filter(
-            (o) =>
-              o.noteIds.length >= 1 && !note.tags.find((t) => t === o.title),
-          ).length === 0
-            ? ''
-            : 'Suggested: '}
+            {"Suggested: "}
           </Text>
+        )}
 
         {suggestions.map((tag) => (
           <TouchableOpacity
@@ -195,7 +194,7 @@ export const ActionSheetTagsSection = ({item}) => {
             <Text
               style={{
                 fontFamily: WEIGHT.regular,
-                fontSize: SIZE.xs,
+                fontSize: SIZE.sm,
                 color: colors.pri,
               }}>
               <Text

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -35,6 +35,8 @@ import {Button} from '../Button';
 import {PremiumTag} from '../Premium/PremiumTag';
 import {PressableButton} from '../PressableButton';
 import {Toast} from '../Toast';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
 import {ActionSheetColorsSection} from './ActionSheetColorsSection';
 import {ActionSheetTagsSection} from './ActionSheetTagsSection';
 const w = Dimensions.get('window').width;
@@ -306,15 +308,7 @@ export const ActionSheetComponent = ({
           size={DDS.isTab ? SIZE.xl : SIZE.lg}
           color={rowItem.name === 'Delete' ? colors.errorText : colors.accent}
         />
-
-        <Text
-          style={{
-            fontFamily: WEIGHT.regular,
-            fontSize: DDS.isTab ? SIZE.sm : SIZE.xs + 1,
-            color: colors.pri,
-          }}>
-          {rowItem.name}
-        </Text>
+        <Paragraph>{rowItem.name}</Paragraph>
       </TouchableOpacity>
     ) : null;
 
@@ -349,14 +343,7 @@ export const ActionSheetComponent = ({
             color={colors.pri}
             size={SIZE.md}
           />
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
-              color: colors.pri,
-            }}>
-            {item.name}
-          </Text>
+          <Paragraph>{item.name}</Paragraph>
         </View>
 
         <View
@@ -474,16 +461,9 @@ export const ActionSheetComponent = ({
         paddingHorizontal: 0,
       }}>
       {!note.id && !note.dateCreated ? (
-        <Text
-          style={{
-            width: '100%',
-            textAlign: 'center',
-            marginVertical: 10,
-            color: colors.icon,
-            fontFamily: WEIGHT.regular,
-          }}>
-          Please start writing to save your note.
-        </Text>
+        <Paragraph style={{marginVertical: 10}}>
+          Start writing to save your note.
+        </Paragraph>
       ) : (
         <View
           style={{
@@ -491,21 +471,13 @@ export const ActionSheetComponent = ({
             alignItems: 'center',
             marginVertical: 10,
           }}>
-          <Text
-            numberOfLines={1}
-            style={{
-              color: colors.heading,
-              fontSize: SIZE.sm + 1,
-              fontFamily: WEIGHT.bold,
-              maxWidth: '100%',
-            }}>
-            {note.title.replace('\n', '')}
-          </Text>
+          <Heading size={SIZE.md}>{note.title.replace('\n', '')}</Heading>
+
           <Text
             numberOfLines={2}
             style={{
-              fontSize: SIZE.sm - 1,
-              color: colors.pri + 'B3',
+              fontSize: SIZE.sm,
+              color: colors.pri,
               fontFamily: WEIGHT.regular,
               width: '100%',
               textAlign: 'center',
@@ -524,7 +496,7 @@ export const ActionSheetComponent = ({
           <Text
             style={{
               color: colors.icon,
-              fontSize: SIZE.xs - 1,
+              fontSize: SIZE.xs,
               textAlignVertical: 'center',
               fontFamily: WEIGHT.regular,
               marginTop: 2.5,
@@ -567,7 +539,7 @@ export const ActionSheetComponent = ({
                         style={{
                           color: 'white',
                           fontFamily: WEIGHT.regular,
-                          fontSize: SIZE.xxs,
+                          fontSize: SIZE.xs,
                           maxWidth: '100%',
                         }}>
                         {topic.title}
@@ -583,7 +555,7 @@ export const ActionSheetComponent = ({
               onPress={onPressSync}
               style={{
                 color: colors.accent,
-                fontSize: SIZE.xs - 1,
+                fontSize: SIZE.xs,
                 textAlignVertical: 'center',
                 fontFamily: WEIGHT.regular,
                 marginTop: 5,
@@ -592,6 +564,7 @@ export const ActionSheetComponent = ({
                 borderColor: colors.accent,
                 paddingHorizontal: 5,
                 borderRadius: 2,
+                height: 20,
               }}>
               {user && user.lastSynced > note.dateEdited
                 ? 'Synced'
@@ -601,7 +574,7 @@ export const ActionSheetComponent = ({
 
           {refreshing ? (
             <ActivityIndicator
-              style={{marginTop: 5}}
+              style={{marginTop: 5, height: 20}}
               size={12}
               color={colors.accent}
             />

apps/mobile/src/components/Menu/MenuListItem.js

@@ -8,8 +8,9 @@ import {eClearSearch} from '../../utils/Events';
 import NavigationService from '../../services/Navigation';
 import {showContext} from '../../utils';
 import {PressableButton} from '../PressableButton';
-import {SIZE, WEIGHT} from "../../utils/SizeUtils";
-import {DDS} from "../../services/DeviceDetection";
+import {SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {DDS} from '../../services/DeviceDetection';
+import Paragraph from '../Typography/Paragraph';
 
 export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
   const [state, dispatch] = useTracked();
@@ -25,14 +26,14 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
       });
       dispatch({
         type: Actions.HEADER_VERTICAL_MENU,
-            state: item.name === "Home",
+        state: item.name === 'Home',
       });
       eSendEvent(eClearSearch);
     }
     if (item.func) {
-      item.func()
+      item.func();
     } else {
-      NavigationService.navigate(item.name)
+      NavigationService.navigate(item.name);
     }
     if (item.close) {
       NavigationService.closeDrawer();
@@ -45,7 +46,7 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
       key={item.name + index}
       onPress={_onPress}
       onLongPress={(event) => {
-        showContext(event, item.name).then(r => r);
+        showContext(event, item.name).then((r) => r);
       }}
       color={
         currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent'
@@ -78,16 +79,7 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
           color={colors.accent}
           size={DDS.isTab ? SIZE.md + 5 : SIZE.md + 1}
         />
-        {noTextMode ? null : (
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
-              color: colors.heading,
-            }}>
-            {item.name}
-          </Text>
-        )}
+        {noTextMode ? null : <Paragraph size={SIZE.md}>{item.name}</Paragraph>}
       </View>
 
       {item.switch && !noTextMode ? (

apps/mobile/src/utils/SizeUtils.js

@@ -60,8 +60,8 @@ export const normalize = (size) => {
 export const SIZE = {
   xxs: 9 * scale.fontScale,
   xs: 11 * scale.fontScale,
-  sm: normalize(13) * scale.fontScale,
-  md: normalize(16) * scale.fontScale,
+  sm: normalize(12.5)  * scale.fontScale,
+  md: normalize(15) * scale.fontScale,
   lg: normalize(21) * scale.fontScale,
   xl: normalize(24) * scale.fontScale,
   xxl: normalize(28) * scale.fontScale,
@@ -71,8 +71,8 @@ export const SIZE = {
 export function updateSize() {
   SIZE.xxs = 9 * scale.fontScale;
   SIZE.xs = 10 * scale.fontScale;
-  SIZE.sm = normalize(13) * scale.fontScale;
-  SIZE.md = normalize(16) * scale.fontScale;
+  SIZE.sm = normalize(12.5) * scale.fontScale;
+  SIZE.md = normalize(15) * scale.fontScale;
   SIZE.lg = normalize(21) * scale.fontScale;
   SIZE.xl = normalize(24) * scale.fontScale;
   SIZE.xxl = normalize(28) * scale.fontScale;