diff --git a/src/components/Colors.tsx b/src/components/Colors.tsx index 7c36775..e018a85 100644 --- a/src/components/Colors.tsx +++ b/src/components/Colors.tsx @@ -37,6 +37,8 @@ function generateStyles(scheme: ColorSchemeName) { }, imageBackground: { backgroundColor: scheme === 'dark' ? '#161616' : '#eee', + borderWidth: 0.5, + borderColor: scheme === 'dark' ? '#444' : '#ddd', }, modal: { backgroundColor: scheme === 'dark' ? '#000' : '#fff', @@ -60,6 +62,9 @@ function generateStyles(scheme: ColorSchemeName) { divider: { backgroundColor: scheme === 'dark' ? '#333' : '#eee', }, + filter: { + backgroundColor: scheme === 'dark' ? '#161616' : '#f3f3f3', + }, }); } diff --git a/src/components/Shadow.tsx b/src/components/Shadow.tsx new file mode 100644 index 0000000..2c8e855 --- /dev/null +++ b/src/components/Shadow.tsx @@ -0,0 +1,35 @@ +import React, { PropsWithChildren } from 'react'; +import { StyleSheet, View } from 'react-native'; + +export const shadowSmall = StyleSheet.create({ + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.1, + shadowRadius: 2.62, + elevation: 4, +}); + +export const shadowMedium = StyleSheet.create({ + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.1, + shadowRadius: 4.65, + elevation: 6, +}); + +type SizeProp = 'small' | 'medium'; + +const shadowMap: Record> = { + 'small': shadowSmall, + 'medium': shadowMedium, +}; + +export const ShadowWrapper = ({ children, size = 'small' }: PropsWithChildren<{ size?: SizeProp }>) => ( + {children} +); \ No newline at end of file diff --git a/src/screens/Music/stacks/Albums.tsx b/src/screens/Music/stacks/Albums.tsx index 88ef9e3..fd72af8 100644 --- a/src/screens/Music/stacks/Albums.tsx +++ b/src/screens/Music/stacks/Albums.tsx @@ -17,6 +17,7 @@ import styled from 'styled-components/native'; import useDefaultStyles, { ColoredBlurView } from 'components/Colors'; import { Album } from 'store/music/types'; import { Text } from 'components/Typography'; +import { ShadowWrapper } from 'components/Shadow'; const HeadingHeight = 50; @@ -84,7 +85,9 @@ const GeneratedAlbumItem = React.memo(function GeneratedAlbumItem(props: Generat return ( - + + + {name} {artist} diff --git a/src/screens/Music/stacks/RecentAlbums.tsx b/src/screens/Music/stacks/RecentAlbums.tsx index 667da3a..d619040 100644 --- a/src/screens/Music/stacks/RecentAlbums.tsx +++ b/src/screens/Music/stacks/RecentAlbums.tsx @@ -17,6 +17,7 @@ import useDefaultStyles from 'components/Colors'; import { Album } from 'store/music/types'; import Divider from 'components/Divider'; import styled from 'styled-components/native'; +import { ShadowWrapper } from 'components/Shadow'; const styles = StyleSheet.create({ columnWrapper: { @@ -82,7 +83,9 @@ const RecentAlbums: React.FC = () => { renderItem={({ item }) => ( - + + + {albums[item]?.Name} {albums[item]?.AlbumArtist}