Mods UI fixes (#3296)

* Fix report dialog buttons on Android by adjusting styles

* Dry up label pref comp

src/components/ReportDialog/SelectLabelerView.tsx

@@ -38,7 +38,7 @@ export function SelectLabelerView({
 
       <Divider />
 
-      <View style={[a.gap_xs, {marginHorizontal: a.p_md.padding * -1}]}>
+      <View style={[a.gap_sm]}>
         {props.labelers.map(labeler => {
           return (
             <Button
@@ -63,17 +63,14 @@ function LabelerButton({
   const {hovered, pressed} = useButtonContext()
   const interacted = hovered || pressed
 
-  const styles = React.useMemo(() => {
-    return {
-      interacted: {
-        backgroundColor: t.palette.contrast_50,
-      },
-    }
-  }, [t])
-
   return (
     <LabelingServiceCard.Outer
-      style={[a.p_md, a.rounded_sm, interacted && styles.interacted]}>
+      style={[
+        a.p_md,
+        a.rounded_sm,
+        t.atoms.bg_contrast_25,
+        interacted && t.atoms.bg_contrast_50,
+      ]}>
       <LabelingServiceCard.Avatar avatar={labeler.creator.avatar} />
       <LabelingServiceCard.Content>
         <LabelingServiceCard.Title

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -86,7 +86,7 @@ export function SelectReportOptionView({
 
       <Divider />
 
-      <View style={[a.gap_sm, {marginHorizontal: a.p_md.padding * -1}]}>
+      <View style={[a.gap_sm]}>
         {reportOptions.map(reportOption => {
           return (
             <Button
@@ -102,39 +102,37 @@ export function SelectReportOptionView({
         })}
 
         {(props.params.type === 'post' || props.params.type === 'account') && (
-          <View style={[a.pt_md, a.px_md]}>
-            <View
+          <View
+            style={[
+              a.flex_row,
+              a.align_center,
+              a.justify_between,
+              a.gap_lg,
+              a.p_md,
+              a.pl_lg,
+              a.rounded_md,
+              t.atoms.bg_contrast_900,
+            ]}>
+            <Text
               style={[
-                a.flex_row,
-                a.align_center,
-                a.justify_between,
-                a.gap_lg,
-                a.p_md,
-                a.pl_lg,
-                a.rounded_md,
-                t.atoms.bg_contrast_900,
+                a.flex_1,
+                t.atoms.text_inverted,
+                a.italic,
+                a.leading_snug,
               ]}>
-              <Text
-                style={[
-                  a.flex_1,
-                  t.atoms.text_inverted,
-                  a.italic,
-                  a.leading_snug,
-                ]}>
-                <Trans>Need to report a copyright violation?</Trans>
-              </Text>
-              <Link
-                to={DMCA_LINK}
-                label={_(msg`View details for reporting a copyright violation`)}
-                size="small"
-                variant="solid"
-                color="secondary">
-                <ButtonText>
-                  <Trans>View details</Trans>
-                </ButtonText>
-                <ButtonIcon position="right" icon={SquareArrowTopRight} />
-              </Link>
-            </View>
+              <Trans>Need to report a copyright violation?</Trans>
+            </Text>
+            <Link
+              to={DMCA_LINK}
+              label={_(msg`View details for reporting a copyright violation`)}
+              size="small"
+              variant="solid"
+              color="secondary">
+              <ButtonText>
+                <Trans>View details</Trans>
+              </ButtonText>
+              <ButtonIcon position="right" icon={SquareArrowTopRight} />
+            </Link>
           </View>
         )}
       </View>
@@ -153,14 +151,6 @@ function ReportOptionButton({
   const {hovered, pressed} = useButtonContext()
   const interacted = hovered || pressed
 
-  const styles = React.useMemo(() => {
-    return {
-      interacted: {
-        backgroundColor: t.palette.contrast_50,
-      },
-    }
-  }, [t])
-
   return (
     <View
       style={[
@@ -171,7 +161,8 @@ function ReportOptionButton({
         a.p_md,
         a.rounded_md,
         {paddingRight: 70},
-        interacted && styles.interacted,
+        t.atoms.bg_contrast_25,
+        interacted && t.atoms.bg_contrast_50,
       ]}>
       <View style={[a.flex_1, a.gap_xs]}>
         <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
@@ -188,12 +179,7 @@ function ReportOptionButton({
           a.pr_md,
           {left: 'auto'},
         ]}>
-        <ChevronRight
-          size="md"
-          fill={
-            hovered ? t.palette.primary_500 : t.atoms.text_contrast_low.color
-          }
-        />
+        <ChevronRight size="md" fill={t.atoms.text_contrast_low.color} />
       </View>
     </View>
   )

src/components/ReportDialog/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {Pressable, View} from 'react-native'
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {ReportOption} from '#/lib/moderation/useReportOptions'
 import {useMyLabelersQuery} from '#/state/queries/preferences'
@@ -31,6 +32,7 @@ export function ReportDialog(props: ReportDialogProps) {
 }
 
 function ReportDialogInner(props: ReportDialogProps) {
+  const {_} = useLingui()
   const {
     isLoading: isLabelerLoading,
     data: labelers,
@@ -44,7 +46,7 @@ function ReportDialogInner(props: ReportDialogProps) {
   })
 
   return (
-    <Dialog.ScrollableInner label="Report Dialog" ref={ref}>
+    <Dialog.ScrollableInner label={_(msg`Report dialog`)} ref={ref}>
       {isLoading ? (
         <View style={[a.align_center, {height: 100}]}>
           <Loader size="xl" />