Merge pull request #706 from Automattic/update/profile-plus-view

Update upgrade prompt on account details screen
Automattic · Jan 17, 2023 · 8db6f00 · 8db6f00
2 parents 38295d4 + fbea8e8
commit 8db6f00
Show file tree

Hide file tree

Showing 11 changed files with 513 additions and 502 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@
         ([#679](https://github.com/Automattic/pocket-casts-android/pull/679)).
     *   Incorporated new onboarding flow throughout the app
         ([#694](https://github.com/Automattic/pocket-casts-android/pull/694)).
+*   Updates
+    *   Update styling of upgrade prompt on account details screen
+        ([#706](https://github.com/Automattic/pocket-casts-android/pull/706)).
 
 7.30
 -----

diff --git a/.../src/main/java/au/com/shiftyjelly/pocketcasts/account/onboarding/OnboardingWelcomePage.kt b/.../src/main/java/au/com/shiftyjelly/pocketcasts/account/onboarding/OnboardingWelcomePage.kt
@@ -44,7 +44,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import au.com.shiftyjelly.pocketcasts.account.R
-import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusFeatures
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper
 import au.com.shiftyjelly.pocketcasts.account.viewmodel.OnboardingWelcomeState
 import au.com.shiftyjelly.pocketcasts.account.viewmodel.OnboardingWelcomeViewModel
 import au.com.shiftyjelly.pocketcasts.compose.AppThemeWithBackground
@@ -313,7 +313,7 @@ private fun NewsletterSwitch(
 
 @Composable
 private fun PlusPersonCheckmark() {
-    PersonCheckmark(OnboardingPlusFeatures.plusGradientBrush)
+    PersonCheckmark(OnboardingPlusHelper.plusGradientBrush)
 }
 
 @Composable

diff --git a/...va/au/com/shiftyjelly/pocketcasts/account/onboarding/upgrade/OnboardingPlusBottomSheet.kt b/...va/au/com/shiftyjelly/pocketcasts/account/onboarding/upgrade/OnboardingPlusBottomSheet.kt
@@ -35,9 +35,9 @@ import androidx.compose.ui.unit.dp
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.hilt.navigation.compose.hiltViewModel
-import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusFeatures.PlusOutlinedRowButton
-import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusFeatures.PlusRowButton
-import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusFeatures.UnselectedPlusOutlinedRowButton
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper.PlusOutlinedRowButton
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper.PlusRowButton
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper.UnselectedPlusOutlinedRowButton
 import au.com.shiftyjelly.pocketcasts.account.viewmodel.OnboardingPlusBottomSheetState
 import au.com.shiftyjelly.pocketcasts.account.viewmodel.OnboardingPlusBottomSheetViewModel
 import au.com.shiftyjelly.pocketcasts.compose.bottomsheet.Pill

diff --git a/...a/au/com/shiftyjelly/pocketcasts/account/onboarding/upgrade/OnboardingPlusFeaturesPage.kt b/...a/au/com/shiftyjelly/pocketcasts/account/onboarding/upgrade/OnboardingPlusFeaturesPage.kt
@@ -1,18 +1,14 @@
 package au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade
 
-import android.os.Build
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.scrollBy
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.BoxWithConstraintsScope
 import androidx.compose.foundation.layout.Column
@@ -22,8 +18,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.navigationBars
@@ -45,11 +39,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.blur
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -58,9 +49,9 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import au.com.shiftyjelly.pocketcasts.account.R
-import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusFeatures.PlusOutlinedRowButton
-import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusFeatures.PlusRowButton
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper.IconRow
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper.PlusOutlinedRowButton
+import au.com.shiftyjelly.pocketcasts.account.onboarding.upgrade.OnboardingPlusHelper.PlusRowButton
 import au.com.shiftyjelly.pocketcasts.account.viewmodel.OnboardingPlusFeaturesViewModel
 import au.com.shiftyjelly.pocketcasts.compose.bars.NavigationIconButton
 import au.com.shiftyjelly.pocketcasts.compose.components.TextH10
@@ -75,8 +66,6 @@ import java.lang.Long.max
 import au.com.shiftyjelly.pocketcasts.images.R as IR
 import au.com.shiftyjelly.pocketcasts.localization.R as LR
 
-private val background = Color(0xFF121212)
-
 @Composable
 internal fun OnboardingPlusFeaturesPage(
     flow: OnboardingFlow,
@@ -119,16 +108,10 @@ internal fun OnboardingPlusFeaturesPage(
     BoxWithConstraints(
         Modifier
             .fillMaxHeight()
-            .background(background)
+            .background(OnboardingPlusHelper.backgroundColor)
     ) {
 
-        Box(
-            Modifier
-                .verticalScroll(scrollState)
-        ) {
-
-            Background()
-
+        OnboardingPlusHelper.PlusBackground(Modifier.verticalScroll(scrollState)) {
             Column(
                 Modifier
                     .windowInsetsPadding(WindowInsets.statusBars)
@@ -205,7 +188,7 @@ private fun setStatusBarBackground(scrollState: ScrollState) {
     )
 
     val statusBarBackground = if (scrimAlpha > 0) {
-        background.copy(alpha = scrimAlpha)
+        OnboardingPlusHelper.backgroundColor.copy(alpha = scrimAlpha)
     } else {
         Color.Transparent
     }
@@ -230,25 +213,6 @@ private fun BoxWithConstraintsScope.calculateMinimumHeightWithInsets(): Dp {
     return fullHeight - statusBarPadding - navigationBarPadding
 }
 
-@Composable
-private fun IconRow(modifier: Modifier = Modifier) {
-    Row(modifier) {
-        Icon(
-            painter = painterResource(R.drawable.pocket_casts_white),
-            contentDescription = null,
-            tint = Color.White,
-        )
-
-        Spacer(Modifier.width(8.dp))
-
-        Icon(
-            painter = painterResource(R.drawable.plus_bw),
-            contentDescription = null,
-            tint = Color.White,
-        )
-    }
-}
-
 @Composable
 private fun FeatureRow(scrollAutomatically: Boolean) {
 
@@ -296,15 +260,15 @@ private fun FeatureItems() {
         modifier = Modifier
             .height(IntrinsicSize.Max)
     ) {
-        FeatureItemContent.values().forEach {
+        PlusUpgradeFeatureItem.values().forEach {
             FeatureItem(it)
         }
     }
 }
 
 @Composable
 private fun FeatureItem(
-    content: FeatureItemContent,
+    content: PlusUpgradeFeatureItem,
     modifier: Modifier = Modifier,
 ) {
     val shape = RoundedCornerShape(16.dp)
@@ -348,7 +312,7 @@ private fun FeatureItem(
     }
 }
 
-private enum class FeatureItemContent(
+enum class PlusUpgradeFeatureItem(
     @DrawableRes val image: Int,
     @StringRes val title: Int,
     @StringRes val text: Int,
@@ -380,55 +344,6 @@ private enum class FeatureItemContent(
     ),
 }
 
-@Composable
-private fun Background() {
-
-    // Blur only works on Android >=12
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-
-        val height = LocalConfiguration.current.screenHeightDp
-        Canvas(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(height.dp) // not using fillMaxHeight because that caused issues in vertically scrollable views
-                .blur(150.dp)
-        ) {
-
-            // Background
-            drawRect(background)
-
-            drawCircle(
-                color = Color(0xFFFFD845),
-                radius = size.width * .5f,
-                center = Offset(size.width * .05f, size.height * .05f),
-            )
-
-            drawCircle(
-                color = Color(0xFFFFB626),
-                radius = size.width * .35f,
-                center = Offset(size.width * .95f, size.height * .18f),
-                alpha = 0.8f,
-            )
-
-            // Overlay
-            drawRect(Color(0xFF121212), alpha = 0.28f)
-        }
-    } else {
-        Column(
-            Modifier
-                .background(background)
-                .fillMaxSize()
-        ) {
-            Image(
-                painterResource(R.drawable.upgrade_background_glows),
-                contentDescription = null,
-                contentScale = ContentScale.FillBounds,
-                modifier = Modifier.fillMaxWidth()
-            )
-        }
-    }
-}
-
 // Based on https://stackoverflow.com/a/71344813/1910286
 private tailrec suspend fun autoScroll(
     scrollDelay: Long,