Update success color for light mode (#351)

Update success color on light mode - it's a bit too bright

Headway on custom theme support

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/run-jest-test-suite.yml

@@ -19,8 +19,8 @@ jobs:
       - name: 💬 Echo package.json version to Github ENV
         run: echo VERSION_NUMBER=$(node -p -e "require('./package.json').version") >> $GITHUB_ENV
 
-      - name: 🍎 Run yarn init-ios:new-arch
-        run: yarn init-ios:new-arch
+      - name: 🤖 Run yarn init-android
+        run: yarn init-android
       
       - name: 🔍 Run yarn tsc
         run: yarn tsc

App.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import 'react-native-url-polyfill/auto'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import Jellify from './src/components/jellify'
-import { TamaguiProvider, Theme } from 'tamagui'
+import { TamaguiProvider, Theme, useTheme } from 'tamagui'
 import { useColorScheme } from 'react-native'
 import jellifyConfig from './tamagui.config'
 import { clientPersister } from './src/constants/storage'
@@ -19,10 +19,6 @@ import { requestStoragePermission } from './src/helpers/permisson-helpers'
 import ErrorBoundary from './src/components/ErrorBoundary'
 import Toast from 'react-native-toast-message'
 import JellifyToastConfig from './src/constants/toast.config'
-import { TelemetryDeckProvider, createTelemetryDeck } from '@typedigital/telemetrydeck-react'
-import telemetryDeckConfig from './telemetrydeck.json'
-import glitchtipConfig from './glitchtip.json'
-import * as Sentry from '@sentry/react-native'
 
 export const backgroundRuntime = createWorkletRuntime('background')
 
@@ -77,7 +73,6 @@ export default function App(): React.JSX.Element {
 							</TamaguiProvider>
 						</GestureHandlerRootView>
 					</PersistQueryClientProvider>
-					<Toast config={JellifyToastConfig(isDarkMode)} />
 				</NavigationContainer>
 			</ErrorBoundary>
 		</SafeAreaProvider>

package.json

@@ -40,7 +40,7 @@
     "@react-navigation/native-stack": "^7.3.12",
     "@react-navigation/stack": "^7.3.1",
     "@sentry/react-native": "^6.13.1",
-    "@tamagui/config": "^1.126.9",
+    "@tamagui/config": "^1.126.12",
     "@tanstack/query-sync-storage-persister": "^5.75.7",
     "@tanstack/react-query": "^5.75.7",
     "@tanstack/react-query-persist-client": "^5.75.7",
@@ -76,7 +76,7 @@
     "react-native-uuid": "^2.0.3",
     "react-native-vector-icons": "^10.2.0",
     "ruby": "^0.6.1",
-    "tamagui": "^1.126.9"
+    "tamagui": "^1.126.12"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",

src/components/Detail/component.tsx

@@ -3,7 +3,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { useSafeAreaFrame } from 'react-native-safe-area-context'
 import { StackParamList } from '../types'
 import TrackOptions from './helpers/TrackOptions'
-import { getToken, getTokens, ScrollView, Spacer, View, XStack, YStack } from 'tamagui'
+import { getToken, getTokens, ScrollView, Spacer, useTheme, View, XStack, YStack } from 'tamagui'
 import { Text } from '../Global/helpers/text'
 import FavoriteButton from '../Global/components/favorite-button'
 import { useEffect } from 'react'
@@ -34,7 +34,7 @@ export default function ItemDetail({
 		trigger('impactMedium')
 	}, [item])
 
-	const isDarkMode = useColorScheme() === 'dark'
+	const theme = useTheme()
 
 	switch (item.Type) {
 		case 'Audio': {
@@ -154,7 +154,7 @@ export default function ItemDetail({
 
 				{options ?? <View />}
 			</YStack>
-			<Toast config={JellifyToastConfig(isDarkMode)} />
+			<Toast config={JellifyToastConfig(theme)} />
 		</ScrollView>
 	)
 }

src/components/Global/helpers/switch-with-label.tsx

@@ -1,4 +1,4 @@
-import { SizeTokens, XStack, Separator, Switch, Theme, styled, getToken } from 'tamagui'
+import { SizeTokens, XStack, Separator, Switch, Theme, styled, getToken, useTheme } from 'tamagui'
 import { Label } from './text'
 import { useColorScheme } from 'react-native'
 
@@ -16,7 +16,7 @@ const JellifySliderThumb = styled(Switch.Thumb, {
 })
 
 export function SwitchWithLabel(props: SwitchWithLabelProps) {
-	const isDarkMode = useColorScheme() === 'dark'
+	const theme = useTheme()
 
 	const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
 	return (
@@ -26,12 +26,8 @@ export function SwitchWithLabel(props: SwitchWithLabelProps) {
 				size={props.size}
 				checked={props.checked}
 				onCheckedChange={(checked: boolean) => props.onCheckedChange(checked)}
-				backgroundColor={
-					props.checked ? getToken('$color.success') : getToken('$color.purpleGray')
-				}
-				borderColor={
-					isDarkMode ? getToken('$color.amethyst') : getToken('$color.purpleDark')
-				}
+				backgroundColor={props.checked ? '$success' : '$borderColor'}
+				borderColor={'$borderColor'}
 			>
 				<JellifySliderThumb animation='bouncy' />
 			</Switch>

src/components/Home/index.tsx

@@ -1,15 +1,16 @@
 import { StackParamList } from '../types'
 import { ScrollView, RefreshControl } from 'react-native'
-import { YStack, XStack, Separator, getToken } from 'tamagui'
+import { YStack, Separator, getToken } from 'tamagui'
 import RecentArtists from './helpers/recent-artists'
 import RecentlyPlayed from './helpers/recently-played'
 import { useHomeContext } from '../../providers/Home'
-import { H3, H4, H5 } from '../Global/helpers/text'
+import { H5 } from '../Global/helpers/text'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import FrequentArtists from './helpers/frequent-artists'
 import FrequentlyPlayedTracks from './helpers/frequent-tracks'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useJellifyContext } from '../../providers'
+
 export function ProvidedHome({
 	navigation,
 }: {
@@ -29,7 +30,7 @@ export function ProvidedHome({
 			removeClippedSubviews // Save memory usage
 		>
 			<YStack alignContent='flex-start'>
-				<H4 marginHorizontal={'$2'}>{`Hi, ${user?.name ?? ''}`}</H4>
+				<H5 marginHorizontal={'$2'}>{`Hi, ${user?.name ?? ''}`}</H5>
 
 				<Separator marginVertical={'$3'} />
 

src/components/Player/index.tsx

@@ -16,7 +16,6 @@ import { getImageApi } from '@jellyfin/sdk/lib/utils/api'
 import { useQueueContext } from '../../providers/Player/queue'
 import Toast from 'react-native-toast-message'
 import JellifyToastConfig from '../../constants/toast.config'
-import { useColorScheme } from 'react-native'
 import { useFocusEffect } from '@react-navigation/native'
 import { useJellifyContext } from '../../providers'
 import Footer from './helpers/footer'
@@ -29,8 +28,6 @@ export default function PlayerScreen({
 
 	const [showToast, setShowToast] = useState(true)
 
-	const isDarkMode = useColorScheme() === 'dark'
-
 	const { nowPlaying } = usePlayerContext()
 
 	const { queueRef } = useQueueContext()
@@ -206,7 +203,7 @@ export default function PlayerScreen({
 					</YStack>
 				</>
 			)}
-			{showToast && <Toast config={JellifyToastConfig(isDarkMode)} />}
+			{showToast && <Toast config={JellifyToastConfig(theme)} />}
 		</SafeAreaView>
 	)
 }

src/components/Settings/component.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
-import { useTheme } from 'tamagui'
+import { getToken, useTheme } from 'tamagui'
 import AccountTab from './components/account-tab'
 import Icon from '../Global/components/icon'
 import LabsTab from './components/labs-tab'
@@ -16,6 +16,10 @@ export default function Settings(): React.JSX.Element {
 	return (
 		<SettingsTabsNavigator.Navigator
 			screenOptions={{
+				tabBarScrollEnabled: true,
+				tabBarItemStyle: {
+					width: getToken('$13'),
+				},
 				tabBarShowIcon: true,
 				tabBarActiveTintColor: theme.primary.val,
 				tabBarInactiveTintColor: theme.borderColor.val,

src/components/Settings/components/labs-tab.tsx

@@ -11,7 +11,7 @@ export default function LabsTab(): React.JSX.Element {
 			settingsList={[
 				{
 					title: 'Nothing to see here...(yet)',
-					subTitle: 'Come back later to enable beta features',
+					subTitle: 'Come back later to enable experimental features',
 					iconName: 'test-tube-off',
 					iconColor: '$danger',
 				},

src/components/jellify.tsx

@@ -16,12 +16,16 @@ import {
 import telemetryDeckConfig from '../../telemetrydeck.json'
 import glitchtipConfig from '../../glitchtip.json'
 import * as Sentry from '@sentry/react-native'
-
+import { useTheme } from 'tamagui'
+import Toast from 'react-native-toast-message'
+import JellifyToastConfig from '../constants/toast.config'
 /**
  * The main component for the Jellify app. Children are wrapped in the {@link JellifyProvider}
  * @returns The {@link Jellify} component
  */
 export default function Jellify(): React.JSX.Element {
+	const theme = useTheme()
+
 	return (
 		<SettingsProvider>
 			<JellifyLoggingWrapper>
@@ -31,6 +35,7 @@ export default function Jellify(): React.JSX.Element {
 					</JellifyProvider>
 				</DisplayProvider>
 			</JellifyLoggingWrapper>
+			<Toast config={JellifyToastConfig(theme)} />
 		</SettingsProvider>
 	)
 }

src/constants/toast.config.ts

@@ -1,34 +1,34 @@
 import { BaseToast, BaseToastProps, ToastConfig } from 'react-native-toast-message'
-import { getToken } from 'tamagui'
+import { getToken, ThemeParsed } from 'tamagui'
 
 /**
  * Configures the toast for the Jellify app, using Tamagui style tokens
  * @param isDarkMode Whether the app is in dark mode, taken from the useColorScheme hook
  * @returns The {@link ToastConfig} for the Jellify app
  */
-const JellifyToastConfig: (isDarkMode: boolean) => ToastConfig = (isDarkMode: boolean) => ({
+const JellifyToastConfig: (theme: ThemeParsed) => ToastConfig = (theme: ThemeParsed) => ({
 	success: (props: BaseToastProps) =>
 		BaseToast({
 			...props,
 			style: {
-				borderLeftColor: getToken('$color.success'),
-				backgroundColor: isDarkMode ? getToken('$color.purple') : getToken('$color.white'),
+				borderLeftColor: theme.success.val,
+				backgroundColor: theme.background.val,
 			},
 			text1Style: {
 				fontFamily: 'Aileron-Bold',
-				color: isDarkMode ? getToken('$color.white') : getToken('$color.purpleDark'),
+				color: theme.color.val,
 			},
 		}),
 	error: (props: BaseToastProps) =>
 		BaseToast({
 			...props,
 			style: {
-				borderLeftColor: getToken('$color.danger'),
-				backgroundColor: isDarkMode ? getToken('$color.purple') : getToken('$color.white'),
+				borderLeftColor: theme.danger.val,
+				backgroundColor: theme.background.val,
 			},
 			text1Style: {
 				fontFamily: 'Aileron-Bold',
-				color: isDarkMode ? getToken('$color.white') : getToken('$color.purpleDark'),
+				color: theme.color.val,
 			},
 		}),
 })

tamagui.config.ts

@@ -7,7 +7,8 @@ const tokens = createTokens({
 	color: {
 		danger: '#ff9966',
 		purpleDark: '#0C0622',
-		success: '#99ffcc',
+		success: '#00bb5e',
+		successDark: '#99ffcc',
 		purple: '#100538',
 		purpleGray: '#66617B',
 		amethyst: '#7E72AF',
@@ -37,7 +38,7 @@ const jellifyConfig = createTamagui({
 			backgroundHover: tokens.color.purpleGray,
 			borderColor: tokens.color.amethyst,
 			color: tokens.color.white,
-			success: tokens.color.success,
+			success: tokens.color.successDark,
 			primary: tokens.color.telemagenta,
 			danger: tokens.color.danger,
 		},
@@ -45,7 +46,7 @@ const jellifyConfig = createTamagui({
 			color: tokens.color.purpleDark,
 			borderColor: tokens.color.amethyst,
 			background: tokens.color.amethyst,
-			success: tokens.color.success,
+			success: tokens.color.successDark,
 			primary: tokens.color.telemagenta,
 			danger: tokens.color.danger,
 		},