Fancy new buttons and more consistent colors

src/screens/Player/components/NowPlaying.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Text, Dimensions, View, StyleSheet } from 'react-native';
+import { Dimensions, View, StyleSheet } from 'react-native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import styled from 'styled-components/native';
 import FastImage from 'react-native-fast-image';
-import { colors } from 'components/Colors';
+import useDefaultStyles from 'components/Colors';
+import Text from 'components/Text';
 
 const Screen = Dimensions.get('screen');
 
@@ -16,13 +17,11 @@ const Artwork = styled(FastImage)`
 
 const styles = StyleSheet.create({
     artist: {
-        ...colors.text,
         fontWeight: 'bold',
         fontSize: 24,
         marginBottom: 12,
     },
     title: {
-        ...colors.text,
         fontSize: 18,
         marginBottom: 12,
         textAlign: 'center',
@@ -34,17 +33,18 @@ const styles = StyleSheet.create({
 
 export default function NowPlaying() {
     const track = useCurrentTrack();
+    const defaultStyles = useDefaultStyles();
 
     return (
         <View style={{ alignItems: 'center' }}>
             <Artwork
-                style={colors.imageBackground}
+                style={defaultStyles.imageBackground}
                 source={{ 
                     uri: track?.artwork,
                     priority: FastImage.priority.high,
                 }} 
             />
-            <Text style={styles.artist} >{track?.artist}</Text>
+            <Text style={styles.artist}>{track?.artist}</Text>
             <Text style={styles.title}>{track?.title}</Text>
         </View>
     );