Revamp the pop-up player modal

src/components/Button.tsx

@@ -30,10 +30,6 @@ const ButtonText = styled.Text<{ active?: boolean }>`
     color: ${THEME_COLOR};
     font-weight: 500;
     font-size: 14px;
-
-    ${props => props.active && css`
-        color: white;
-    `}
 `;
 
 const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
@@ -47,20 +43,19 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
         <BaseButton
             {...rest}
             disabled={disabled}
-            // @ts-expect-error styled-components has outdated react-native typings
             ref={ref}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
             style={[ 
                 props.style, 
-                { backgroundColor: isPressed ? THEME_COLOR : defaultStyles.button.backgroundColor } 
+                { backgroundColor: isPressed ? defaultStyles.activeBackground.backgroundColor : defaultStyles.button.backgroundColor } 
             ]}    
         >
             {Icon && 
                 <Icon
                     width={14}
                     height={14}
-                    fill={isPressed ? '#fff' : THEME_COLOR}
+                    fill={THEME_COLOR}
                     style={{ 
                         marginRight: 8,
                     }} 

src/components/Colors.tsx

@@ -57,7 +57,13 @@ function generateStyles(scheme: ColorSchemeName) {
         },
         stackHeader: {
             color: scheme === 'dark' ? 'white' : 'black'
-        }
+        },
+        icon: {
+            color: scheme === 'dark' ? '#ffffff4d' : '#0000004d',
+        },
+        divider: {
+            backgroundColor: scheme === 'dark' ? '#333' : '#f6f6f6',
+        },
     });
 }
 

src/components/Divider.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import styled from 'styled-components/native';
+import useDefaultStyles from './Colors';
+
+const Container = styled.View`
+    height: 1px;
+    flex: 1;
+`;
+
+function Divider({ style }: ViewProps) {
+    const defaultStyles = useDefaultStyles();
+    return (
+        <Container style={[defaultStyles.divider, style]} />
+    );
+}
+
+export default Divider;

src/components/DownloadManager.ts

@@ -67,8 +67,6 @@ function DownloadManager () {
             return;
         }
 
-        console.log(ids);
-
         /**
          * Whenever the store is cleared, existing downloads get "lost" because
          * the only reference we have is the store. This function checks for
@@ -94,7 +92,7 @@ function DownloadManager () {
                     dispatch(completeDownload({ 
                         id,
                         location: file.path,
-                        size: Number.parseInt(file.size),
+                        size: file.size,
                     }));
                 });
         }