diff --git a/src/components/Timeline/Shared/Actions.tsx b/src/components/Timeline/Shared/Actions.tsx index a2da0ea1..992a349f 100644 --- a/src/components/Timeline/Shared/Actions.tsx +++ b/src/components/Timeline/Shared/Actions.tsx @@ -2,6 +2,7 @@ import Icon from '@components/Icon' import { displayMessage } from '@components/Message' import CustomText from '@components/Text' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { useNavigation } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' import { RootStackParamList } from '@utils/navigation/navigators' @@ -99,7 +100,8 @@ const TimelineActions: React.FC = () => { t('shared.actions.reblogged.options.unlisted'), t('common:buttons.cancel') ], - cancelButtonIndex: 2 + cancelButtonIndex: 2, + ...androidActionSheetStyles(colors) }, (selectedIndex: number) => { switch (selectedIndex) { diff --git a/src/helpers/androidActionSheetStyles.ts b/src/helpers/androidActionSheetStyles.ts new file mode 100644 index 00000000..de762bd5 --- /dev/null +++ b/src/helpers/androidActionSheetStyles.ts @@ -0,0 +1,5 @@ +export const androidActionSheetStyles = (colors: any) => ({ + containerStyle: { backgroundColor: colors.backgroundDefault }, + textStyle: { color: colors.primaryDefault }, + titleTextStyle: { color: colors.secondary } +}) diff --git a/src/screens/Compose/Root/Actions.tsx b/src/screens/Compose/Root/Actions.tsx index ed32fa5e..f872fd6e 100644 --- a/src/screens/Compose/Root/Actions.tsx +++ b/src/screens/Compose/Root/Actions.tsx @@ -2,6 +2,7 @@ import { emojis } from '@components/Emojis' import EmojisContext from '@components/Emojis/helpers/EmojisContext' import Icon from '@components/Icon' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice' import layoutAnimation from '@utils/styles/layoutAnimation' import { useTheme } from '@utils/styles/ThemeManager' @@ -16,7 +17,7 @@ const ComposeActions: React.FC = () => { const { showActionSheetWithOptions } = useActionSheet() const { composeState, composeDispatch } = useContext(ComposeContext) const { t } = useTranslation('screenCompose') - const { colors, mode } = useTheme() + const { colors } = useTheme() const instanceConfigurationStatusMaxAttachments = useSelector( getInstanceConfigurationStatusMaxAttachments, () => true @@ -89,7 +90,7 @@ const ComposeActions: React.FC = () => { t('common:buttons.cancel') ], cancelButtonIndex: 4, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, buttonIndex => { switch (buttonIndex) { diff --git a/src/screens/Compose/Root/Footer/Poll.tsx b/src/screens/Compose/Root/Footer/Poll.tsx index b2fbcca7..a5f13750 100644 --- a/src/screens/Compose/Root/Footer/Poll.tsx +++ b/src/screens/Compose/Root/Footer/Poll.tsx @@ -3,6 +3,7 @@ import Icon from '@components/Icon' import { MenuRow } from '@components/Menu' import CustomText from '@components/Text' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { getInstanceConfigurationPoll } from '@utils/slices/instancesSlice' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' @@ -23,13 +24,9 @@ const ComposePoll: React.FC = () => { const { t } = useTranslation('screenCompose') const { colors, mode } = useTheme() - const instanceConfigurationPoll = useSelector( - getInstanceConfigurationPoll, - () => true - ) + const instanceConfigurationPoll = useSelector(getInstanceConfigurationPoll, () => true) const MAX_OPTIONS = instanceConfigurationPoll.max_options - const MAX_CHARS_PER_OPTION = - instanceConfigurationPoll.max_characters_per_option + const MAX_CHARS_PER_OPTION = instanceConfigurationPoll.max_characters_per_option const MIN_EXPIRATION = instanceConfigurationPoll.min_expiration const MAX_EXPIRATION = instanceConfigurationPoll.max_expiration @@ -127,10 +124,9 @@ const ComposePoll: React.FC = () => { ) } : { - accessibilityHint: t( - 'content.root.footer.poll.quantity.reduce.accessibilityHint', - { amount: total } - ) + accessibilityHint: t('content.root.footer.poll.quantity.reduce.accessibilityHint', { + amount: total + }) })} onPress={() => { total > 2 && @@ -179,9 +175,7 @@ const ComposePoll: React.FC = () => { disabled={!(total < MAX_OPTIONS)} /> - + { t('common:buttons.cancel') ], cancelButtonIndex: 2, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, index => { if (index && index < 2) { @@ -226,19 +220,16 @@ const ComposePoll: React.FC = () => { '604800' ].filter( expiration => - parseInt(expiration) >= MIN_EXPIRATION && - parseInt(expiration) <= MAX_EXPIRATION + parseInt(expiration) >= MIN_EXPIRATION && parseInt(expiration) <= MAX_EXPIRATION ) showActionSheetWithOptions( { options: [ - ...expirations.map(e => - t(`content.root.footer.poll.expiration.options.${e}`) - ), + ...expirations.map(e => t(`content.root.footer.poll.expiration.options.${e}`)), t('common:buttons.cancel') ], cancelButtonIndex: expirations.length, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, index => { if (index !== undefined && index < expirations.length) { diff --git a/src/screens/ImagesViewer.tsx b/src/screens/ImagesViewer.tsx index e6fa4227..3746f499 100644 --- a/src/screens/ImagesViewer.tsx +++ b/src/screens/ImagesViewer.tsx @@ -1,6 +1,7 @@ import GracefullyImage from '@components/GracefullyImage' import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { RootStackScreenProps } from '@utils/navigation/navigators' import { useTheme } from '@utils/styles/ThemeManager' import React, { useCallback, useState } from 'react' @@ -39,7 +40,7 @@ const ScreenImagesViewer = ({ const insets = useSafeAreaInsets() - const { mode } = useTheme() + const { mode, colors } = useTheme() const { t } = useTranslation('screenImageViewer') const initialIndex = imageUrls.findIndex(image => image.id === id) @@ -55,7 +56,7 @@ const ScreenImagesViewer = ({ t('common:buttons.cancel') ], cancelButtonIndex: 2, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, async buttonIndex => { switch (buttonIndex) { @@ -181,7 +182,7 @@ const ScreenImagesViewer = ({ t('common:buttons.cancel') ], cancelButtonIndex: 2, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, async buttonIndex => { switch (buttonIndex) { diff --git a/src/screens/Tabs/Me/Profile/Root.tsx b/src/screens/Tabs/Me/Profile/Root.tsx index 9034ba4d..0e352083 100644 --- a/src/screens/Tabs/Me/Profile/Root.tsx +++ b/src/screens/Tabs/Me/Profile/Root.tsx @@ -1,5 +1,6 @@ import { MenuContainer, MenuRow } from '@components/Menu' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { useAppDispatch } from '@root/store' import { TabMeProfileStackScreenProps } from '@utils/navigation/navigators' import { useProfileMutation, useProfileQuery } from '@utils/queryHooks/profile' @@ -16,7 +17,7 @@ const TabMeProfileRoot: React.FC< messageRef: RefObject } > = ({ messageRef, navigation }) => { - const { mode } = useTheme() + const { colors } = useTheme() const { t } = useTranslation('screenTabs') const { showActionSheetWithOptions } = useActionSheet() @@ -93,7 +94,7 @@ const TabMeProfileRoot: React.FC< t('common:buttons.cancel') ], cancelButtonIndex: 3, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, async buttonIndex => { switch (buttonIndex) { diff --git a/src/screens/Tabs/Me/Settings/App.tsx b/src/screens/Tabs/Me/Settings/App.tsx index e927104c..4e1d047a 100644 --- a/src/screens/Tabs/Me/Settings/App.tsx +++ b/src/screens/Tabs/Me/Settings/App.tsx @@ -1,6 +1,7 @@ import haptics from '@components/haptics' import { MenuContainer, MenuRow } from '@components/Menu' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { useNavigation } from '@react-navigation/native' import { LOCALES } from '@root/i18n/locales' import { useAppDispatch } from '@root/store' @@ -15,6 +16,7 @@ import { getSettingsStaticEmoji, changeStaticEmoji } from '@utils/slices/settingsSlice' +import { useTheme } from '@utils/styles/ThemeManager' import * as Localization from 'expo-localization' import React from 'react' import { useTranslation } from 'react-i18next' @@ -26,6 +28,7 @@ const SettingsApp: React.FC = () => { const navigation = useNavigation() const dispatch = useAppDispatch() const { showActionSheetWithOptions } = useActionSheet() + const { colors } = useTheme() const { t, i18n } = useTranslation('screenTabs') const settingsFontsize = useSelector(getSettingsFontsize) @@ -71,7 +74,8 @@ const SettingsApp: React.FC = () => { t('me.settings.theme.options.dark'), t('common:buttons.cancel') ], - cancelButtonIndex: 3 + cancelButtonIndex: 3, + ...androidActionSheetStyles(colors) }, buttonIndex => { switch (buttonIndex) { @@ -105,7 +109,8 @@ const SettingsApp: React.FC = () => { t('me.settings.darkTheme.options.darker'), t('common:buttons.cancel') ], - cancelButtonIndex: 2 + cancelButtonIndex: 2, + ...androidActionSheetStyles(colors) }, buttonIndex => { switch (buttonIndex) { @@ -135,7 +140,8 @@ const SettingsApp: React.FC = () => { t('me.settings.browser.options.external'), t('common:buttons.cancel') ], - cancelButtonIndex: 2 + cancelButtonIndex: 2, + ...androidActionSheetStyles(colors) }, buttonIndex => { switch (buttonIndex) { diff --git a/src/screens/Tabs/Me/Settings/Dev.tsx b/src/screens/Tabs/Me/Settings/Dev.tsx index 35a50752..17d923ee 100644 --- a/src/screens/Tabs/Me/Settings/Dev.tsx +++ b/src/screens/Tabs/Me/Settings/Dev.tsx @@ -3,6 +3,7 @@ import { MenuContainer, MenuRow } from '@components/Menu' import { displayMessage } from '@components/Message' import CustomText from '@components/Text' import { useActionSheet } from '@expo/react-native-action-sheet' +import { androidActionSheetStyles } from '@helpers/androidActionSheetStyles' import { persistor } from '@root/store' import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice' import { StyleConstants } from '@utils/styles/constants' @@ -13,7 +14,7 @@ import { DevSettings } from 'react-native' import { useSelector } from 'react-redux' const SettingsDev: React.FC = () => { - const { colors, mode } = useTheme() + const { colors } = useTheme() const { showActionSheetWithOptions } = useActionSheet() const instanceActive = useSelector(getInstanceActive) const instances = useSelector(getInstances, () => true) @@ -58,7 +59,7 @@ const SettingsDev: React.FC = () => { }) .concat(['Cancel']), cancelButtonIndex: instances.length, - userInterfaceStyle: mode + ...androidActionSheetStyles(colors) }, () => {} )