Restyle the downloads screen

src/components/Button.tsx

@@ -7,13 +7,16 @@ import { THEME_COLOR } from 'CONSTANTS';
 import styled, { css } from 'styled-components/native';
 import useDefaultStyles from './Colors';
 
+type ButtonSize = 'default' | 'small';
+
 interface ButtonProps extends PressableProps {
     icon?: React.FC<SvgProps>;
-    title: string;
+    title?: string;
     style?: ViewProps['style'];
+    size?: ButtonSize;
 }
 
-const BaseButton = styled.Pressable`
+const BaseButton = styled.Pressable<{ size: ButtonSize }>`
     padding: 12px;
     border-radius: 8px;
     flex-direction: row;
@@ -24,16 +27,25 @@ const BaseButton = styled.Pressable`
     ${(props) => props.disabled && css`
         opacity: 0.25;
     `}
+
+    ${(props) => props.size === 'small' && css`
+        flex-grow: 0;
+        padding: 10px;
+    `}
 `;
 
-const ButtonText = styled.Text<{ active?: boolean }>`
+const ButtonText = styled.Text<{ active?: boolean, size: ButtonSize }>`
     color: ${THEME_COLOR};
     font-weight: 500;
     font-size: 14px;
+
+    ${(props) => props.size === 'small' && css`
+        font-size: 12px;
+    `}
 `;
 
 const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
-    const { icon: Icon, title, disabled, ...rest } = props;
+    const { icon: Icon, title, disabled, size = 'default',  ...rest } = props;
     const defaultStyles = useDefaultStyles();
     const [isPressed, setPressed] = useState(false);
     const handlePressIn = useCallback(() => setPressed(true), []);
@@ -48,8 +60,12 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
             onPressOut={handlePressOut}
             style={[ 
                 props.style, 
-                { backgroundColor: isPressed ? defaultStyles.activeBackground.backgroundColor : defaultStyles.button.backgroundColor } 
+                { backgroundColor: isPressed
+                    ? defaultStyles.activeBackground.backgroundColor 
+                    : defaultStyles.button.backgroundColor 
+                } 
             ]}    
+            size={size}
         >
             {Icon && 
                 <Icon
@@ -57,11 +73,13 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
                     height={14}
                     fill={THEME_COLOR}
                     style={{ 
-                        marginRight: 8,
+                        marginRight: title ? 8 : 0,
                     }} 
                 />
             }
-            <ButtonText active={isPressed}>{title}</ButtonText>
+            {title ? (
+                <ButtonText active={isPressed} size={size}>{title}</ButtonText>
+            ) : undefined}
         </BaseButton>
     );
 });