From ac6f6eef667a5e2801e56423058b7053f1705ebe Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 10 Aug 2023 12:54:27 -0700
Subject: [PATCH] Replace the emojis in the self-labeler with a remove button
 (#1147)

---
 src/view/com/modals/SelfLabel.tsx | 41 +++++++++++++++++++------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx
index cb78f3f15c..87fc8fde6b 100644
--- a/src/view/com/modals/SelfLabel.tsx
+++ b/src/view/com/modals/SelfLabel.tsx
@@ -6,6 +6,7 @@ import {useStores} from 'state/index'
 import {s, colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isDesktopWeb} from 'platform/detection'
+import {Button} from '../util/forms/Button'
 import {SelectableBtn} from '../util/forms/SelectableBtn'
 import {ScrollView} from 'view/com/modals/util'
 
@@ -24,7 +25,7 @@ export const Component = observer(function Component({
   const store = useStores()
   const [selected, setSelected] = useState(labels)
 
-  const toggleAdultContent = (label: string) => {
+  const toggleAdultLabel = (label: string) => {
     const hadLabel = selected.includes(label)
     const stripped = selected.filter(l => !ADULT_CONTENT_LABELS.includes(l))
     const final = !hadLabel ? stripped.concat([label]) : stripped
@@ -32,6 +33,16 @@ export const Component = observer(function Component({
     onChange(final)
   }
 
+  const removeAdultLabel = () => {
+    const final = selected.filter(l => !ADULT_CONTENT_LABELS.includes(l))
+    setSelected(final)
+    onChange(final)
+  }
+
+  const hasAdultSelection =
+    selected.includes('sexual') ||
+    selected.includes('nudity') ||
+    selected.includes('porn')
   return (
     <View testID="selfLabelModal" style={[pal.view, styles.container]}>
       <View style={styles.titleSection}>
@@ -52,18 +63,16 @@ export const Component = observer(function Component({
             <Text type="title" style={pal.text}>
               Adult Content
             </Text>
-
-            <Text type="lg" style={pal.text}>
-              {selected.includes('sexual') ? (
-                <>😏</>
-              ) : selected.includes('nudity') ? (
-                <>🫣</>
-              ) : selected.includes('porn') ? (
-                <>🥵</>
-              ) : (
-                <></>
-              )}
-            </Text>
+            {hasAdultSelection ? (
+              <Button
+                type="default-light"
+                onPress={removeAdultLabel}
+                style={{paddingTop: 0, paddingBottom: 0, paddingRight: 0}}>
+                <Text type="md" style={pal.link}>
+                  Remove
+                </Text>
+              </Button>
+            ) : null}
           </View>
           <View style={s.flexRow}>
             <SelectableBtn
@@ -71,7 +80,7 @@ export const Component = observer(function Component({
               selected={selected.includes('sexual')}
               left
               label="Suggestive"
-              onSelect={() => toggleAdultContent('sexual')}
+              onSelect={() => toggleAdultLabel('sexual')}
               accessibilityHint=""
               style={s.flex1}
             />
@@ -79,7 +88,7 @@ export const Component = observer(function Component({
               testID="nudityLabelBtn"
               selected={selected.includes('nudity')}
               label="Nudity"
-              onSelect={() => toggleAdultContent('nudity')}
+              onSelect={() => toggleAdultLabel('nudity')}
               accessibilityHint=""
               style={s.flex1}
             />
@@ -88,7 +97,7 @@ export const Component = observer(function Component({
               selected={selected.includes('porn')}
               label="Porn"
               right
-              onSelect={() => toggleAdultContent('porn')}
+              onSelect={() => toggleAdultLabel('porn')}
               accessibilityHint=""
               style={s.flex1}
             />