1 files changed, 24 insertions, 18 deletions

diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx
index 820f2895b..092dd2d32 100644
--- a/src/view/com/modals/SelfLabel.tsx
+++ b/src/view/com/modals/SelfLabel.tsx
@@ -1,8 +1,6 @@
 import React, {useState} from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
 import {Text} from '../util/text/Text'
-import {useStores} from 'state/index'
 import {s, colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -10,12 +8,15 @@ import {isWeb} from 'platform/detection'
 import {Button} from '../util/forms/Button'
 import {SelectableBtn} from '../util/forms/SelectableBtn'
 import {ScrollView} from 'view/com/modals/util'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useModalControls} from '#/state/modals'
 
 const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
 
 export const snapPoints = ['50%']
 
-export const Component = observer(function Component({
+export function Component({
   labels,
   hasMedia,
   onChange,
@@ -25,9 +26,10 @@ export const Component = observer(function Component({
   onChange: (labels: string[]) => void
 }) {
   const pal = usePalette('default')
-  const store = useStores()
+  const {closeModal} = useModalControls()
   const {isMobile} = useWebMediaQueries()
   const [selected, setSelected] = useState(labels)
+  const {_} = useLingui()
 
   const toggleAdultLabel = (label: string) => {
     const hadLabel = selected.includes(label)
@@ -51,7 +53,7 @@ export const Component = observer(function Component({
     <View testID="selfLabelModal" style={[pal.view, styles.container]}>
       <View style={styles.titleSection}>
         <Text type="title-lg" style={[pal.text, styles.title]}>
-          Add a content warning
+          <Trans>Add a content warning</Trans>
         </Text>
       </View>
 
@@ -70,7 +72,7 @@ export const Component = observer(function Component({
               paddingBottom: 8,
             }}>
             <Text type="title" style={pal.text}>
-              Adult Content
+              <Trans>Adult Content</Trans>
             </Text>
             {hasAdultSelection ? (
               <Button
@@ -78,7 +80,7 @@ export const Component = observer(function Component({
                 onPress={removeAdultLabel}
                 style={{paddingTop: 0, paddingBottom: 0, paddingRight: 0}}>
                 <Text type="md" style={pal.link}>
-                  Remove
+                  <Trans>Remove</Trans>
                 </Text>
               </Button>
             ) : null}
@@ -116,23 +118,25 @@ export const Component = observer(function Component({
 
               <Text style={[pal.text, styles.adultExplainer]}>
                 {selected.includes('sexual') ? (
-                  <>Pictures meant for adults.</>
+                  <Trans>Pictures meant for adults.</Trans>
                 ) : selected.includes('nudity') ? (
-                  <>Artistic or non-erotic nudity.</>
+                  <Trans>Artistic or non-erotic nudity.</Trans>
                 ) : selected.includes('porn') ? (
-                  <>Sexual activity or erotic nudity.</>
+                  <Trans>Sexual activity or erotic nudity.</Trans>
                 ) : (
-                  <>If none are selected, suitable for all ages.</>
+                  <Trans>If none are selected, suitable for all ages.</Trans>
                 )}
               </Text>
             </>
           ) : (
             <View>
               <Text style={[pal.textLight]}>
-                <Text type="md-bold" style={[pal.textLight]}>
-                  Not Applicable
+                <Text type="md-bold" style={[pal.textLight, s.mr5]}>
+                  <Trans>Not Applicable.</Trans>
                 </Text>
-                . This warning is only available for posts with media attached.
+                <Trans>
+                  This warning is only available for posts with media attached.
+                </Trans>
               </Text>
             </View>
           )}
@@ -143,18 +147,20 @@ export const Component = observer(function Component({
         <TouchableOpacity
           testID="confirmBtn"
           onPress={() => {
-            store.shell.closeModal()
+            closeModal()
           }}
           style={styles.btn}
           accessibilityRole="button"
-          accessibilityLabel="Confirm"
+          accessibilityLabel={_(msg`Confirm`)}
           accessibilityHint="">
-          <Text style={[s.white, s.bold, s.f18]}>Done</Text>
+          <Text style={[s.white, s.bold, s.f18]}>
+            <Trans>Done</Trans>
+          </Text>
         </TouchableOpacity>
       </View>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   container: {