Fix #600

src/components/Account.tsx

@@ -42,11 +42,11 @@ const ComponentAccount: React.FC<PropsWithChildren & Props> = ({ account, props,
               style={{
                 width: StyleConstants.Avatar.S,
                 height: StyleConstants.Avatar.S,
-                borderRadius: 6,
+                borderRadius: 8,
                 marginRight: StyleConstants.Spacing.S
               }}
             />
-            <View>
+            <View style={{ flex: 1 }}>
               <CustomText numberOfLines={1}>
                 <ParseEmojis
                   content={account.display_name || account.username}

src/components/Emojis/List.tsx

@@ -28,7 +28,7 @@ const EmojisList = () => {
   const { t } = useTranslation()
 
   const { emojisState, emojisDispatch } = useContext(EmojisContext)
-  const { colors, mode } = useTheme()
+  const { colors } = useTheme()
 
   const addEmoji = (shortcode: string) => {
     if (emojisState.targetIndex === -1) {
@@ -158,7 +158,6 @@ const EmojisList = () => {
           onChangeText={setSearch}
           autoCapitalize='none'
           clearButtonMode='always'
-          keyboardAppearance={mode}
           autoCorrect={false}
           spellCheck={false}
         />

src/components/Header/Right.tsx

@@ -18,6 +18,7 @@ export interface Props {
 
   loading?: boolean
   disabled?: boolean
+  destructive?: boolean
 
   onPress: () => void
 }
@@ -34,6 +35,7 @@ const HeaderRight: React.FC<Props> = ({
   background = false,
   loading,
   disabled,
+  destructive = false,
   onPress
 }) => {
   const { colors, theme } = useTheme()
@@ -41,10 +43,7 @@ const HeaderRight: React.FC<Props> = ({
   const loadingSpinkit = useMemo(
     () => (
       <View style={{ position: 'absolute' }}>
-        <Flow
-          size={StyleConstants.Font.Size.M * 1.25}
-          color={colors.secondary}
-        />
+        <Flow size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
       </View>
     ),
     [theme]
@@ -59,7 +58,7 @@ const HeaderRight: React.FC<Props> = ({
               name={content}
               style={{ opacity: loading ? 0 : 1 }}
               size={StyleConstants.Spacing.M * 1.25}
-              color={disabled ? colors.secondary : colors.primaryDefault}
+              color={disabled ? colors.secondary : destructive ? colors.red : colors.primaryDefault}
             />
             {loading && loadingSpinkit}
           </>
@@ -69,8 +68,13 @@ const HeaderRight: React.FC<Props> = ({
           <>
             <CustomText
               fontStyle='M'
+              fontWeight={destructive ? 'Bold' : 'Normal'}
               style={{
-                color: disabled ? colors.secondary : colors.primaryDefault,
+                color: disabled
+                  ? colors.secondary
+                  : destructive
+                  ? colors.red
+                  : colors.primaryDefault,
                 opacity: loading ? 0 : 1
               }}
               children={content}
@@ -94,14 +98,10 @@ const HeaderRight: React.FC<Props> = ({
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: background
-          ? colors.backgroundOverlayDefault
-          : undefined,
+        backgroundColor: background ? colors.backgroundOverlayDefault : undefined,
         minHeight: 44,
         minWidth: 44,
-        marginRight: native
-          ? -StyleConstants.Spacing.S
-          : StyleConstants.Spacing.S,
+        marginRight: native ? -StyleConstants.Spacing.S : StyleConstants.Spacing.S,
         ...(type === 'icon' && {
           borderRadius: 100
         }),

src/components/Input.tsx

@@ -85,7 +85,6 @@ const ComponentInput = forwardRef(
             multiline,
             numberOfLines: Platform.OS === 'android' ? 5 : undefined
           })}
-          keyboardAppearance={mode}
           textAlignVertical='top'
           {...props}
         />

src/components/Parse/Emojis.tsx

@@ -93,7 +93,7 @@ const ParseEmojis = React.memo(
       </CustomText>
     )
   },
-  (prev, next) => prev.content === next.content
+  (prev, next) => prev.content === next.content && prev.style?.color === next.style?.color
 )
 
 export default ParseEmojis

src/components/Selections.tsx

@@ -11,9 +11,15 @@ export interface Props {
   multiple?: boolean
   options: { selected: boolean; content: string }[]
   setOptions: React.Dispatch<React.SetStateAction<{ selected: boolean; content: string }[]>>
+  disabled?: boolean
 }
 
-const Selections: React.FC<Props> = ({ multiple = false, options, setOptions }) => {
+const Selections: React.FC<Props> = ({
+  multiple = false,
+  options,
+  setOptions,
+  disabled = false
+}) => {
   const { colors } = useTheme()
 
   const isSelected = (index: number): string =>
@@ -22,10 +28,11 @@ const Selections: React.FC<Props> = ({ multiple = false, options, setOptions })
       : `${multiple ? 'Square' : 'Circle'}`
 
   return (
-    <>
+    <View>
       {options.map((option, index) => (
         <Pressable
           key={index}
+          disabled={disabled}
           style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
           onPress={() => {
             if (multiple) {
@@ -56,15 +63,18 @@ const Selections: React.FC<Props> = ({ multiple = false, options, setOptions })
               }}
               name={isSelected(index)}
               size={StyleConstants.Font.Size.M}
-              color={colors.primaryDefault}
+              color={disabled ? colors.disabled : colors.primaryDefault}
             />
             <CustomText style={{ flex: 1 }}>
-              <ParseEmojis content={option.content} />
+              <ParseEmojis
+                content={option.content}
+                style={{ color: disabled ? colors.disabled : colors.primaryDefault }}
+              />
             </CustomText>
           </View>
         </Pressable>
       ))}
-    </>
+    </View>
   )
 }
 

src/components/Timeline/Shared/Content.tsx

@@ -5,8 +5,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, StyleSheet, View } from 'react-native'
-import { Path, Svg } from 'react-native-svg'
+import { Platform } from 'react-native'
 import { useSelector } from 'react-redux'
 import { isRtlLang } from 'rtl-detect'
 import StatusContext from './Context'
@@ -45,7 +44,14 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             }
           />
           {inThread ? (
-            <CustomText fontStyle='S' style={{ textAlign: 'center', color: colors.secondary, paddingVertical: StyleConstants.Spacing.XS }}>
+            <CustomText
+              fontStyle='S'
+              style={{
+                textAlign: 'center',
+                color: colors.secondary,
+                paddingVertical: StyleConstants.Spacing.XS
+              }}
+            >
               {t('shared.content.expandHint')}
             </CustomText>
           ) : null}

src/components/Timeline/Shared/HeaderAndroid.tsx

@@ -28,6 +28,7 @@ const TimelineHeaderAndroid: React.FC = () => {
     type: 'status',
     openChange,
     account: status.account,
+    ...(status && { status }),
     queryKey
   })
   const mStatus = menuStatus({ status, queryKey, rootQueryKey })

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -34,6 +34,7 @@ const TimelineHeaderDefault: React.FC = () => {
     type: 'status',
     openChange,
     account: status.account,
+    ...(status && { status }),
     queryKey
   })
   const mStatus = menuStatus({ status, queryKey, rootQueryKey })

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -42,6 +42,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
     type: 'status',
     openChange,
     account: status?.account,
+    ...(status && { status }),
     queryKey
   })
   const mStatus = menuStatus({ status, queryKey })

src/components/contextMenu/account.ts

@@ -24,12 +24,14 @@ const menuAccount = ({
   type,
   openChange,
   account,
+  status,
   queryKey,
   rootQueryKey
 }: {
   type: 'status' | 'account' // Where the action is coming from
   openChange: boolean
-  account?: Pick<Mastodon.Account, 'id' | 'username'>
+  account?: Mastodon.Account
+  status?: Mastodon.Status
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
 }): ContextMenu[][] => {
@@ -214,34 +216,7 @@ const menuAccount = ({
       {
         key: 'account-reports',
         item: {
-          onSelect: () =>
-            Alert.alert(
-              t('account.reports.alert.title', { username: account.username }),
-              undefined,
-              [
-                {
-                  text: t('common:buttons.confirm'),
-                  style: 'destructive',
-                  onPress: () => {
-                    timelineMutation.mutate({
-                      type: 'updateAccountProperty',
-                      queryKey,
-                      id: account.id,
-                      payload: { property: 'reports' }
-                    })
-                    timelineMutation.mutate({
-                      type: 'updateAccountProperty',
-                      queryKey,
-                      id: account.id,
-                      payload: { property: 'block', currentValue: false }
-                    })
-                  }
-                },
-                {
-                  text: t('common:buttons.cancel')
-                }
-              ]
-            ),
+          onSelect: () => navigation.navigate('Tab-Shared-Report', { account, status }),
           disabled: false,
           destructive: true,
           hidden: false