Chores #15: Centralized colors and fonts constants for later theme im…

…plication
algocry · Oct 16, 2024 · 8051262 · 8051262
1 parent 5bd7e9f
commit 8051262
Show file tree

Hide file tree

Showing 31 changed files with 224 additions and 131 deletions.
diff --git a/src/App.js b/src/App.js
@@ -14,6 +14,7 @@ import Constants from "./constants/constants";
 import FloatingPlayerScreen from "./screens/FloatingPlayerScreen/FloatingPlayerScreen";
 import autoUpdateFetch from "./utils/autoUpdateFetch";
 import loadFonts from "./utils/fontLoader";
+import { ThemeProvider } from "./contexts/ThemeContext";
 
 const Stack = createStackNavigator();
 const constants = new Constants();
@@ -54,36 +55,38 @@ export default function App() {
 	}, [playerInitialized]);
 
 	return fontsLoaded && (
-		<PlayerProvider>
-			<StatusBar backgroundColor={"transparent"} translucent />
-			<NavigationContainer>
-				<Stack.Navigator
-					screenOptions={{ headerShown: false }}
-					initialRouteName={constants.screenRoutes.DASHBOARDSCREEN}
-				>
-					<Stack.Screen
-						name={constants.screenRoutes.PLAYERSCREEN}
-						component={PlayerScreen}
-					/>
-					<Stack.Screen
-						name={constants.screenRoutes.ALBUMSCREEN}
-						component={AlbumsScreen}
-					/>
-					<Stack.Screen
-						name={constants.screenRoutes.SEARCHSCREEN}
-						component={SearchScreen}
-					/>
-					<Stack.Screen
-						name={constants.screenRoutes.DASHBOARDSCREEN}
-						component={DashboardScreen}
-					/>
-					<Stack.Screen
-						name={constants.screenRoutes.ALBUMVIEWERSCREEN}
-						component={AlbumViewerScreen}
-					/>
-				</Stack.Navigator>
-				<FloatingPlayerScreen playerInitialized={playerInitialized} />
-			</NavigationContainer>
-		</PlayerProvider>
+		<ThemeProvider>
+			<PlayerProvider>
+				<StatusBar backgroundColor={"transparent"} translucent />
+				<NavigationContainer>
+					<Stack.Navigator
+						screenOptions={{ headerShown: false }}
+						initialRouteName={constants.screenRoutes.DASHBOARDSCREEN}
+					>
+						<Stack.Screen
+							name={constants.screenRoutes.PLAYERSCREEN}
+							component={PlayerScreen}
+						/>
+						<Stack.Screen
+							name={constants.screenRoutes.ALBUMSCREEN}
+							component={AlbumsScreen}
+						/>
+						<Stack.Screen
+							name={constants.screenRoutes.SEARCHSCREEN}
+							component={SearchScreen}
+						/>
+						<Stack.Screen
+							name={constants.screenRoutes.DASHBOARDSCREEN}
+							component={DashboardScreen}
+						/>
+						<Stack.Screen
+							name={constants.screenRoutes.ALBUMVIEWERSCREEN}
+							component={AlbumViewerScreen}
+						/>
+					</Stack.Navigator>
+					<FloatingPlayerScreen playerInitialized={playerInitialized} />
+				</NavigationContainer>
+			</PlayerProvider>
+		</ThemeProvider>
 	);
 }
