feat: Implement colored blur backgrounds

src/screens/modals/Player/components/NowPlaying.tsx

@@ -1,51 +1,25 @@
 import React from 'react';
-import { Dimensions, View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import styled from 'styled-components/native';
-import FastImage from 'react-native-fast-image';
-import useDefaultStyles from 'components/Colors';
-import Text from 'components/Text';
+import CoverImage from 'components/CoverImage';
+import { Header, SubHeader } from 'components/Typography';
 
-const Screen = Dimensions.get('screen');
-
-const Artwork = styled(FastImage)`
-    border-radius: 10px;
-    width: ${Screen.width * 0.8}px;
-    height: ${Screen.width * 0.8}px;
-    margin: 25px auto;
+const Artwork = styled(CoverImage)`
+    margin: 0 auto 25px auto;
 `;
 
-const styles = StyleSheet.create({
-    artist: {
-        fontWeight: 'bold',
-        fontSize: 24,
-        marginBottom: 12,
-    },
-    title: {
-        fontSize: 18,
-        marginBottom: 12,
-        textAlign: 'center',
-        paddingLeft: 20,
-        paddingRight: 20,
-    }
-});
-
-
 export default function NowPlaying() {
     const { track } = useCurrentTrack();
-    const defaultStyles = useDefaultStyles();
 
     return (
-        <View style={{ alignItems: 'center' }}>
+        <View>
             <Artwork
-                style={defaultStyles.imageBackground}
-                source={{ 
-                    uri: track?.artwork as string | undefined,
-                    priority: FastImage.priority.high,
-                }} 
+                src={track?.artwork as string}
+                margin={80}
             />
-            <Text style={styles.artist}>{track?.artist}</Text>
-            <Text style={styles.title}>{track?.title}</Text>
+            <Header>{track?.title}</Header>
+            <SubHeader>{track?.artist}{track?.album && ` — ${track.album}`}</SubHeader>
         </View>
     );
 }

src/screens/modals/Player/index.tsx

@@ -6,12 +6,11 @@ import NowPlaying from './components/NowPlaying';
 import Queue from './components/Queue';
 import useDefaultStyles from 'components/Colors';
 import ConnectionNotice from './components/ConnectionNotice';
-import { DismissableScrollView } from 'components/DismissableScrollView';
 import { ScrollView } from 'react-native-gesture-handler';
 
 const styles = StyleSheet.create({
     inner: {
-        padding: 25,
+        padding: 40,
     }
 });