diff --git a/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx b/src/screens/AlbumViewerScreen/components/AlbumItemsContainer.jsx index f6476ef..6829e45 100644 --- 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 index a8daca1..e49b697 100644 --- 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 index 7680b0c..9164f80 100644 --- 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 index 65ba62c..2e77310 100644 --- 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 ( @@ -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} > { {decode( - albumData.title.length > 15 - ? `${albumData.title.substring(0, 15)}...` - : albumData.title, + albumData.title.length > 20 + ? `${albumData.title.substring(0, 20)}...` + : albumData.title )} @@ -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 index 414cfb1..d8237e9 100644 --- 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 ( - {categoryName} + {categoryName} {generateEmoji()} 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 index 8b6f441..483b8fd 100644 --- a/src/screens/DashboardScreen/DashboardScreen.jsx +++ b/src/screens/DashboardScreen/DashboardScreen.jsx @@ -23,13 +23,18 @@ const DashboardScreen = ({ navigation }) => { 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) =>