diff --git a/src/constants/colors.js b/src/constants/colors.js
@@ -0,0 +1,26 @@
+export const colors = {
+    primaryColor: "#000000",
+    secondaryColor: "#ffffff",
+    tertiaryColor: "#666666",
+    quartiaryColor: "#333333",
+    primaryBackgroundColor: "#e7e9eb",
+    secondaryBackgroundColor: "#f5f5f5",
+    albumPlayButtonBg: "#38c999",
+    navbarBg: "#f0f0f0",
+    overlayBgPrimary: "rgba(0, 0, 0, 0.4)",
+    overlayBgSecondary: "rgba(0, 0, 0, 0.35)",
+    buttonsBg: "#f5f5f4",
+    shadowPrimary: "#010101",
+    shadowSecondary: "#dddddd",
+    borderPrimary: "#cccccc",
+    borderSecondary: "#e4e4e4",
+    placeholder: "#999999",
+    drawerBgPrimary: "#f5f5f5",
+    drawerItemActiveBg: "#1f1e1e",
+    drawerItemInactiveBg: "#333131",
+    progressBgPrimary: "gray",
+    progressBgTint: "#000000",
+    floatingPlayerBgPrimary: "#000000",
+    floatingPlayerColorSecomdary: "#B0B0B0",
+    categoryColorPrimary: "#46494d",
+}
diff --git a/src/constants/fonts.js b/src/constants/fonts.js
@@ -0,0 +1,4 @@
+export const fonts = {
+    poppinsPrimary: "Poppins-Regular",
+    poppinsSecondary: "Poppins-Bold"
+}
diff --git a/src/constants/icons.js b/src/constants/icons.js
@@ -0,0 +1,3 @@
+export const icons = {
+
+}
diff --git a/src/constants/strings.js b/src/constants/strings.js
@@ -0,0 +1,3 @@
+export const strings = {
+
+}
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx
@@ -0,0 +1,15 @@
+import React, { createContext, useState } from 'react'
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+    const [activeThemeIndex, setActiveThemeIndex] = useState(0);
+    return (
+        <ThemeContext.Provider value={{
+            activeThemeIndex,
+            setActiveThemeIndex
+        }}>
+            {children}
+        </ThemeContext.Provider>
+    )
+}
diff --git a/src/screens/AlbumViewerScreen/AlbumViewerScreen.jsx b/src/screens/AlbumViewerScreen/AlbumViewerScreen.jsx
@@ -13,6 +13,7 @@ import TrackPlayer, {
 } from "react-native-track-player";
 import UtilityButtons from "./components/UtilityButtons";
 import CustomStatusBar from "../PlayerScreen/components/CustomStatusBar";
+import { colors } from "../../constants/colors";
 
 const AlbumViewerScreen = () => {
 	const {
@@ -88,7 +89,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		alignItems: "center",
-		backgroundColor: "#e7e9eb",
+		backgroundColor: colors.primaryBackgroundColor,
 	},
 });
 

diff --git a/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx b/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx
@@ -4,6 +4,7 @@ import { FlatList, TouchableOpacity } from "react-native-gesture-handler";
 import { PlayerContext } from "../../../contexts/PlayerContext";
 import { Easing } from "react-native-reanimated";
 import { decode } from "html-entities";
+import { fonts } from "../../../constants/fonts";
 
 const AlbumItemsContainer = ({ trackList, playurlOverrider, queue }) => {
 	const { formatTime, albumItemsOpacity, albumMode, playingIndex, addTracks } =
@@ -33,8 +34,8 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider, queue }) => {
 					style={[
 						styles.songItem,
 						item.id === (queue[playingIndex]?.id || undefined)
-							? { fontFamily: "Poppins-Bold" }
-							: { fontFamily: "Poppins-Regular" },
+							? { fontFamily: fonts.poppinsSecondary }
+							: { fontFamily: fonts.poppinsPrimary },
 					]}
 				>
 					{decode(item.songName).length > 30
@@ -45,8 +46,8 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider, queue }) => {
 					style={[
 						styles.songItem,
 						item.id === (queue[playingIndex]?.id || undefined)
-							? { fontFamily: "Poppins-Bold" }
-							: { fontFamily: "Poppins-Regular" },
+							? { fontFamily: fonts.poppinsSecondary }
+							: { fontFamily: fonts.poppinsPrimary },
 					]}
 				>
 					{formatTime(item.duration)}
@@ -86,6 +87,6 @@ const styles = StyleSheet.create({
 	},
 	songItem: {
 		fontSize: 15,
-		fontFamily: "Poppins-Regular"
+		fontFamily: fonts.poppinsPrimary
 	},
 });
diff --git a/src/screens/AlbumViewerScreen/components/DurationText.jsx b/src/screens/AlbumViewerScreen/components/DurationText.jsx
@@ -1,6 +1,8 @@
 import { StyleSheet, Text } from "react-native";
 import React, { useContext } from "react";
 import { PlayerContext } from "../../../contexts/PlayerContext";
