diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index 5be21dfd39..38338df6ca 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -48,13 +48,6 @@ export interface DeleteAccountModal {
name: 'delete-account'
}
-export interface SelfLabelModal {
- name: 'self-label'
- labels: string[]
- hasMedia: boolean
- onChange: (labels: string[]) => void
-}
-
export interface ChangeHandleModal {
name: 'change-handle'
onChanged: () => void
@@ -127,7 +120,6 @@ export type Modal =
// Posts
| CropImageModal
- | SelfLabelModal
// Bluesky access
| WaitlistModal
diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx
index 27e3813dc2..e557848bb2 100644
--- a/src/view/com/composer/labels/LabelsBtn.tsx
+++ b/src/view/com/composer/labels/LabelsBtn.tsx
@@ -1,15 +1,18 @@
import React from 'react'
-import {Keyboard, StyleSheet} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
-import {msg} from '@lingui/macro'
+import {Keyboard, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
-import {usePalette} from 'lib/hooks/usePalette'
-import {ShieldExclamation} from 'lib/icons'
-import {isNative} from 'platform/detection'
-import {Button} from 'view/com/util/forms/Button'
+import {ShieldExclamation} from '#/lib/icons'
+import {isNative} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Text} from '#/components/Typography'
+import {SelectableBtn} from '../../util/forms/SelectableBtn'
+
+const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
export function LabelsBtn({
labels,
@@ -20,48 +23,161 @@ export function LabelsBtn({
hasMedia: boolean
onChange: (v: string[]) => void
}) {
- const pal = usePalette('default')
+ const control = Dialog.useDialogControl()
+ const t = useTheme()
const {_} = useLingui()
- const {openModal} = useModalControls()
+
+ const toggleAdultLabel = (label: string) => {
+ const hadLabel = labels.includes(label)
+ const stripped = labels.filter(l => !ADULT_CONTENT_LABELS.includes(l))
+ const final = !hadLabel ? stripped.concat([label]) : stripped
+ onChange(final)
+ }
+
+ const removeAdultLabel = () => {
+ const final = labels.filter(l => !ADULT_CONTENT_LABELS.includes(l))
+ onChange(final)
+ }
+
+ const hasAdultSelection =
+ labels.includes('sexual') ||
+ labels.includes('nudity') ||
+ labels.includes('porn')
return (
-
+
+
+
+
+
+
+ Add a content warning
+
+
+
+
+
+ Adult Content
+
+ {hasAdultSelection ? (
+
+ ) : null}
+
+ {hasMedia ? (
+ <>
+
+ toggleAdultLabel('sexual')}
+ accessibilityHint=""
+ style={a.flex_1}
+ />
+ toggleAdultLabel('nudity')}
+ accessibilityHint=""
+ style={a.flex_1}
+ />
+ toggleAdultLabel('porn')}
+ accessibilityHint=""
+ style={a.flex_1}
+ />
+
+
+
+ {labels.includes('sexual') ? (
+ Pictures meant for adults.
+ ) : labels.includes('nudity') ? (
+ Artistic or non-erotic nudity.
+ ) : labels.includes('porn') ? (
+ Sexual activity or erotic nudity.
+ ) : (
+
+ If none are selected, suitable for all ages.
+
+ )}
+
+
+ ) : (
+
+
+
+
+ Not Applicable.
+ {' '}
+ This warning is only available for posts with media
+ attached.
+
+
+
+ )}
+
+
+
+
+
+
+
)
}
-
-const styles = StyleSheet.create({
- button: {
- flexDirection: 'row',
- alignItems: 'center',
- paddingVertical: 2,
- paddingHorizontal: 6,
- },
- dimmed: {
- opacity: 0.4,
- },
- label: {
- maxWidth: 100,
- },
-})
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index 90e93821c5..becb39ff3d 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -20,7 +20,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
import * as LinkWarningModal from './LinkWarning'
import * as ListAddUserModal from './ListAddRemoveUsers'
-import * as SelfLabelModal from './SelfLabel'
import * as UserAddRemoveListsModal from './UserAddRemoveLists'
import * as VerifyEmailModal from './VerifyEmail'
@@ -70,9 +69,6 @@ export function ModalsContainer() {
} else if (activeModal?.name === 'delete-account') {
snapPoints = DeleteAccountModal.snapPoints
element =
- } else if (activeModal?.name === 'self-label') {
- snapPoints = SelfLabelModal.snapPoints
- element =
} else if (activeModal?.name === 'change-handle') {
snapPoints = ChangeHandleModal.snapPoints
element =
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index a2acc23bb9..46ced58d9a 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -20,7 +20,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
import * as LinkWarningModal from './LinkWarning'
import * as ListAddUserModal from './ListAddRemoveUsers'
-import * as SelfLabelModal from './SelfLabel'
import * as UserAddRemoveLists from './UserAddRemoveLists'
import * as VerifyEmailModal from './VerifyEmail'
@@ -75,8 +74,6 @@ function Modal({modal}: {modal: ModalIface}) {
element =
} else if (modal.name === 'delete-account') {
element =
- } else if (modal.name === 'self-label') {
- element =
} else if (modal.name === 'change-handle') {
element =
} else if (modal.name === 'invite-codes') {
diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx
deleted file mode 100644
index ce3fbcef81..0000000000
--- a/src/view/com/modals/SelfLabel.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React, {useState} from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useModalControls} from '#/state/modals'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {colors, s} from 'lib/styles'
-import {isWeb} from 'platform/detection'
-import {ScrollView} from 'view/com/modals/util'
-import {Button} from '../util/forms/Button'
-import {SelectableBtn} from '../util/forms/SelectableBtn'
-import {Text} from '../util/text/Text'
-
-const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
-
-export const snapPoints = ['50%']
-
-export function Component({
- labels,
- hasMedia,
- onChange,
-}: {
- labels: string[]
- hasMedia: boolean
- onChange: (labels: string[]) => void
-}) {
- const pal = usePalette('default')
- const {closeModal} = useModalControls()
- const {isMobile} = useWebMediaQueries()
- const [selected, setSelected] = useState(labels)
- const {_} = useLingui()
-
- 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
- setSelected(final)
- 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 (
-
-
-
- Add a content warning
-
-
-
-
-
-
-
- Adult Content
-
- {hasAdultSelection ? (
-
- ) : null}
-
- {hasMedia ? (
- <>
-
- toggleAdultLabel('sexual')}
- accessibilityHint=""
- style={s.flex1}
- />
- toggleAdultLabel('nudity')}
- accessibilityHint=""
- style={s.flex1}
- />
- toggleAdultLabel('porn')}
- accessibilityHint=""
- style={s.flex1}
- />
-
-
-
- {selected.includes('sexual') ? (
- Pictures meant for adults.
- ) : selected.includes('nudity') ? (
- Artistic or non-erotic nudity.
- ) : selected.includes('porn') ? (
- Sexual activity or erotic nudity.
- ) : (
- If none are selected, suitable for all ages.
- )}
-
-
- ) : (
-
-
-
-
- Not Applicable.
- {' '}
- This warning is only available for posts with media attached.
-
-
-
- )}
-
-
-
-
- {
- closeModal()
- }}
- style={styles.btn}
- accessibilityRole="button"
- accessibilityLabel={_(msg`Confirm`)}
- accessibilityHint="">
-
- Done
-
-
-
-
- )
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- paddingBottom: isWeb ? 0 : 40,
- },
- titleSection: {
- paddingTop: isWeb ? 0 : 4,
- paddingBottom: isWeb ? 14 : 10,
- },
- title: {
- textAlign: 'center',
- fontWeight: '600',
- marginBottom: 5,
- },
- description: {
- textAlign: 'center',
- paddingHorizontal: 32,
- },
- section: {
- borderTopWidth: 1,
- paddingVertical: 20,
- },
- adultExplainer: {
- paddingLeft: 5,
- paddingTop: 10,
- },
- btn: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'center',
- borderRadius: 32,
- padding: 14,
- backgroundColor: colors.blue3,
- },
- btnContainer: {
- paddingTop: 20,
- paddingHorizontal: 20,
- },
-})