PAY-1724 Add color specialGreen on mobile (#3909)

AudiusProject · Aug 21, 2023 · 748fdfd · 748fdfd
1 parent 5c59fe5
commit 748fdfd
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 19 deletions.
diff --git a/packages/mobile/src/components/core/DogEar.tsx b/packages/mobile/src/components/core/DogEar.tsx
@@ -64,7 +64,7 @@ export const DogEar = (props: DogEarProps) => {
     secondary,
     staticWhite,
     accentBlue,
-    specialLightGreen1
+    specialLightGreen
   } = useThemeColors()
 
   const { icon: Icon, colors } = {
@@ -86,7 +86,7 @@ export const DogEar = (props: DogEarProps) => {
     },
     [DogEarType.USDC_PURCHASE]: {
       icon: IconCart,
-      colors: [specialLightGreen1, specialLightGreen1]
+      colors: [specialLightGreen, specialLightGreen]
     }
   }[type]
 

diff --git a/packages/mobile/src/components/core/LockedStatusBadge.tsx b/packages/mobile/src/components/core/LockedStatusBadge.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     justifyContent: 'center'
   },
   premium: {
-    backgroundColor: palette.specialLightGreen1
+    backgroundColor: palette.specialLightGreen
   },
   locked: {
     backgroundColor: palette.neutralLight4

diff --git a/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx b/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx
@@ -126,7 +126,7 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     backgroundColor: palette.accentBlue
   },
   buyButton: {
-    backgroundColor: palette.specialLightGreen1
+    backgroundColor: palette.specialLightGreen
   },
   loadingSpinner: {
     width: spacing(5),

diff --git a/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx b/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     height: spacing(4)
   },
   usdcPurchase: {
-    backgroundColor: palette.specialLightGreen1
+    backgroundColor: palette.specialLightGreen
   }
 }))
 

