Implement new styles

src/components/Button.tsx

@@ -14,7 +14,7 @@ interface ButtonProps extends PressableProps {
 }
 
 const BaseButton = styled.Pressable`
-    padding: 16px;
+    padding: 12px;
     border-radius: 8px;
     flex-direction: row;
     align-items: center;
@@ -28,7 +28,8 @@ const BaseButton = styled.Pressable`
 
 const ButtonText = styled.Text<{ active?: boolean }>`
     color: ${THEME_COLOR};
-    font-weight: 600;
+    font-weight: 500;
+    font-size: 14px;
 
     ${props => props.active && css`
         color: white;

src/components/Colors.tsx

@@ -1,7 +1,8 @@
+import { BlurView, BlurViewProperties } from '@react-native-community/blur';
 import { THEME_COLOR } from 'CONSTANTS';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { useContext } from 'react';
-import { ColorSchemeName, StyleSheet } from 'react-native';
+import { ColorSchemeName, StyleSheet, useColorScheme } from 'react-native';
 
 /**
  * Function for generating both the dark and light stylesheets, so that they
@@ -11,12 +12,20 @@ function generateStyles(scheme: ColorSchemeName) {
     return StyleSheet.create({
         text: {
             color: scheme === 'dark' ? '#fff' : '#000',
+            fontSize: 14,
+            fontFamily: 'Inter',
         },
         textHalfOpacity: {
             color: scheme === 'dark' ? '#ffffff88' : '#00000088',
+            fontSize: 14,
+            // fontFamily: 'Inter',
+        },
+        textQuarterOpacity: {
+            color: scheme === 'dark' ? '#ffffff44' : '#00000044',
+            fontSize: 14,
         },
         view: {
-            backgroundColor: scheme === 'dark' ? '#111' : '#f6f6f6',
+            backgroundColor: scheme === 'dark' ? '#111' : '#fff',
         },
         border: {
             borderColor: scheme === 'dark' ? '#262626' : '#ddd',
@@ -25,7 +34,7 @@ function generateStyles(scheme: ColorSchemeName) {
             backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '26' : '16'}`,
         },
         imageBackground: {
-            backgroundColor: scheme === 'dark' ? '#333' : '#ddd',
+            backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
         },
         modal: {
             backgroundColor: scheme === 'dark' ? '#22222200' : '#eeeeee00',
@@ -34,7 +43,7 @@ function generateStyles(scheme: ColorSchemeName) {
             backgroundColor: scheme === 'dark' ? '#000' : '#fff',
         },
         button: {
-            backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
+            backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
         },
         input: {
             backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
@@ -77,4 +86,12 @@ export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
     const defaultStyles = useDefaultStyles();
 
     return props.children(defaultStyles);
+}
+
+export function ColoredBlurView(props: PropsWithChildren<BlurViewProperties>) {
+    const scheme = useColorScheme();
+
+    return (
+        <BlurView {...props} blurType={scheme === 'dark' ? 'extraDark' : 'xlight'} />
+    );
 }

src/components/DownloadIcon.tsx

@@ -30,7 +30,7 @@ const IconOverlay = styled.View`
 function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
     // determine styles
     const defaultStyles = useDefaultStyles();
-    const iconFill = fill || defaultStyles.textHalfOpacity.color;
+    const iconFill = fill || defaultStyles.textQuarterOpacity.color;
 
     // Get download icon from state
     const entity = useTypedSelector((state) => state.downloads.entities[trackId]);

src/components/Typography.ts

@@ -2,13 +2,14 @@ import styled from 'styled-components/native';
 import Text from './Text';
 
 export const Header = styled(Text)`
-    margin: 24px 0 12px 0;
-    font-size: 36px;
-    font-weight: bold;
+    margin: 0 0 6px 0;
+    font-size: 24px;
+    font-weight: 400;
 `;
 
 export const SubHeader = styled(Text)`
-    font-size: 24px;
-    margin: 12px 0;
-    font-weight: 500;
+    font-size: 14px;
+    margin: 0 0 6px 0;
+    font-weight: 400;
+    opacity: 0.5;
 `;

src/components/WrappableButtonRow.tsx

@@ -5,7 +5,7 @@ export const WrappableButtonRow = styled.View`
     flex: 0 0 auto;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 6px -2px;
+    margin: 24px -2px;
 `;
 
 export const WrappableButton = styled(Button)`