Issue #16 (b): Implemented font loading and usage and misc UI enhance…

…ments
algocry · Oct 16, 2024 · 3527203 · 3527203
1 parent 5179a97
commit 3527203
Show file tree

Hide file tree

Showing 15 changed files with 317 additions and 278 deletions.
diff --git a/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx b/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx
@@ -33,8 +33,8 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider, queue }) => {
 					style={[
 						styles.songItem,
 						item.id === (queue[playingIndex]?.id || undefined)
-							? { fontWeight: "800" }
-							: { fontWeight: "500" },
+							? { fontFamily: "Poppins-Bold" }
+							: { fontFamily: "Poppins-Regular" },
 					]}
 				>
 					{decode(item.songName).length > 30
@@ -45,8 +45,8 @@ const AlbumItemsContainer = ({ trackList, playurlOverrider, queue }) => {
 					style={[
 						styles.songItem,
 						item.id === (queue[playingIndex]?.id || undefined)
-							? { fontWeight: "800" }
-							: { fontWeight: "500" },
+							? { fontFamily: "Poppins-Bold" }
+							: { fontFamily: "Poppins-Regular" },
 					]}
 				>
 					{formatTime(item.duration)}
@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
 		minWidth: "100%",
 		alignItems: "center",
 		justifyContent: "space-between",
-		paddingVertical: 10,
+		paddingVertical: 8,
 		paddingHorizontal: 40,
 	},
 	albumItemsContainer: {
@@ -86,6 +86,6 @@ const styles = StyleSheet.create({
 	},
 	songItem: {
 		fontSize: 15,
-		fontWeight: "500",
+		fontFamily: "Poppins-Regular"
 	},
 });
diff --git a/src/screens/AlbumViewerScreen/components/DurationText.jsx b/src/screens/AlbumViewerScreen/components/DurationText.jsx
@@ -13,6 +13,7 @@ const styles = StyleSheet.create({
 	durationText: {
 		position: "relative",
 		fontSize: 16,
+		fontFamily: "Poppins-Regular",
 		color: "black",
 		marginTop: 70,
 		marginBottom: 100,

diff --git a/src/screens/AlbumViewerScreen/components/PlayerBanner.jsx b/src/screens/AlbumViewerScreen/components/PlayerBanner.jsx
@@ -113,12 +113,12 @@ const styles = StyleSheet.create({
 		fontSize: 18,
 		bottom: 80,
 		color: "#fff",
-		fontWeight: "500",
+		fontFamily: "Poppins-Bold"
 	},
 	subtext: {
 		bottom: 50,
 		fontSize: 12,
-		fontWeight: "300",
 		textTransform: "uppercase",
+		fontFamily: "Poppins-Regular"
 	},
 });
diff --git a/src/screens/AlbumsScreen/components/Card.jsx b/src/screens/AlbumsScreen/components/Card.jsx
@@ -13,6 +13,7 @@ import { useNavigation } from "@react-navigation/native";
 const Card = ({ albumData, index }) => {
 	const navigation = useNavigation();
 	albumData.title = albumData.title ? albumData.title : albumData.name;
+
 	return (
 		<TouchableOpacity
 			onPress={() =>
@@ -23,7 +24,11 @@ const Card = ({ albumData, index }) => {
 					navigation: navigation,
 				})
 			}
-			style={[styles.card, { height: index % 3 === 0 ? 250 : 180 }]}
+			style={[
+				styles.card,
+				{ height: index % 3 === 0 ? 240 : 200 },
+			]}
+			activeOpacity={0.85}
 		>
 			<ImageBackground
 				source={{
@@ -37,9 +42,9 @@ const Card = ({ albumData, index }) => {
 				<View style={styles.overlay} />
 				<Text style={styles.title}>
 					{decode(
-						albumData.title.length > 15
-							? `${albumData.title.substring(0, 15)}...`
-							: albumData.title,
+						albumData.title.length > 20
+							? `${albumData.title.substring(0, 20)}...`
+							: albumData.title
 					)}
 				</Text>
 			</ImageBackground>
@@ -51,18 +56,18 @@ export default Card;
 
 const styles = StyleSheet.create({
 	card: {
-		maxWidth: 180,
-		minWidth: 165,
+		maxWidth: 190,
+		minWidth: 170,
 		backgroundColor: "#fff",
-		borderRadius: 8,
+		borderRadius: 10,
 		shadowColor: "#000",
-		shadowOpacity: 0.2,
-		shadowRadius: 4,
-		shadowOffset: { width: 0, height: 2 },
-		elevation: 5,
+		shadowOpacity: 0.15,
+		shadowRadius: 6,
+		shadowOffset: { width: 0, height: 3 },
+		elevation: 6,
 		overflow: "hidden",
-		marginHorizontal: 8,
-		marginVertical: 10,
+		marginHorizontal: 10,
+		marginVertical: 12,
 	},
 	image: {
 		width: "100%",
@@ -72,19 +77,20 @@ const styles = StyleSheet.create({
 		overflow: "hidden",
 	},
 	imageOverlay: {
-		borderRadius: 8,
+		borderRadius: 10,
 	},
 	overlay: {
 		...StyleSheet.absoluteFillObject,
-		backgroundColor: "rgba(0, 0, 0, 0.35)",
-		borderRadius: 8,
+		backgroundColor: "rgba(0, 0, 0, 0.4)",
+		borderRadius: 10,
 	},
 	title: {
 		position: "absolute",
-		bottom: 10,
-		left: 10,
-		fontSize: 20,
-		fontWeight: "800",
+		bottom: 12,
+		left: 12,
+		fontSize: 18,
 		color: "#fff",
+		letterSpacing: 0.5,
+		fontFamily: 'Poppins-Bold',
 	},
 });
diff --git a/src/screens/AlbumsScreen/components/Category.jsx b/src/screens/AlbumsScreen/components/Category.jsx
@@ -2,6 +2,7 @@ import { StyleSheet, Text, View } from "react-native";
 import React from "react";
 import MasonryList from "@react-native-seoul/masonry-list";
 import Card from "./Card";
+import generateEmoji from "../../../utils/emoticanGenerator";
 
 const Category = ({ categoryName, categoryData }) => {
 	categoryData = categoryData.map((item, index) => ({
@@ -12,7 +13,7 @@ const Category = ({ categoryName, categoryData }) => {
 
 	return (
 		<View style={styles.container}>
-			<Text style={styles.categoryTitle}>{categoryName}</Text>
+			<Text style={styles.categoryTitle}>{categoryName} {generateEmoji()}</Text>
 			<MasonryList
 				data={categoryData}
 				keyExtractor={(item) => item.id}
@@ -30,12 +31,19 @@ export default Category;
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		padding: 5,
+		paddingHorizontal: 5,
+		overflow: 'hidden',
+		borderBottomWidth: 6,
+		borderBottomColor: 'gray',
+		borderBottomLeftRadius: 10,
+		borderBottomRightRadius: 10,
 	},
 	categoryTitle: {
-		fontSize: 30,
-		fontWeight: "bold",
-		marginBottom: 5,
-		textAlign: "center",
+		color: "#46494d",
+		fontSize: 26,
+		fontFamily: "Poppins-Regular",
+		textAlign: "left",
+		marginHorizontal: 10,
+		marginTop: 5,
 	},
 });
diff --git a/src/screens/DashboardScreen/DashboardScreen.jsx b/src/screens/DashboardScreen/DashboardScreen.jsx
@@ -23,13 +23,18 @@ const DashboardScreen = ({ navigation }) => {
 		<Drawer.Navigator
 			screenOptions={{
 				headerTitle: CenterHeader,
-				headerRight: () => RightHeaderButton({ navigation }),
-				drawerActiveTintColor: "#6200ee",
-				drawerInactiveTintColor: "#000",
+				headerRight: ({color}) => RightHeaderButton({ navigation, color }),
+				drawerActiveTintColor: "#1f1e1e",
+				drawerInactiveTintColor: "#333131",
 				drawerStyle: {
 					backgroundColor: "#f5f5f5",
 					width: 280,
 				},
+				drawerLabelStyle: {
+					fontFamily: "Poppins-Regular",
+					fontSize: 16,
+				},
+				drawerAllowFontScaling: true,
 				headerTitleAlign: "left",
 			}}
 			drawerContent={(props) => <Footer {...props} />}

diff --git a/src/screens/DashboardScreen/components/CenterHeader.jsx b/src/screens/DashboardScreen/components/CenterHeader.jsx
@@ -1,36 +1,15 @@
 import { StyleSheet, Text, View, Image } from "react-native";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { expo } from "../../../../app.json";
-import * as Font from "expo-font";
-
-const loadFonts = async () => {
-	try {
-		await Font.loadAsync({
-			MonkeyBold: require("../../../../assets/fonts/MonkyBold.otf"),
-		});
-	} catch (error) {
-		console.error("Error loading font:", error);
-	}
-};
 
 const CenterHeader = () => {
-	const [fontsLoaded, setFontsLoaded] = useState(false);
-
-	useEffect(() => {
-		loadFonts().then(() => setFontsLoaded(true));
-	}, []);
-
-	if (!fontsLoaded) {
-		return null;
-	}
-
 	return (
 		<View style={styles.title}>
 			<Image
 				source={require("../../../../assets/icon.png")}
 				style={styles.icon}
 			/>
-			<Text style={[styles.text, { fontFamily: "MonkeyBold" }]}>
+			<Text style={[styles.text]}>
 				{expo.displayName}
 			</Text>
 		</View>
@@ -53,8 +32,8 @@ const styles = StyleSheet.create({
 		marginRight: 8,
 	},
 	text: {
-		fontWeight: "800",
-		fontSize: 18,
-		textTransform: "capitalize",
+		fontSize: 22,
+		fontFamily: "Poppins-Bold",
+		color: "#46494d"
 	},
 });
diff --git a/src/screens/DashboardScreen/components/RightHeaderButton.jsx b/src/screens/DashboardScreen/components/RightHeaderButton.jsx
@@ -2,13 +2,13 @@ import { StyleSheet, TouchableOpacity } from "react-native";
 import Feather from "react-native-vector-icons/Feather";
 import React from "react";
 
-const RightHeaderButton = ({ navigation }) => {
+const RightHeaderButton = ({ navigation, color }) => {
 	return (
 		<TouchableOpacity
 			style={{ marginRight: 15 }}
 			onPress={() => navigation.navigate("SearchScreen")}
 		>
-			<Feather name="search" size={25} color="black" />
+			<Feather name="search" size={25} color={color} />
 		</TouchableOpacity>
 	);
 };