Add shadows to cover images

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',
+        },
     });
 }
 

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<SizeProp, StyleSheet.NamedStyles<unknown>> = {
+    'small': shadowSmall,
+    'medium': shadowMedium,
+};
+
+export const ShadowWrapper = ({ children, size = 'small' }: PropsWithChildren<{ size?: SizeProp }>) => (
+    <View style={shadowMap[size]}>{children}</View>
+);

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 (
         <TouchableHandler id={id as string} onPress={onPress}>
             <AlbumItem>
-                <AlbumImage source={{ uri: imageUrl }} style={defaultStyles.imageBackground} />
+                <ShadowWrapper size="medium">
+                    <AlbumImage source={{ uri: imageUrl }} style={[defaultStyles.imageBackground]} />
+                </ShadowWrapper>
                 <Text numberOfLines={1} style={defaultStyles.text}>{name}</Text>
                 <HalfOpacity style={defaultStyles.text} numberOfLines={1}>{artist}</HalfOpacity>
             </AlbumItem>

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 }) => (
                     <TouchableHandler id={item} onPress={selectAlbum}>
                         <AlbumItem>
-                            <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
+                            <ShadowWrapper size="medium">
+                                <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
+                            </ShadowWrapper>
                             <Text style={defaultStyles.text} numberOfLines={1}>{albums[item]?.Name}</Text>
                             <Text style={defaultStyles.textHalfOpacity} numberOfLines={1}>{albums[item]?.AlbumArtist}</Text>
                         </AlbumItem>