refactor: typography

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import {ActivityIndicator, Text, TouchableOpacity, View} from 'react-native';
+import {color} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -9,6 +10,7 @@ import {db} from '../../utils/DB';
 import {eOpenLoginDialog} from '../../utils/Events';
 import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
+import Paragraph from '../Typography/Paragraph';
 import {TimeSince} from './TimeSince';
 
 export const UserSection = ({noTextMode}) => {
@@ -30,22 +32,12 @@ export const UserSection = ({noTextMode}) => {
           paddingHorizontal: 6,
           paddingVertical: 8,
         }}>
-        <Text
-          style={{
-            fontFamily: WEIGHT.regular,
-            color: 'white',
-            fontSize: SIZE.xs,
-          }}>
+        <Paragraph color="white">
           <Icon name="account-outline" /> {user.username}
-        </Text>
-        <Text
-          style={{
-            fontFamily: WEIGHT.regular,
-            fontSize: SIZE.xs,
-            color: 'white',
-          }}>
+        </Paragraph>
+        <Paragraph color="white" size={SIZE.xs}>
           {SUBSCRIPTION_STATUS_STRINGS[user.subscription.status]}
-        </Text>
+        </Paragraph>
       </View>
 
       <TouchableOpacity
@@ -84,11 +76,8 @@ export const UserSection = ({noTextMode}) => {
             flexDirection: 'row',
             alignItems: 'center',
           }}>
-          <Text
+          <Paragraph
             style={{
-              fontFamily: WEIGHT.regular,
-              color: colors.pri,
-              fontSize: SIZE.sm,
               marginLeft: 5,
             }}>
             {syncing ? 'Syncing ' : 'Synced '}
@@ -100,14 +89,16 @@ export const UserSection = ({noTextMode}) => {
               )
             ) : null}
             {'\n'}
-            <Text
+            <Paragraph
+              size={SIZE.xs}
+              color={colors.icon}
               style={{
                 fontSize: SIZE.xs,
                 color: colors.icon,
               }}>
               {syncing ? 'Fetching your notes ' : 'Tap to sync '}
-            </Text>
-          </Text>
+            </Paragraph>
+          </Paragraph>
         </View>
         {syncing ? (
           <ActivityIndicator size={SIZE.lg} color={colors.accent} />
@@ -124,7 +115,7 @@ export const UserSection = ({noTextMode}) => {
       onLongPress={(event) => {
         showContext(event, 'Login');
       }}
-      color={noTextMode ? 'transparent' : colors.shade}
+      color="transparent"
       selectedColor={colors.accent}
       alpha={!colors.night ? -0.02 : 0.1}
       opacity={0.12}
@@ -132,12 +123,12 @@ export const UserSection = ({noTextMode}) => {
         paddingVertical: 12,
         marginVertical: 5,
         marginTop: pv + 5,
-        borderRadius: noTextMode ? 0 : 5,
-        width: noTextMode ? '100%' : '93%',
+        borderRadius: 0,
+        width: '100%',
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: noTextMode ? 'center' : 'flex-start',
-        paddingHorizontal: noTextMode ? 0 : 12,
+        justifyContent: 'flex-start',
+        paddingHorizontal: 8,
       }}>
       <View
         style={{
@@ -163,21 +154,10 @@ export const UserSection = ({noTextMode}) => {
           style={{
             marginLeft: 10,
           }}>
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              color: colors.icon,
-              fontSize: SIZE.xs,
-            }}>
+          <Paragraph size={SIZE.xs} color={colors.icon}>
             You are not logged in
-          </Text>
-          <Text
-            style={{
-              color: colors.accent,
-              fontSize: SIZE.sm - 2,
-            }}>
-            Login to sync notes.
-          </Text>
+          </Paragraph>
+          <Paragraph color={colors.accent}>Login to sync notes.</Paragraph>
         </View>
       )}
     </PressableButton>