Fix report dialog buttons on Android by adjusting styles

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,7 +102,6 @@ export function SelectReportOptionView({
         })}
 
         {(props.params.type === 'post' || props.params.type === 'account') && (
-          <View style={[a.pt_md, a.px_md]}>
           <View
             style={[
               a.flex_row,
@@ -135,7 +134,6 @@ export function SelectReportOptionView({
               <ButtonIcon position="right" icon={SquareArrowTopRight} />
             </Link>
           </View>
-          </View>
         )}
       </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 {View, Pressable} from 'react-native'
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {useMyLabelersQuery} from '#/state/queries/preferences'
 import {ReportOption} from '#/lib/moderation/useReportOptions'
@@ -29,6 +30,7 @@ export function ReportDialog(props: ReportDialogProps) {
 }
 
 function ReportDialogInner(props: ReportDialogProps) {
+  const {_} = useLingui()
   const {
     isLoading: isLabelerLoading,
     data: labelers,
@@ -38,7 +40,7 @@ function ReportDialogInner(props: ReportDialogProps) {
 
   return (
     <Dialog.ScrollableInner
-      label="Report Dialog"
+      label={_(msg`Report dialog`)}
       keyboardDismissMode="interactive">
       {isLoading ? (
         <View style={[a.align_center, {height: 100}]}>