Merge branch '611-Use-translation-library-for-about-section' into 'main'

611 Use translation library in about section

Closes #611

See merge request bloodyhealth/drip!517

components/settings/about.js

@@ -7,14 +7,16 @@ import Segment from '../common/segment'
 import Button from '../common/button'
 import ButtonRow from '../common/button-row'
 
-import labels from '../../i18n/en/settings'
 import links from '../../i18n/en/links'
+import { useTranslation } from 'react-i18next'
 
 const AboutSection = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'settings.about' })
+
   return (
-    <AppPage title={labels.aboutSection.title}>
+    <AppPage title={t('title')}>
       <Segment>
-        <AppText>{labels.aboutSection.text}</AppText>
+        <AppText>{t('intro.text')}</AppText>
         <ButtonRow>
           {[links.email, links.gitlab, links.website].map((link) => (
             <Button
@@ -28,25 +30,33 @@ const AboutSection = () => {
           ))}
         </ButtonRow>
       </Segment>
-      <Segment title={labels.philosophy.title}>
-        <AppText>{labels.philosophy.text}</AppText>
+      <Segment title={t('philosophy.title')}>
+        <AppText>{t('philosophy.text')}</AppText>
       </Segment>
-      <Segment title={labels.credits.title}>
-        <AppText>{labels.credits.note}</AppText>
+      <Segment title={t('credits.title')}>
+        <AppText>
+          {t('credits.text', {
+            smashicons: links.smashicons.url,
+            pause08: links.pause08.url,
+            kazachek: links.kazachek.url,
+            freepik: links.freepik.url,
+            flaticon: links.flaticon.url,
+          })}
+        </AppText>
       </Segment>
-      <Segment title={labels.donate.title}>
-        <AppText>{labels.donate.note}</AppText>
+      <Segment title={t('donate.title')}>
+        <AppText>{t('donate.text')}</AppText>
         {Platform.OS !== 'ios' && (
           <Button
             isCTA
             isSmall
             onPress={() => Linking.openURL(links.donate.url)}
           >
-            {links.donate.text}
+            {t('donate.button')}
           </Button>
         )}
       </Segment>
-      <Segment title={labels.version.title} last>
+      <Segment title={t('version.title')} last>
         <AppText>{require('../../package.json').version}</AppText>
       </Segment>
     </AppPage>