[AUD-1008] EnablePushNotifications reminder drawer (#137)

* Add CollectibleDetails

* Add fullscreen drawer

* Add collectible media

* [WIP] Style collectible details

* Finish styling CollectibleDetailsDrawer

* Get video displaying properly

* Add video components

* Cleanup

* Styling fixes for android

* Set color of volume icon

* Change variable name in useThemedStyles

* Animate border radius for fullscreen drawer

* [WIP] Add EnablePushNotificationsDrawer

* Initial styling of the EnablePushNotificationsDrawer

* Set fills of icons

* Make sure reminder is still promptable from web

* Add text component to set default font family

* Use new Text component

* Click outside of drawer to close

* Fix lint issues

* Fix color of cosign icon

* Move background styles to style sheet

* Address PR comments

* Show push notif reminder after sign in with new rn flow

packages/audius-mobile-client/src/App.tsx

@@ -20,6 +20,7 @@ import SignOnNav from './components/signon/NavigationStack'
 import { WebRefContextProvider } from './components/web/WebRef'
 import BottomBar from './components/bottom-bar'
 import MobileUploadDrawer from './components/mobile-upload-drawer'
+import EnablePushNotificationsDrawer from './components/enable-push-notifications-drawer'
 import CollectibleDetailsDrawer from './components/collectible-details-drawer'
 
 const store = createStore()
@@ -71,6 +72,7 @@ const App = () => {
           */}
             {/* <BottomBar /> */}
             <MobileUploadDrawer />
+            <EnablePushNotificationsDrawer />
             <CollectibleDetailsDrawer />
             <Audio webRef={webRef} />
             <OAuth webRef={webRef} />

packages/audius-mobile-client/src/components/animated-button/AnimatedButtonProvider.tsx

@@ -36,7 +36,7 @@ const AnimatedButton = ({
     } else {
       animationRef.current?.play(0, 0)
     }
-  }, [isActive])
+  }, [iconJSON, isActive])
 
   const handleClick = useCallback(() => {
     if (isDisabled) {
@@ -48,7 +48,7 @@ const AnimatedButton = ({
     }
 
     onClick()
-  }, [isDisabled, onClick])
+  }, [isActive, isDisabled, onClick])
 
   return (
     <TouchableHighlight

packages/audius-mobile-client/src/components/bottom-bar/BottomBar.tsx

@@ -78,10 +78,10 @@ const BottomBar = () => {
 
   // Actions
   const dispatchWeb = useDispatchWeb()
-  const openSignOn = () => {
+  const openSignOn = useCallback(() => {
     dispatchWeb(_openSignOn(false))
     dispatchWeb(showRequiresAccountModal())
-  }
+  }, [dispatchWeb])
   const goToRoute = (route: string) => dispatchWeb(push(route))
   const resetExploreTab = () => dispatchWeb(setTab(Tabs.FOR_YOU))
   const scrollToTop = () =>

packages/audius-mobile-client/src/components/button/Button.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { TouchableHighlight, ViewStyle, StyleSheet } from 'react-native'
+import { useThemeColors } from '../../utils/theme'
+import Text from '../../components/text'
+
+import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
+
+const createStyles = (themeColors: ThemeColors) =>
+  StyleSheet.create({
+    button: {
+      backgroundColor: themeColors.primary,
+      borderRadius: 4,
+      display: 'flex',
+      alignItems: 'center',
+      padding: 16
+    },
+    text: {
+      color: themeColors.staticWhite,
+      fontSize: 16
+    }
+  })
+
+type ButtonProps = {
+  onPress: () => void
+  title: string
+  style?: ViewStyle
+}
+
+const Button = ({ style, onPress, title }: ButtonProps) => {
+  const styles = useThemedStyles(createStyles)
+  const { primaryDark1 } = useThemeColors()
+  return (
+    <TouchableHighlight
+      style={[styles.button, style]}
+      onPress={onPress}
+      underlayColor={primaryDark1}
+    >
+      <Text style={styles.text} weight='bold'>
+        {title}
+      </Text>
+    </TouchableHighlight>
+  )
+}
+
+export default Button

packages/audius-mobile-client/src/components/button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button'

packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDate.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import { formatDateWithTimezoneOffset } from 'audius-client/src/common/utils/timeUtil'
 
+import Text from '../../components/text'
 import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
 
 const createStyles = (themeColors: ThemeColors) =>
@@ -16,8 +17,7 @@ const createStyles = (themeColors: ThemeColors) =>
     },
 
     dateTitle: {
-      color: themeColors.neutralLight4,
-      fontFamily: 'AvenirNextLTPro-Bold'
+      color: themeColors.neutralLight4
     },
 
     date: {
@@ -38,7 +38,9 @@ export const CollectibleDate = ({
 
   return (
     <View style={styles.dateWrapper}>
-      <Text style={styles.dateTitle}>{label}</Text>
+      <Text style={styles.dateTitle} weight='bold'>
+        {label}
+      </Text>
       <Text style={styles.date}>{formatDateWithTimezoneOffset(date)}</Text>
     </View>
   )

packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleDetailsDrawer.tsx

@@ -12,8 +12,9 @@ import { getCollectible } from 'audius-client/src/common/store/ui/collectible-de
 import { Chain } from 'audius-client/src/common/models/Chain'
 
 import { useDispatchWeb } from '../../hooks/useDispatchWeb'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
+import Text from '../../components/text'
 
 import { CollectibleMedia } from './CollectibleMedia'
 import { CollectibleDate } from './CollectibleDate'
@@ -34,13 +35,10 @@ const createStyles = (themeColors: ThemeColors) =>
     },
 
     detailsDescription: {
-      color: themeColors.neutralLight2,
       marginBottom: 24
     },
 
     detailsTitle: {
-      color: themeColors.neutral,
-      fontFamily: 'AvenirNextLTPro-Bold',
       textAlign: 'center',
       fontSize: 16,
       marginBottom: 24
@@ -56,7 +54,6 @@ const createStyles = (themeColors: ThemeColors) =>
 
     badge: {
       color: themeColors.white,
-      fontFamily: 'AvenirNextLTPro-Bold',
       textAlign: 'center',
       paddingTop: 4,
       paddingRight: 8,
@@ -120,13 +117,16 @@ const CollectibleDetails = () => {
           <CollectibleMedia collectible={collectible} />
 
           <View style={styles.details}>
-            <Text style={styles.detailsTitle}>{collectible.name}</Text>
+            <Text style={styles.detailsTitle} weight='bold'>
+              {collectible.name}
+            </Text>
             <View style={styles.detailsStamp}>
               <Text
                 style={[
                   styles.badge,
                   collectible.isOwned ? styles.owned : styles.created
                 ]}
+                weight='bold'
               >
                 {collectible.isOwned ? messages.owned : messages.created}
               </Text>

packages/audius-mobile-client/src/components/collectible-details-drawer/CollectibleLink.tsx

@@ -3,13 +3,13 @@ import React, { useCallback } from 'react'
 import {
   Linking,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View
 } from 'react-native'
 
 import IconLink from '../../assets/images/iconLink.svg'
-import { useColor } from '../../utils/theme'
+import Text from '../../components/text'
+import { useThemeColors } from '../../utils/theme'
 import { ThemeColors, useThemedStyles } from '../../hooks/useThemedStyles'
 
 const createStyles = (themeColors: ThemeColors) =>
@@ -23,7 +23,6 @@ const createStyles = (themeColors: ThemeColors) =>
 
     linkText: {
       color: themeColors.secondary,
-      fontFamily: 'AvenirNextLTPro-Heavy',
       textDecorationLine: 'underline'
     },
 
@@ -44,18 +43,20 @@ export const CollectibleLink = ({
     Linking.openURL(url)
   }, [url])
 
-  const secondaryColor = useColor('secondary')
+  const { secondary } = useThemeColors()
 
   return (
     <TouchableWithoutFeedback onPress={handleLinkPress}>
       <View style={styles.link}>
         <IconLink
-          fill={secondaryColor}
+          fill={secondary}
           style={styles.linkIcon}
           height={16}
           width={16}
         />
-        <Text style={styles.linkText}>{text}</Text>
+        <Text style={styles.linkText} weight='heavy'>
+          {text}
+        </Text>
       </View>
     </TouchableWithoutFeedback>
   )