feat: add extra metadata to the album view

src/screens/Settings/components/Cache.tsx

@@ -4,7 +4,7 @@ import music from 'store/music';
 import { t } from '@localisation';
 import Button from 'components/Button';
 import styled from 'styled-components/native';
-import { Text } from 'components/Typography';
+import { Paragraph } from 'components/Typography';
 import { useAppDispatch } from 'store';
 import { useHeaderHeight } from '@react-navigation/elements';
 
@@ -30,7 +30,7 @@ export default function CacheSettings() {
 
     return (
         <Container contentInset={{ top: headerHeight }}>
-            <Text>{t('setting-cache-description')}</Text>
+            <Paragraph>{t('setting-cache-description')}</Paragraph>
             <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
         </Container>
     );

src/screens/Settings/components/Library.tsx

@@ -6,7 +6,7 @@ import { NavigationProp } from '../..';
 import { useTypedSelector } from 'store';
 import { t } from '@localisation';
 import Button from 'components/Button';
-import { Text } from 'components/Typography';
+import { Paragraph } from 'components/Typography';
 import { useHeaderHeight } from '@react-navigation/elements';
 
 
@@ -34,15 +34,15 @@ export default function LibrarySettings() {
     return (
         <Container contentInset={{ top: headerHeight }}>
             <InputContainer>
-                <Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
+                <Paragraph style={defaultStyles.text}>{t('jellyfin-server-url')}</Paragraph>
                 <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />
             </InputContainer>
             <InputContainer>
-                <Text style={defaultStyles.text}>{t('jellyfin-access-token')}</Text>
+                <Paragraph style={defaultStyles.text}>{t('jellyfin-access-token')}</Paragraph>
                 <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={defaultStyles.input} />
             </InputContainer>
             <InputContainer>
-                <Text style={defaultStyles.text}>{t('jellyfin-user-id')}</Text>
+                <Paragraph style={defaultStyles.text}>{t('jellyfin-user-id')}</Paragraph>
                 <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={defaultStyles.input} />
             </InputContainer>
             <Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} />

src/screens/Settings/components/Sentry.tsx

@@ -1,4 +1,4 @@
-import { Text } from 'components/Typography';
+import { Paragraph, Text } from 'components/Typography';
 
 import React, { useEffect, useState } from 'react';
 import { Switch } from 'react-native-gesture-handler';
@@ -92,7 +92,7 @@ function renderHeader(question: Question, index: number, isActive: boolean) {
 function renderContent(question: Question) {
     return (
         <ContentContainer>
-            <Text>{question.content}</Text>
+            <Paragraph>{question.content}</Paragraph>
         </ContentContainer>
     );
 }
@@ -112,9 +112,9 @@ export default function Sentry() {
     return (
         <ScrollView contentInset={{ top: headerHeight }}>
             <Container>
-                <Text>{t('error-reporting-description')}</Text>
-                <Text />
-                <Text>{t('error-reporting-rationale')}</Text>
+                <Paragraph>{t('error-reporting-description')}</Paragraph>
+                <Paragraph />
+                <Paragraph>{t('error-reporting-rationale')}</Paragraph>
 
                 <SwitchContainer>
                     <Label>{t('error-reporting')}</Label>