From 82b4223939f215a5799ba27ef029cbfa2637044c Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Mon, 12 Feb 2024 00:01:09 +0100 Subject: [PATCH] feat: introduce high contrast mode for ios fixes #194 --- ios/Podfile.lock | 8 +++ package-lock.json | 13 +++++ package.json | 1 + src/CONSTANTS.ts | 3 +- src/components/AlphabetScroller.tsx | 9 ++- src/components/Button.tsx | 11 ++-- src/components/Colors.tsx | 54 ++++++++++++++---- src/components/DownloadIcon.tsx | 13 +++-- src/components/ListButton.tsx | 12 ++-- src/components/Progresstrack.tsx | 2 - src/screens/Downloads/index.tsx | 5 +- src/screens/Music/index.tsx | 3 +- .../Music/overlays/NowPlaying/index.tsx | 12 ++-- src/screens/Music/stacks/Artists.tsx | 6 +- .../Music/stacks/components/TrackListView.tsx | 55 ++++++++++++------- src/screens/Search/index.tsx | 3 +- .../Search/components/SelectableFilter.tsx | 8 +-- src/screens/Settings/components/Radio.tsx | 5 +- src/screens/Settings/index.tsx | 3 +- src/screens/Settings/stacks/Sentry.tsx | 5 -- src/screens/index.tsx | 6 +- .../modals/Player/components/Casting.ios.tsx | 10 ++-- .../Player/components/ConnectionNotice.tsx | 5 +- .../modals/Player/components/ProgressBar.tsx | 22 ++++++-- .../modals/Player/components/Queue.tsx | 13 ++--- .../modals/Player/components/Timer.tsx | 5 +- .../modals/SetJellyfinServer/index.tsx | 3 +- src/utility/JellyfinApi.ts | 1 - 28 files changed, 187 insertions(+), 109 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 979f68b..a33fb93 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -958,6 +958,10 @@ PODS: - React-Mapbuffer (0.73.4): - glog - React-debug + - react-native-accessibility-settings (0.1.2): + - glog + - RCT-Folly (= 2022.05.16.00) + - React-Core - react-native-blur (4.4.0): - glog - RCT-Folly (= 2022.05.16.00) @@ -1246,6 +1250,7 @@ DEPENDENCIES: - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) + - react-native-accessibility-settings (from `../node_modules/react-native-accessibility-settings`) - "react-native-blur (from `../node_modules/@react-native-community/blur`)" - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) @@ -1364,6 +1369,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/logger" React-Mapbuffer: :path: "../node_modules/react-native/ReactCommon" + react-native-accessibility-settings: + :path: "../node_modules/react-native-accessibility-settings" react-native-blur: :path: "../node_modules/@react-native-community/blur" react-native-netinfo: @@ -1481,6 +1488,7 @@ SPEC CHECKSUMS: React-jsinspector: 9ac353eccf6ab54d1e0a33862ba91221d1e88460 React-logger: 0a57b68dd2aec7ff738195f081f0520724b35dab React-Mapbuffer: 63913773ed7f96b814a2521e13e6d010282096ad + react-native-accessibility-settings: 9e1c5c6e8268015f8447faa7d34a5834fbaf4d8c react-native-blur: 27113acc008facbc8accae5fb3a78b8424f64cfd react-native-netinfo: 8a7fd3f7130ef4ad2fb4276d5c9f8d3f28d2df3d react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b diff --git a/package-lock.json b/package-lock.json index e968b26..e76b38b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react": "^18.2.0", "react-airplay": "^1.2.0", "react-native": "^0.73.4", + "react-native-accessibility-settings": "^0.1.2", "react-native-collapsible": "^1.6.1", "react-native-dotenv": "^3.4.9", "react-native-fast-image": "^8.6.3", @@ -9452,6 +9453,18 @@ "react": "18.2.0" } }, + "node_modules/react-native-accessibility-settings": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/react-native-accessibility-settings/-/react-native-accessibility-settings-0.1.2.tgz", + "integrity": "sha512-TYk5zZ0Un10eXQgJHn+GL5g/uVD1k8lFJPQZRnOxJcuqh6afA9mluVCF+OzvYJerwsJC2tDVzOXyrGM0/QrXsA==", + "engines": { + "node": ">= 16.0.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-collapsible": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.6.1.tgz", diff --git a/package.json b/package.json index d6a2f61..4794d38 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "react": "^18.2.0", "react-airplay": "^1.2.0", "react-native": "^0.73.4", + "react-native-accessibility-settings": "^0.1.2", "react-native-collapsible": "^1.6.1", "react-native-dotenv": "^3.4.9", "react-native-fast-image": "^8.6.3", diff --git a/src/CONSTANTS.ts b/src/CONSTANTS.ts index 05637da..08a283a 100644 --- a/src/CONSTANTS.ts +++ b/src/CONSTANTS.ts @@ -1,4 +1,3 @@ export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7; export const PLAYLIST_CACHE_AMOUNT_OF_DAYS = 7; -export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ '; -export const THEME_COLOR = '#FF3C00'; \ No newline at end of file +export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ '; \ No newline at end of file diff --git a/src/components/AlphabetScroller.tsx b/src/components/AlphabetScroller.tsx index 9ae1077..a84e18f 100644 --- a/src/components/AlphabetScroller.tsx +++ b/src/components/AlphabetScroller.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState } from 'react'; import styled from 'styled-components/native'; -import { ALPHABET_LETTERS, THEME_COLOR } from '@/CONSTANTS'; +import { ALPHABET_LETTERS } from '@/CONSTANTS'; import { View, LayoutChangeEvent } from 'react-native'; import { PanGestureHandler, @@ -8,6 +8,7 @@ import { TapGestureHandler, TapGestureHandlerGestureEvent } from 'react-native-gesture-handler'; +import useDefaultStyles from './Colors'; // interface LetterContainerProps { // onPress: (letter: string) => void; @@ -29,7 +30,6 @@ const Letter = styled.Text` text-align: center; padding: 1px 0; font-size: 12px; - color: ${THEME_COLOR}; `; interface Props { @@ -41,6 +41,7 @@ interface Props { * screen with all letters of the Alphabet. */ const AlphabetScroller: React.FC = ({ onSelect }) => { + const styles = useDefaultStyles(); const [ height, setHeight ] = useState(0); const [ index, setIndex ] = useState(); @@ -69,7 +70,9 @@ const AlphabetScroller: React.FC = ({ onSelect }) => { key={l} onLayout={i === 0 ? handleLayout : undefined} > - {l} + + {l} + ))} diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 0f2e5bf..b7837f1 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -3,7 +3,6 @@ import { SvgProps } from 'react-native-svg'; import { PressableProps, ViewProps, View, } from 'react-native'; -import { THEME_COLOR } from '@/CONSTANTS'; import styled, { css } from 'styled-components/native'; import useDefaultStyles from './Colors'; @@ -35,7 +34,6 @@ const BaseButton = styled.Pressable<{ size: ButtonSize }>` `; const ButtonText = styled.Text<{ active?: boolean, size: ButtonSize }>` - color: ${THEME_COLOR}; font-weight: 500; font-size: 14px; flex-shrink: 1; @@ -72,16 +70,17 @@ const Button = React.forwardRef(function Button(props, ref) { } {title ? ( {title} diff --git a/src/components/Colors.tsx b/src/components/Colors.tsx index 16ac102..a8dba94 100644 --- a/src/components/Colors.tsx +++ b/src/components/Colors.tsx @@ -1,10 +1,10 @@ import { BlurView, BlurViewProps } from '@react-native-community/blur'; -import { THEME_COLOR } from '@/CONSTANTS'; import React, { PropsWithChildren } from 'react'; import { useContext } from 'react'; import { ColorSchemeName, Platform, StyleSheet, View, useColorScheme } from 'react-native'; import { useTypedSelector } from '@/store'; import { ColorScheme } from '@/store/settings/types'; +import { useAccessibilitySetting } from 'react-native-accessibility-settings'; const majorPlatformVersion = typeof Platform.Version === 'string' ? parseInt(Platform.Version, 10) : Platform.Version; @@ -12,7 +12,7 @@ const majorPlatformVersion = typeof Platform.Version === 'string' ? parseInt(Pla * Function for generating both the dark and light stylesheets, so that they * don't have to be generate on every individual component render */ -function generateStyles(scheme: ColorSchemeName) { +function generateStyles(scheme: ColorSchemeName, highContrast: boolean) { return StyleSheet.create({ text: { color: scheme === 'dark' ? '#fff' : '#000', @@ -20,12 +20,15 @@ function generateStyles(scheme: ColorSchemeName) { fontFamily: 'Inter', }, textHalfOpacity: { - color: scheme === 'dark' ? '#ffffff88' : '#00000088', + color: highContrast + ? (scheme === 'dark' ? '#ffffffbb' : '#000000bb') + : (scheme === 'dark' ? '#ffffff88' : '#00000088'), fontSize: 14, - // fontFamily: 'Inter', }, textQuarterOpacity: { - color: scheme === 'dark' ? '#ffffff44' : '#00000044', + color: highContrast + ? (scheme === 'dark' ? '#ffffff88' : '#00000088') + : (scheme === 'dark' ? '#ffffff44' : '#00000044'), fontSize: 14, }, view: { @@ -35,7 +38,9 @@ function generateStyles(scheme: ColorSchemeName) { borderColor: scheme === 'dark' ? '#262626' : '#ddd', }, activeBackground: { - backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '26' : '16'}`, + backgroundColor: highContrast + ? `#8b513c${scheme === 'dark' ? '26' : '10'}` + : `#FF3C00${scheme === 'dark' ? '26' : '16'}`, }, imageBackground: { backgroundColor: scheme === 'dark' ? '#191919' : '#eee', @@ -49,7 +54,9 @@ function generateStyles(scheme: ColorSchemeName) { backgroundColor: scheme === 'dark' ? '#000' : '#fff', }, button: { - backgroundColor: scheme === 'dark' ? '#ffffff09' : '#00000009', + backgroundColor: highContrast + ? (scheme === 'dark' ? '#ffffff0f' : '#0000000f') + : (scheme === 'dark' ? '#ffffff09' : '#00000009'), }, input: { backgroundColor: scheme === 'dark' ? '#191919' : '#f3f3f3', @@ -67,13 +74,35 @@ function generateStyles(scheme: ColorSchemeName) { filter: { backgroundColor: scheme === 'dark' ? '#191919' : '#f3f3f3', }, + themeColor: { + color: highContrast + ? scheme === 'dark' ? '#FF7A1C' : '#c93400' + : '#FF3C00', + }, + themeColorHalfOpacity: { + color: highContrast + ? scheme === 'dark' ? '#FF7A1Cbb' : '#c93400bb' + : '#FF3C0088', + }, + themeColorQuarterOpacity: { + color: highContrast + ? scheme === 'dark' ? '#FF7A1C88' : '#c9340088' + : '#FF3C0044', + }, + themeBackground: { + backgroundColor: highContrast + ? scheme === 'dark' ? '#FF7A1C' : '#c93400' + : '#FF3C00', + } }); } // Prerender both stylesheets -export const themes: Record<'dark' | 'light', ReturnType> = { - 'dark': generateStyles('dark'), - 'light': generateStyles('light'), +export const themes: Record<'dark' | 'light' | 'dark-highcontrast' | 'light-highcontrast', ReturnType> = { + 'dark': generateStyles('dark', false), + 'light': generateStyles('light', false), + 'dark-highcontrast': generateStyles('dark', true), + 'light-highcontrast': generateStyles('light', true), }; // Create context for supplying the theming information @@ -84,9 +113,12 @@ export const ColorSchemeContext = React.createContext(themes.dark); */ export function ColorSchemeProvider({ children }: PropsWithChildren<{}>) { const systemScheme = useColorScheme(); + const highContrast = useAccessibilitySetting('darkerSystemColors'); const userScheme = useTypedSelector((state) => state.settings.colorScheme); const scheme = userScheme === ColorScheme.System ? systemScheme : userScheme; - const theme = themes[scheme || 'light']; + const theme = highContrast + ? themes[`${scheme || 'light'}-highcontrast`] + : themes[scheme || 'light']; return ( diff --git a/src/components/DownloadIcon.tsx b/src/components/DownloadIcon.tsx index ed5c8f1..373a20c 100644 --- a/src/components/DownloadIcon.tsx +++ b/src/components/DownloadIcon.tsx @@ -6,13 +6,14 @@ import CloudExclamationMarkIcon from '@/assets/icons/cloud-exclamation-mark.svg' import InternalDriveIcon from '@/assets/icons/internal-drive.svg'; import useDefaultStyles from './Colors'; import Svg, { Circle, CircleProps } from 'react-native-svg'; -import { Animated, Easing } from 'react-native'; +import { Animated, Easing, ViewProps } from 'react-native'; import styled from 'styled-components/native'; interface DownloadIconProps { trackId: string; size?: number; fill?: string; + style?: ViewProps['style']; } const DownloadContainer = styled.View` @@ -26,7 +27,7 @@ const IconOverlay = styled.View` transform: scale(0.5); `; -function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) { +function DownloadIcon({ trackId, size = 16, fill, style }: DownloadIconProps) { // determine styles const defaultStyles = useDefaultStyles(); const iconFill = fill || defaultStyles.textQuarterOpacity.color; @@ -66,19 +67,19 @@ function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) { if (!entity && !isQueued) { return ( - + ); } if (entity?.isComplete) { return ( - + ); } if (entity?.isFailed) { return ( - + ); } @@ -100,7 +101,7 @@ function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) { /> - + ); diff --git a/src/components/ListButton.tsx b/src/components/ListButton.tsx index 5abfc19..87fa25e 100644 --- a/src/components/ListButton.tsx +++ b/src/components/ListButton.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useState } from 'react'; import { TouchableOpacityProps } from 'react-native'; import ChevronRight from '@/assets/icons/chevron-right.svg'; import styled from 'styled-components/native'; -import { THEME_COLOR } from '@/CONSTANTS'; import useDefaultStyles from './Colors'; const BUTTON_SIZE = 14; @@ -17,7 +16,6 @@ const Container = styled.Pressable<{ active?: boolean }>` `; const Label = styled.Text<{ active?: boolean }>` - color: ${THEME_COLOR}; font-size: 16px; `; @@ -37,8 +35,14 @@ const ListButton: React.FC = ({ children, ...props }) => isPressed ? defaultStyles.activeBackground : undefined ]} > - - + + ); }; diff --git a/src/components/Progresstrack.tsx b/src/components/Progresstrack.tsx index 8b343e4..090f1e5 100644 --- a/src/components/Progresstrack.tsx +++ b/src/components/Progresstrack.tsx @@ -1,4 +1,3 @@ -import { THEME_COLOR } from '@/CONSTANTS'; import styled from 'styled-components/native'; import Animated from 'react-native-reanimated'; @@ -51,7 +50,6 @@ const ProgressTrack = styled(Animated.View)` left: 0; right: 0; height: ${(props) => props.stroke ? props.stroke + 'px' : '100%'}; - background-color: ${THEME_COLOR}; opacity: ${(props) => props.opacity || 1}; border-radius: 99px; `; diff --git a/src/screens/Downloads/index.tsx b/src/screens/Downloads/index.tsx index 545297a..6b5118b 100644 --- a/src/screens/Downloads/index.tsx +++ b/src/screens/Downloads/index.tsx @@ -15,7 +15,6 @@ import FastImage from 'react-native-fast-image'; import { useGetImage } from '@/utility/JellyfinApi'; import { ShadowWrapper } from '@/components/Shadow'; import { SafeFlatList } from '@/components/SafeNavigatorView'; -import { THEME_COLOR } from '@/CONSTANTS'; import { t } from '@/localisation'; const DownloadedTrack = styled.View` @@ -165,7 +164,9 @@ function Downloads() { {entities[item]?.error && ( - {entities[item]?.error} + + {entities[item]?.error} + )} diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx index ef6ffaf..ba6ce35 100644 --- a/src/screens/Music/index.tsx +++ b/src/screens/Music/index.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { StyleSheet } from 'react-native'; import { createStackNavigator } from '@react-navigation/stack'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; -import { THEME_COLOR } from '@/CONSTANTS'; import { t } from '@/localisation'; import useDefaultStyles, { ColoredBlurView } from '@/components/Colors'; import { StackParams } from '@/screens/types'; @@ -24,7 +23,7 @@ function MusicStack() { return ( props.stroke ? props.stroke + 'px' : '100%'}; - background-color: ${THEME_COLOR}; opacity: ${(props) => props.opacity || 1}; border-radius: 99px; `; @@ -191,12 +189,18 @@ function NowPlaying({ offset = 0 }: { offset?: number }) { diff --git a/src/screens/Music/stacks/Artists.tsx b/src/screens/Music/stacks/Artists.tsx index b2da955..7b4573c 100644 --- a/src/screens/Music/stacks/Artists.tsx +++ b/src/screens/Music/stacks/Artists.tsx @@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native'; import { differenceInDays } from 'date-fns'; import { useAppDispatch, useTypedSelector } from '@/store'; import { fetchAllAlbums } from '@/store/music/actions'; -import { ALBUM_CACHE_AMOUNT_OF_DAYS, THEME_COLOR } from '@/CONSTANTS'; +import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '@/CONSTANTS'; import AlbumImage from './components/AlbumImage'; import { SectionArtistItem, SectionedArtist, selectArtists } from '@/store/music/selectors'; import AlphabetScroller from '@/components/AlphabetScroller'; @@ -92,7 +92,7 @@ const GeneratedArtistItem = React.memo(function GeneratedArtistItem(props: Gener numberOfLines={1} style={[ defaultStyles.text, - pressed && { color: THEME_COLOR }, + pressed && defaultStyles.themeColor, { flexShrink: 1 } ]} @@ -201,7 +201,7 @@ const Artists: React.FC = () => { onRefresh={retrieveData} getItemLayout={(_, i) => { if (!(i in itemLayouts)) { - console.log('COuLD NOT FIND LAYOUT ITEM', i, _); + // console.log('COuLD NOT FIND LAYOUT ITEM', i, _); } return itemLayouts[i] ?? { length: 0, offset: 0, index: i }; }} diff --git a/src/screens/Music/stacks/components/TrackListView.tsx b/src/screens/Music/stacks/components/TrackListView.tsx index 6301ea7..a9e5363 100644 --- a/src/screens/Music/stacks/components/TrackListView.tsx +++ b/src/screens/Music/stacks/components/TrackListView.tsx @@ -4,7 +4,6 @@ import { useGetImage } from '@/utility/JellyfinApi'; import styled, { css } from 'styled-components/native'; import { useNavigation } from '@react-navigation/native'; import { useAppDispatch, useTypedSelector } from '@/store'; -import { THEME_COLOR } from '@/CONSTANTS'; import TouchableHandler from '@/components/TouchableHandler'; import useCurrentTrack from '@/utility/useCurrentTrack'; import TrackPlayer from 'react-native-track-player'; @@ -32,7 +31,6 @@ const styles = StyleSheet.create({ marginRight: 12 }, activeText: { - color: THEME_COLOR, fontWeight: '500', }, }); @@ -153,13 +151,17 @@ const TrackListView: React.FC = ({ > @@ -169,23 +171,29 @@ const TrackListView: React.FC = ({ {tracks[trackId]?.Name} {itemDisplayStyle === 'playlist' && ( {tracks[trackId]?.Artists.join(', ')} @@ -195,19 +203,26 @@ const TrackListView: React.FC = ({ {ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)} - + )} - {t('total-duration')}{': '}{ticksToDuration(totalDuration)} + + {t('total-duration')}{': '}{ticksToDuration(totalDuration)} + ` ${(props) => props.active && css` opacity: 1; font-weight: 500; - color: ${THEME_COLOR}; `} `; @@ -46,8 +44,10 @@ function SelectableFilter({ active={active} onPress={onPress} > - - + + ); } diff --git a/src/screens/Settings/components/Radio.tsx b/src/screens/Settings/components/Radio.tsx index eb6cc57..729fc9b 100644 --- a/src/screens/Settings/components/Radio.tsx +++ b/src/screens/Settings/components/Radio.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components/native'; import CheckmarkIcon from '@/assets/icons/checkmark.svg'; import { Text } from '@/components/Typography'; import useDefaultStyles from '@/components/Colors'; -import { THEME_COLOR } from '@/CONSTANTS'; import { Gap } from '@/components/Utility'; import { View } from 'react-native'; @@ -52,9 +51,9 @@ export function RadioItem({ } ]} > - {checked ? : } + {checked ? : } - {label} + {label} ); diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx index aeb2e77..d07434b 100644 --- a/src/screens/Settings/index.tsx +++ b/src/screens/Settings/index.tsx @@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native'; import { t } from '@/localisation'; import { createStackNavigator } from '@react-navigation/stack'; import { useNavigation } from '@react-navigation/native'; -import { THEME_COLOR } from '@/CONSTANTS'; import ListButton from '@/components/ListButton'; import useDefaultStyles, { ColoredBlurView } from '@/components/Colors'; @@ -45,7 +44,7 @@ export default function Settings() { return ( , diff --git a/src/screens/Settings/stacks/Sentry.tsx b/src/screens/Settings/stacks/Sentry.tsx index b9d3355..944cfb6 100644 --- a/src/screens/Settings/stacks/Sentry.tsx +++ b/src/screens/Settings/stacks/Sentry.tsx @@ -6,7 +6,6 @@ import styled, { css } from 'styled-components/native'; import { isSentryEnabled, setSentryStatus } from '@/utility/Sentry'; import Accordion from 'react-native-collapsible/Accordion'; import ChevronIcon from '@/assets/icons/chevron-right.svg'; -import { THEME_COLOR } from '@/CONSTANTS'; import useDefaultStyles, { DefaultStylesProvider } from '@/components/Colors'; import { t } from '@/localisation'; import { SafeScrollView } from '@/components/SafeNavigatorView'; @@ -29,10 +28,6 @@ const HeaderContainer = styled.View<{ isActive?: boolean }>` padding: 16px 24px; border-radius: 8px; overflow: hidden; - - ${props => props.isActive && css` - background-color: ${THEME_COLOR}; - `} `; const HeaderText = styled(Text)` diff --git a/src/screens/index.tsx b/src/screens/index.tsx index ff508cd..fb189d1 100644 --- a/src/screens/index.tsx +++ b/src/screens/index.tsx @@ -3,7 +3,6 @@ import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-naviga import { StackNavigationProp } from '@react-navigation/stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { CompositeNavigationProp } from '@react-navigation/native'; -import { THEME_COLOR } from '@/CONSTANTS'; import SearchStack from './Search'; import Music from './Music'; @@ -23,7 +22,7 @@ import ErrorReportingAlert from '@/utility/ErrorReportingAlert'; import ErrorReportingPopup from './modals/ErrorReportingPopup'; import Player from './modals/Player'; import { StyleSheet } from 'react-native'; -import { ColoredBlurView } from '@/components/Colors'; +import useDefaultStyles, { ColoredBlurView } from '@/components/Colors'; import { StackParams } from './types'; const Stack = createNativeStackNavigator(); @@ -35,6 +34,7 @@ type Screens = { } function Screens() { + const styles = useDefaultStyles(); const isOnboardingComplete = useTypedSelector(state => state.settings.isOnboardingComplete); // GUARD: If onboarding has not been completed, we instead render the @@ -62,7 +62,7 @@ function Screens() { return null; } }, - tabBarActiveTintColor: THEME_COLOR, + tabBarActiveTintColor: styles.themeColor.color, tabBarInactiveTintColor: 'gray', headerShown: false, tabBarShowLabel: false, diff --git a/src/screens/modals/Player/components/Casting.ios.tsx b/src/screens/modals/Player/components/Casting.ios.tsx index c4fb774..d08b5bf 100644 --- a/src/screens/modals/Player/components/Casting.ios.tsx +++ b/src/screens/modals/Player/components/Casting.ios.tsx @@ -1,5 +1,4 @@ import { Text } from '@/components/Typography'; -import { THEME_COLOR } from '@/CONSTANTS'; import React, { useCallback } from 'react'; import { showRoutePicker, useAirplayRoutes } from 'react-airplay'; import { TouchableOpacity } from 'react-native'; @@ -27,7 +26,6 @@ const Label = styled(Text)<{ active?: boolean }>` font-size: 13px; ${(props) => props.active && css` - color: ${THEME_COLOR}; opacity: 1; `} `; @@ -43,9 +41,13 @@ function Casting() { 0 ? THEME_COLOR : defaultStyles.textHalfOpacity.color} + fill={routes.length > 0 ? defaultStyles.themeColor.color : defaultStyles.textHalfOpacity.color} /> -