refactored text styles, not enough shared

app/components/AlbumArt.tsx

@@ -9,8 +9,8 @@ import CoverArt from '@app/components/CoverArt'
 
 interface AlbumArtProps {
   id: string
-  height: number
-  width: number
+  height: string | number
+  width: string | number
 }
 
 const AlbumArt: React.FC<AlbumArtProps> = ({ id, height, width }) => {

app/components/Button.tsx

@@ -1,31 +1,33 @@
-import React, { useState } from 'react'
-import { GestureResponderEvent, Pressable, Text } from 'react-native'
 import colors from '@app/styles/colors'
-import text from '@app/styles/text'
+import font from '@app/styles/font'
+import React from 'react'
+import { GestureResponderEvent, StyleSheet, Text } from 'react-native'
+import PressableOpacity from './PressableOpacity'
 
 const Button: React.FC<{
   title: string
   onPress: (event: GestureResponderEvent) => void
 }> = ({ title, onPress }) => {
-  const [opacity, setOpacity] = useState(1)
-
   return (
-    <Pressable
-      onPress={onPress}
-      onPressIn={() => setOpacity(0.6)}
-      onPressOut={() => setOpacity(1)}
-      onLongPress={() => setOpacity(1)}
-      style={{
-        backgroundColor: colors.accent,
-        paddingHorizontal: 24,
-        minHeight: 42,
-        justifyContent: 'center',
-        borderRadius: 1000,
-        opacity,
-      }}>
-      <Text style={{ ...text.button }}>{title}</Text>
-    </Pressable>
+    <PressableOpacity onPress={onPress} style={styles.container}>
+      <Text style={styles.text}>{title}</Text>
+    </PressableOpacity>
   )
 }
 
-export default Button
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.accent,
+    paddingHorizontal: 24,
+    minHeight: 42,
+    justifyContent: 'center',
+    borderRadius: 1000,
+  },
+  text: {
+    fontSize: 15,
+    fontFamily: font.bold,
+    color: colors.text.primary,
+  },
+})
+
+export default React.memo(Button)

app/components/ImageGradientScrollView.tsx

@@ -1,27 +1,26 @@
-import React, { useState } from 'react'
-import { LayoutRectangle, ScrollView, ScrollViewProps } from 'react-native'
-import colors from '@app/styles/colors'
 import ImageGradientBackground from '@app/components/ImageGradientBackground'
+import colors from '@app/styles/colors'
+import dimensions from '@app/styles/dimensions'
+import React from 'react'
+import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
 
 const ImageGradientScrollView: React.FC<ScrollViewProps & { imageUri?: string; imageKey?: string }> = props => {
-  const [layout, setLayout] = useState<LayoutRectangle | undefined>(undefined)
+  const layout = useWindowDimensions()
 
-  props.style = props.style || {}
-  if (typeof props.style === 'object' && props.style !== null) {
-    props.style = {
-      ...props.style,
-      backgroundColor: colors.gradient.low,
-    }
-  }
+  const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
 
   return (
     <ScrollView
       overScrollMode="never"
       {...props}
-      onLayout={event => {
-        setLayout(event.nativeEvent.layout)
-      }}>
-      <ImageGradientBackground height={layout?.height} imageUri={props.imageUri} imageKey={props.imageKey} />
+      style={[
+        props.style,
+        {
+          backgroundColor: colors.gradient.low,
+        },
+      ]}
+      contentContainerStyle={[{ minHeight }, props.contentContainerStyle]}>
+      <ImageGradientBackground height={minHeight} imageUri={props.imageUri} imageKey={props.imageKey} />
       {props.children}
     </ScrollView>
   )

app/components/NowPlayingBar.tsx

@@ -5,7 +5,7 @@ import { useAtomValue } from 'jotai/utils'
 import { currentTrackAtom, playerStateAtom, usePause, usePlay, useProgress } from '@app/state/trackplayer'
 import CoverArt from '@app/components/CoverArt'
 import colors from '@app/styles/colors'
-import { Font } from '@app/styles/text'
+import font from '@app/styles/font'
 import { State } from 'react-native-track-player'
 import PressableOpacity from '@app/components/PressableOpacity'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
@@ -110,12 +110,12 @@ const styles = StyleSheet.create({
     marginLeft: 10,
   },
   detailsTitle: {
-    fontFamily: Font.semiBold,
+    fontFamily: font.semiBold,
     fontSize: 13,
     color: colors.text.primary,
   },
   detailsAlbum: {
-    fontFamily: Font.regular,
+    fontFamily: font.regular,
     fontSize: 13,
     color: colors.text.secondary,
   },

app/components/PressableOpacity.tsx

@@ -3,6 +3,7 @@ import { LayoutRectangle, Pressable, PressableProps } from 'react-native'
 
 type PressableOpacityProps = PressableProps & {
   ripple?: boolean
+  rippleColor?: string
 }
 
 const PressableOpacity: React.FC<PressableOpacityProps> = props => {
@@ -20,8 +21,9 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
       android_ripple={
         props.ripple
           ? {
-              color: 'rgba(255,255,255,0.26)',
+              color: props.rippleColor || 'rgba(255,255,255,0.26)',
               radius: dimensions ? dimensions.width / 2 : undefined,
+              borderless: true,
             }
           : undefined
       }