Add self-labeling controls (#1141)

* Add self-label modal

* Use the shield-exclamation icon consistently on post moderation

* Wire up self-labeling

* Bump @atproto/api@0.6.0

* Bump @atproto/dev-env@^0.2.3

* Add e2e test for self-labeling

* Fix types

src/view/com/util/forms/SelectableBtn.tsx

@@ -5,6 +5,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {isDesktopWeb} from 'platform/detection'
 
 interface SelectableBtnProps {
+  testID?: string
   selected: boolean
   label: string
   left?: boolean
@@ -15,6 +16,7 @@ interface SelectableBtnProps {
 }
 
 export function SelectableBtn({
+  testID,
   selected,
   label,
   left,
@@ -25,12 +27,15 @@ export function SelectableBtn({
 }: SelectableBtnProps) {
   const pal = usePalette('default')
   const palPrimary = usePalette('inverted')
+  const needsWidthStyles = !style || !('width' in style || 'flex' in style)
   return (
     <Pressable
+      testID={testID}
       style={[
-        styles.selectableBtn,
-        left && styles.selectableBtnLeft,
-        right && styles.selectableBtnRight,
+        styles.btn,
+        needsWidthStyles && styles.btnWidth,
+        left && styles.btnLeft,
+        right && styles.btnRight,
         pal.border,
         selected ? palPrimary.view : pal.view,
         style,
@@ -45,9 +50,7 @@ export function SelectableBtn({
 }
 
 const styles = StyleSheet.create({
-  selectableBtn: {
-    flex: isDesktopWeb ? undefined : 1,
-    width: isDesktopWeb ? 100 : undefined,
+  btn: {
     flexDirection: 'row',
     justifyContent: 'center',
     borderWidth: 1,
@@ -55,12 +58,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 10,
   },
-  selectableBtnLeft: {
+  btnWidth: {
+    flex: isDesktopWeb ? undefined : 1,
+    width: isDesktopWeb ? 100 : undefined,
+  },
+  btnLeft: {
     borderTopLeftRadius: 8,
     borderBottomLeftRadius: 8,
     borderLeftWidth: 1,
   },
-  selectableBtnRight: {
+  btnRight: {
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
   },

src/view/com/util/moderation/ContentHider.tsx

@@ -3,7 +3,7 @@ import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ModerationUI} from '@atproto/api'
 import {Text} from '../text/Text'
-import {InfoCircleIcon} from 'lib/icons'
+import {ShieldExclamation} from 'lib/icons'
 import {describeModerationCause} from 'lib/moderation'
 import {useStores} from 'state/index'
 import {isDesktopWeb} from 'platform/detection'
@@ -58,7 +58,7 @@ export function ContentHider({
           accessibilityRole="button"
           accessibilityLabel="Learn more about this warning"
           accessibilityHint="">
-          <InfoCircleIcon size={18} style={pal.text} />
+          <ShieldExclamation size={18} style={pal.text} />
         </Pressable>
         <Text type="lg" style={pal.text}>
           {desc.name}

src/view/com/util/moderation/PostAlerts.tsx

@@ -3,7 +3,7 @@ import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native'
 import {ModerationUI} from '@atproto/api'
 import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
-import {InfoCircleIcon} from 'lib/icons'
+import {ShieldExclamation} from 'lib/icons'
 import {describeModerationCause} from 'lib/moderation'
 import {useStores} from 'state/index'
 
@@ -41,7 +41,7 @@ export function PostAlerts({
       accessibilityLabel="Learn more about this warning"
       accessibilityHint=""
       style={[styles.container, pal.viewLight, style]}>
-      <InfoCircleIcon style={pal.text} size={18} />
+      <ShieldExclamation style={pal.text} size={16} />
       <Text type="lg" style={pal.text}>
         {desc.name}
       </Text>

src/view/com/util/moderation/PostHider.tsx

@@ -6,7 +6,7 @@ import {Link} from '../Link'
 import {Text} from '../text/Text'
 import {addStyle} from 'lib/styles'
 import {describeModerationCause} from 'lib/moderation'
-import {InfoCircleIcon} from 'lib/icons'
+import {ShieldExclamation} from 'lib/icons'
 import {useStores} from 'state/index'
 import {isDesktopWeb} from 'platform/detection'
 
@@ -67,7 +67,7 @@ export function PostHider({
           accessibilityRole="button"
           accessibilityLabel="Learn more about this warning"
           accessibilityHint="">
-          <InfoCircleIcon size={18} style={pal.text} />
+          <ShieldExclamation size={18} style={pal.text} />
         </Pressable>
         <Text type="lg" style={pal.text}>
           {desc.name}

src/view/com/util/moderation/ProfileHeaderAlerts.tsx

@@ -3,7 +3,7 @@ import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {ProfileModeration} from '@atproto/api'
 import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
-import {InfoCircleIcon} from 'lib/icons'
+import {ShieldExclamation} from 'lib/icons'
 import {
   describeModerationCause,
   getProfileModerationCauses,
@@ -44,7 +44,7 @@ export function ProfileHeaderAlerts({
             accessibilityLabel="Learn more about this warning"
             accessibilityHint=""
             style={[styles.container, pal.viewLight, style]}>
-            <InfoCircleIcon style={pal.text} size={24} />
+            <ShieldExclamation style={pal.text} size={24} />
             <Text type="lg" style={pal.text}>
               {desc.name}
             </Text>