+import { fonts } from "../../../constants/fonts";
+import { colors } from "../../../constants/colors";
 
 const DurationText = ({ currentDuration }) => {
 	const { formatTime } = useContext(PlayerContext);
@@ -13,8 +15,8 @@ const styles = StyleSheet.create({
 	durationText: {
 		position: "relative",
 		fontSize: 16,
-		fontFamily: "Poppins-Regular",
-		color: "black",
+		fontFamily: fonts.poppinsPrimary,
+		color: colors.primaryColor,
 		marginTop: 70,
 		marginBottom: 100,
 	},

diff --git a/src/screens/AlbumViewerScreen/components/PlayerBanner.jsx b/src/screens/AlbumViewerScreen/components/PlayerBanner.jsx
@@ -9,6 +9,8 @@ import React, { useEffect, useContext, useState } from "react";
 import { PlayerContext } from "../../../contexts/PlayerContext";
 import { Easing } from "react-native-reanimated";
 import { decode } from "html-entities";
+import { colors } from "../../../constants/colors";
+import { fonts } from "../../../constants/fonts";
 
 const getDecodedText = (text, maxLength) => {
 	const decodedText = decode(text || "None");
@@ -86,7 +88,7 @@ export default PlayerBanner;
 const styles = StyleSheet.create({
 	overlay: {
 		...StyleSheet.absoluteFillObject,
-		backgroundColor: "rgba(0, 0, 0, 0.35)",
+		backgroundColor: colors.overlayBgSecondary,
 	},
 	imgContainer: {
 		width: 250,
@@ -95,7 +97,7 @@ const styles = StyleSheet.create({
 		justifyContent: "center",
 		borderBottomLeftRadius: 150,
 		borderBottomRightRadius: 150,
-		shadowColor: "#010101",
+		shadowColor: colors.shadowPrimary,
 		shadowOffset: {
 			width: 0,
 			height: 12,
@@ -112,13 +114,13 @@ const styles = StyleSheet.create({
 		position: "absolute",
 		fontSize: 18,
 		bottom: 80,
-		color: "#fff",
-		fontFamily: "Poppins-Bold"
+		color: colors.secondaryColor,
+		fontFamily: fonts.poppinsSecondary
 	},
 	subtext: {
 		bottom: 50,
 		fontSize: 12,
 		textTransform: "uppercase",
-		fontFamily: "Poppins-Regular"
+		fontFamily: fonts.poppinsPrimary
 	},
 });
diff --git a/src/screens/AlbumViewerScreen/components/PlayerFooter.jsx b/src/screens/AlbumViewerScreen/components/PlayerFooter.jsx
@@ -5,6 +5,7 @@ import Feather from "react-native-vector-icons/Feather";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { Easing } from "react-native-reanimated";
 import TrackPlayer, { RepeatMode, State } from "react-native-track-player";
+import { colors } from "../../../constants/colors";
 
 const PlayerFooter = ({
 	playState,
@@ -84,14 +85,14 @@ const PlayerFooter = ({
 						onRepeat && styles.prevNextSongMode,
 					]}
 				>
-					<Feather name="repeat" size={25} color="black" />
+					<Feather name="repeat" size={25} color={colors.primaryColor} />
 				</TouchableOpacity>
 				<View style={styles.playPauseControl}>
 					<TouchableOpacity activeOpacity={1}
 						style={[styles.prevButton, !albumMode && styles.prevNextSongMode]}
 						onPress={handleOnPrevious}
 					>
-						<Ionicons name="play-back" size={25} color="black" />
+						<Ionicons name="play-back" size={25} color={colors.primaryColor} />
 					</TouchableOpacity>
 					<TouchableOpacity activeOpacity={1}
 						style={styles.playPauseButtonContainer}
@@ -109,14 +110,14 @@ const PlayerFooter = ({
 										: "pause"
 							}
 							size={30}
-							color="white"
+							color={colors.secondaryColor}
 						/>
 					</TouchableOpacity>
 					<TouchableOpacity activeOpacity={1}
 						style={[styles.nextButton, !albumMode && styles.prevNextSongMode]}
 						onPress={handleOnNext}
 					>
-						<Ionicons name="play-forward" size={25} color="black" />
+						<Ionicons name="play-forward" size={25} color={colors.primaryColor} />
 					</TouchableOpacity>
 				</View>
 				<TouchableOpacity activeOpacity={1}
@@ -126,7 +127,7 @@ const PlayerFooter = ({
 						onShuffle && styles.prevNextSongMode,
 					]}
 				>
-					<Feather name="shuffle" size={25} color="black" />
+					<Feather name="shuffle" size={25} color={colors.primaryColor} />
 				</TouchableOpacity>
 			</View>
 		</Animated.View>
@@ -155,8 +156,8 @@ const styles = StyleSheet.create({
 	},
 
 	prevNextSongMode: {
-		backgroundColor: "#f5f5f4",
-		shadowColor: "#010101",
+		backgroundColor: colors.buttonsBg,
+		shadowColor: colors.shadowPrimary,
 		shadowOffset: {
 			width: 0,
 			height: 12,
@@ -194,7 +195,7 @@ const styles = StyleSheet.create({
 		height: 70,
 		width: 70,
 		borderRadius: 35,
-		backgroundColor: "black",
+		backgroundColor: colors.primaryColor,
 		justifyContent: "center",
 		alignItems: "center",
 	},

diff --git a/src/screens/AlbumViewerScreen/components/ProgressBarContainer.jsx b/src/screens/AlbumViewerScreen/components/ProgressBarContainer.jsx
@@ -4,6 +4,7 @@ import { PlayerContext } from "../../../contexts/PlayerContext";
 import { AnimatedCircularProgress } from "react-native-circular-progress";
 import { Circle } from "react-native-svg";
 import { Easing } from "react-native-reanimated";
+import { colors } from "../../../constants/colors";
 
 const ProgressBarContainer = ({ totalDuration, currentDuration }) => {
 	const { albumMode, progressBarOpacity } = useContext(PlayerContext);
@@ -25,8 +26,8 @@ const ProgressBarContainer = ({ totalDuration, currentDuration }) => {
 					size={340}
 					width={8}
 					fill={totalDuration ? (currentDuration / totalDuration) * 100 : 0}
-					tintColor="black"
-					backgroundColor="gray"
+					tintColor={colors.primaryColor}
+					backgroundColor={colors.progressBgPrimary}
 					padding={20}
 					arcSweepAngle={180}
 					rotation={-90}
@@ -36,8 +37,8 @@ const ProgressBarContainer = ({ totalDuration, currentDuration }) => {
 							cx={center.x}
 							cy={center.y}
 							r="10"
-							fill="white"
-							stroke="black"
+							fill={colors.secondaryColor}
+							stroke={colors.primaryColor}
 							strokeWidth={5}
 						/>
 					)}

diff --git a/src/screens/AlbumViewerScreen/components/UtilityButtons.jsx b/src/screens/AlbumViewerScreen/components/UtilityButtons.jsx
@@ -7,6 +7,7 @@ import utilityButtonActions from "../../../utils/utilityButtonActions";
 import { useContext } from "react";
 import { PlayerContext } from "../../../contexts/PlayerContext";
 import { useNavigation } from "@react-navigation/native";
+import { colors } from "../../../constants/colors";
 
 const UtilityButtons = ({ trackList }) => {
 	const [addedToPlaylist, setAddedToPlaylist] = useState(false);
@@ -33,14 +34,14 @@ const UtilityButtons = ({ trackList }) => {
 						navigation,
 					})
 				}
-				style={[styles.button, { backgroundColor: "#38c999", borderWidth: 0 }]}
+				style={[styles.button, { backgroundColor: colors.albumPlayButtonBg, borderWidth: 0 }]}
 				accessibilityLabel="Play"
 			>
 				<Octicons
 					name={addedToPlaylist ? "playlist-add-check" : "playlist-add"}
 					size={25}
 					style={styles.icon}
-					color={"white"}
+					color={colors.secondaryColor}
 				/>
 			</TouchableOpacity>
 
@@ -89,9 +90,9 @@ const styles = StyleSheet.create({
 		marginHorizontal: 5,
 		padding: 10,
 		borderWidth: 1,
-		borderColor: "#ccc",
+		borderColor: colors.borderPrimary,
 		borderRadius: 50,
-		backgroundColor: "#f0f0f0",
+		backgroundColor: colors.navbarBg,
 	},
 	icon: {
 		textAlign: "center",