diff --git a/packages/mobile/src/components/lineup-tile/LineupTilePremiumContentTypeTag.tsx b/packages/mobile/src/components/lineup-tile/LineupTilePremiumContentTypeTag.tsx
@@ -48,7 +48,7 @@ export const LineupTilePremiumContentTypeTag = ({
   isOwner
 }: LineupTilePremiumContentTypeTagProps) => {
   const styles = useStyles()
-  const { accentBlue, neutralLight4, specialLightGreen1 } = useThemeColors()
+  const { accentBlue, neutralLight4, specialLightGreen } = useThemeColors()
   const isUSDCEnabled = useIsUSDCEnabled()
 
   const type =
@@ -73,7 +73,7 @@ export const LineupTilePremiumContentTypeTag = ({
       [PremiumContentType.USDC_PURCHASE]: {
         icon: IconCart,
         color:
-          doesUserHaveAccess && !isOwner ? neutralLight4 : specialLightGreen1,
+          doesUserHaveAccess && !isOwner ? neutralLight4 : specialLightGreen,
         text: messages.premium
       }
     }
@@ -82,7 +82,7 @@ export const LineupTilePremiumContentTypeTag = ({
     doesUserHaveAccess,
     isOwner,
     neutralLight4,
-    specialLightGreen1
+    specialLightGreen
   ])
 
   const { icon: Icon, color, text } = premiumContentTypeMap[type]

diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx
@@ -27,15 +27,15 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
 
 export const PurchaseSuccess = () => {
   const styles = useStyles()
-  const { specialLightGreen1, staticWhite } = useThemeColors()
+  const { specialGreen, staticWhite } = useThemeColors()
 
   return (
     <View style={styles.root}>
       <View style={styles.successContainer}>
         <IconVerified
           height={spacing(4)}
           width={spacing(4)}
-          fill={specialLightGreen1}
+          fill={specialGreen}
           fillSecondary={staticWhite}
         />
         <Text weight='bold'>{messages.success}</Text>

diff --git a/.../mobile/src/components/premium-track-purchase-drawer/StripePurchaseConfirmationButton.tsx b/.../mobile/src/components/premium-track-purchase-drawer/StripePurchaseConfirmationButton.tsx
@@ -32,7 +32,7 @@ export const StripePurchaseConfirmationButton = ({
   price
 }: StripePurchaseConfirmationButtonProps) => {
   const dispatch = useDispatch()
-  const { specialLightGreen1 } = useThemeColors()
+  const { specialLightGreen } = useThemeColors()
   const stage = useSelector(getPurchaseContentFlowStage)
   const isLoading = isContentPurchaseInProgress(stage)
 
@@ -52,7 +52,7 @@ export const StripePurchaseConfirmationButton = ({
       title={isLoading ? messages.purchasing : messages.buy(price)}
       variant={'primary'}
       size='large'
-      color={specialLightGreen1}
+      color={specialLightGreen}
       iconPosition='left'
       icon={isLoading ? LoadingSpinner : undefined}
       fullWidth

diff --git a/packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx b/packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx
@@ -83,7 +83,7 @@ type TrackDetailsTileProps = {
 
 export const TrackDetailsTile = ({ trackId }: TrackDetailsTileProps) => {
   const styles = useStyles()
-  const { accentBlue, specialLightGreen1 } = useThemeColors()
+  const { accentBlue, specialLightGreen } = useThemeColors()
   const track = useSelector((state) => getTrack(state, { id: trackId }))
   const owner = useSelector((state) => getUser(state, { id: track?.owner_id }))
   const isCollectibleGated = isPremiumContentCollectibleGated(
@@ -126,10 +126,10 @@ export const TrackDetailsTile = ({ trackId }: TrackDetailsTileProps) => {
       [PremiumContentType.USDC_PURCHASE]: {
         message: messages.premiumTrack,
         icon: IconCart,
-        color: specialLightGreen1
+        color: specialLightGreen
       }
     }
-  }, [accentBlue, specialLightGreen1])
+  }, [accentBlue, specialLightGreen])
 
   if (!track || !owner) {
     return null

diff --git a/packages/mobile/src/utils/theme.ts b/packages/mobile/src/utils/theme.ts
@@ -57,7 +57,8 @@ export const defaultTheme = {
   staticNeutralLight2: '#AAA7B8',
   staticNeutralLight8: '#F2F2F4',
   staticAccentGreenLight1: '#23AD1A',
-  specialLightGreen1: '#13C65A',
+  specialLightGreen: '#13C65A',
+  specialGreen: '#0F9E48',
   staticPrimary: '#CC0FE0',
   staticSecondary: '#7E1BCC',
   pageHeaderGradientColor1: '#5B23E1',
@@ -116,7 +117,8 @@ export const darkTheme = {
   staticNeutralLight2: '#AAA7B8',
   staticNeutralLight8: '#F2F2F4',
   staticAccentGreenLight1: '#23AD1A',
-  specialLightGreen1: '#13C65A',
+  specialLightGreen: '#13C65A',
+  specialGreen: '#6CDF44',
   staticPrimary: '#CC0FE0',
   staticSecondary: '#7E1BCC',
   pageHeaderGradientColor1: '#7652CC',
@@ -164,7 +166,8 @@ export const matrixTheme = {
   staticNeutralLight2: '#AAA7B8',
   staticNeutralLight8: '#F2F2F4',
   staticAccentGreenLight1: '#23AD1A',
-  specialLightGreen1: '#13C65A',
+  specialLightGreen: '#13C65A',
+  specialGreen: '#6CDF44',
   staticPrimary: '#CC0FE0',
   staticSecondary: '#7E1BCC',
   pageHeaderGradientColor1: '#4FF069',
@@ -226,7 +229,8 @@ export type ThemeColors = {
   staticNeutralLight2: string
   staticNeutralLight8: string
   staticAccentGreenLight1: string
-  specialLightGreen1: string
+  specialLightGreen: string
+  specialGreen: string
   staticPrimary: string
   staticSecondary: string
   pageHeaderGradientColor1: string