WIP

src/components/moderation/ContentHider.tsx

@@ -52,32 +52,56 @@ export function ContentHider({
       <ModerationDetailsDialog control={control} modcause={blur} />
 
       <Button
-        variant="solid"
-        color="secondary"
-        size="large"
-        shape="default"
         onPress={() => {
           if (!modui.noOverride) {
             setOverride(v => !v)
           } else {
+            console.log('OPEN')
             control.open()
           }
         }}
         label={desc.name}
         accessibilityHint={
           override ? _(msg`Hide the content`) : _(msg`Show the content`)
-        }
-        style={
-          gtMobile ? [a.py_lg, a.px_xl, a.gap_sm] : [a.py_md, a.px_lg, a.gap_sm]
         }>
-        <ButtonIcon icon={desc.icon} position="left" />
+        {state => (
-        <ButtonText style={[a.flex_1, a.text_left]}>{desc.name}</ButtonText>
+          <View
-        {!modui.noOverride && (
+            style={[
-          <ButtonText>
+              a.flex_row,
-            {override ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
+              a.w_full,
-          </ButtonText>
+              a.justify_start,
+              a.align_center,
+              a.py_md,
+              a.px_lg,
+              a.gap_sm,
+              a.rounded_sm,
+              t.atoms.bg_contrast_25,
+              (state.hovered || state.pressed) && t.atoms.bg_contrast_50,
+            ]}>
+            <desc.icon
+              size="lg"
+              fill={t.atoms.text_contrast_medium.color}
+              style={{marginLeft: -2}}
+            />
+            <Text
+              style={[
+                a.flex_1,
+                a.text_left,
+                a.font_bold,
+                a.italic,
+                t.atoms.text_contrast_medium,
+              ]}>
+              {desc.name}
+            </Text>
+            {!modui.noOverride && (
+              <Text style={[a.font_bold, t.atoms.text_contrast_high]}>
+                {override ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
+              </Text>
+            )}
+          </View>
         )}
       </Button>
+
       {desc.source && blur.type === 'label' && !override && (
         <Button
           variant="ghost"
@@ -104,6 +128,7 @@ export function ContentHider({
           </ButtonText>
         </Button>
       )}
+
       {override && <View style={childContainerStyle}>{children}</View>}
     </View>
   )

src/lib/moderation/useModerationCauseDescription.ts

@@ -5,13 +5,14 @@ import {useGlobalLabelStrings} from './useGlobalLabelStrings'
 import {useLabelDefinitions} from '#/state/queries/preferences'
 import {getDefinition, getLabelStrings} from './useLabelInfo'
 
+import {Props as SVGIconProps} from '#/components/icons/common'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 
 export interface ModerationCauseDescription {
-  icon: any
+  icon: React.ComponentType<SVGIconProps>
   name: string
   description: string
   source?: string

src/view/screens/Settings/index.tsx

@@ -261,6 +261,10 @@ export function SettingsScreen({}: Props) {
     navigation.navigate('Debug')
   }, [navigation])
 
+  const onPressDebugModeration = React.useCallback(() => {
+    navigation.navigate('DebugMod')
+  }, [navigation])
+
   const onPressSavedFeeds = React.useCallback(() => {
     navigation.navigate('SavedFeeds')
   }, [navigation])
@@ -807,6 +811,16 @@ export function SettingsScreen({}: Props) {
                 <Trans>Storybook</Trans>
               </Text>
             </TouchableOpacity>
+            <TouchableOpacity
+              style={[pal.view, styles.linkCardNoIcon]}
+              onPress={onPressDebugModeration}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Open storybook page`)}
+              accessibilityHint={_(msg`Opens the storybook page`)}>
+              <Text type="lg" style={pal.text}>
+                <Trans>Debug Moderation</Trans>
+              </Text>
+            </TouchableOpacity>
             <TouchableOpacity
               style={[pal.view, styles.linkCardNoIcon]}
               onPress={onPressResetPreferences}