Playback2023 - UI design feedback (#1554)

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/components/GradientPillar.kt

@@ -30,7 +30,7 @@ fun GradientPillar(
         contentAlignment = Alignment.TopStart,
         modifier = modifier
             .pillarGradient(pillarStyle)
-            .padding(horizontal = 24.dp),
+            .padding(horizontal = 24.dp, vertical = 16.dp),
     ) {
         content()
     }

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/components/PaidStoryWallView.kt

@@ -49,7 +49,7 @@ fun PaidStoryWallView(
 
         SubscriptionBadgeForTier(
             tier = SubscriptionTier.PLUS,
-            displayMode = SubscriptionBadgeDisplayMode.Colored,
+            displayMode = SubscriptionBadgeDisplayMode.ColoredWithBlackForeground,
         )
 
         Spacer(modifier = modifier.height(14.dp))
@@ -99,7 +99,7 @@ private fun UpsellButton(
             hasFreeTrial = freeTrial.exists
         ),
         onClick = onUpsellClicked,
-        modifier = modifier.fillMaxSize(.65f)
+        modifier = modifier.fillMaxSize(.75f)
     )
 }
 

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/components/StoryButton.kt

@@ -5,6 +5,7 @@ import androidx.compose.material.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import au.com.shiftyjelly.pocketcasts.compose.buttons.RowButton
 
@@ -20,11 +21,13 @@ fun StoryButton(
     RowButton(
         text = text,
         fontFamily = StoryFontFamily,
+        fontWeight = FontWeight.W600,
         colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
         cornerRadius = 4.dp,
         textColor = ButtonTextColor,
         onClick = onClick,
         modifier = modifier,
+        textVerticalPadding = 10.dp,
         textIcon = textIcon,
     )
 }

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/components/StoryText.kt

@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.font.Font
@@ -56,7 +55,6 @@ fun StorySecondaryText(
         disableScale = disableScale(),
         modifier = modifier
             .fillMaxWidth()
-            .alpha(0.8f)
             .padding(horizontal = 24.dp)
     )
 }

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryCompletionRateView.kt

@@ -47,7 +47,7 @@ fun StoryCompletionRateView(
 
         SubscriptionBadgeForTier(
             tier = SubscriptionTier.fromUserTier(userTier),
-            displayMode = SubscriptionBadgeDisplayMode.Colored,
+            displayMode = SubscriptionBadgeDisplayMode.ColoredWithBlackForeground,
         )
 
         Spacer(modifier = modifier.height(14.dp))

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt

@@ -14,7 +14,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
@@ -147,7 +146,8 @@ private fun ReplayButton(
         text = stringResource(id = LR.string.end_of_year_replay),
         onClick = onClick,
         textIcon = IR.drawable.ic_retry,
-        modifier = modifier.width(250.dp)
+        modifier = modifier
+            .fillMaxSize(.75f)
     )
 }
 

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryTopFivePodcastsView.kt

@@ -38,6 +38,7 @@ import au.com.shiftyjelly.pocketcasts.endofyear.components.StorySecondaryText
 import au.com.shiftyjelly.pocketcasts.endofyear.components.disableScale
 import au.com.shiftyjelly.pocketcasts.models.entity.Podcast
 import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryTopFivePodcasts
+import au.com.shiftyjelly.pocketcasts.settings.stats.StatsHelper
 import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
 import au.com.shiftyjelly.pocketcasts.utils.extensions.pxToDp
 import au.com.shiftyjelly.pocketcasts.localization.R as LR
@@ -102,6 +103,7 @@ private fun PodcastList(story: StoryTopFivePodcasts) {
     story.topPodcasts.forEachIndexed { index, topPodcast ->
         PodcastItem(
             podcast = topPodcast.toPodcast(),
+            totalPlayedTimeInSecs = topPodcast.totalPlayedTime,
             position = index,
             tintColor = story.tintColor,
             subtitleColor = story.subtitleColor,
@@ -112,13 +114,16 @@ private fun PodcastList(story: StoryTopFivePodcasts) {
 @Composable
 fun PodcastItem(
     podcast: Podcast,
+    totalPlayedTimeInSecs: Double,
     position: Int,
     tintColor: Color,
     subtitleColor: Color,
     modifier: Modifier = Modifier,
 ) {
     val context = LocalContext.current
     val currentLocalView = LocalView.current
+    val timeText =
+        StatsHelper.secondsToFriendlyString(totalPlayedTimeInSecs.toLong(), context.resources)
     val heightInDp = currentLocalView.height.pxToDp(context)
     Row(
         verticalAlignment = Alignment.CenterVertically,
@@ -161,7 +166,7 @@ fun PodcastItem(
                         .padding(bottom = 3.dp)
                 )
                 TextH70(
-                    text = podcast.author,
+                    text = timeText,
                     color = subtitleColor,
                     maxLines = 1,
                     fontFamily = FontFamily(listOf(Font(UR.font.dm_sans))),
@@ -186,6 +191,7 @@ private fun PodcastItemPreview(
                     title = "Title",
                     author = "Author",
                 ),
+                totalPlayedTimeInSecs = 1000.0,
                 position = 0,
                 tintColor = Color.White,
                 subtitleColor = Color(0xFF8F97A4),

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryTopListenedCategoriesView.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
@@ -44,7 +45,7 @@ import au.com.shiftyjelly.pocketcasts.localization.R as LR
 import au.com.shiftyjelly.pocketcasts.ui.R as UR
 
 private val CategoryColor = Color(0xFF686C74)
-private val CategoryFontSize = 40.sp
+private val CategoryFontSize = 50.sp
 private val DefaultFontFamily = FontFamily(listOf(Font(UR.font.dm_sans)))
 
 @Composable
@@ -150,7 +151,7 @@ fun CategoryItem(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 40.dp)
+            .padding(horizontal = 24.dp)
     ) {
         TextH30(
             text = "${position + 1}",
@@ -164,7 +165,7 @@ fun CategoryItem(
         )
         Row(
             modifier = modifier
-                .padding(vertical = 10.dp)
+                .padding(vertical = 5.dp)
                 .weight(1f),
             verticalAlignment = Alignment.CenterVertically
         ) {
@@ -218,6 +219,7 @@ private fun CategoryTexts(
             fontFamily = DefaultFontFamily,
             fontWeight = FontWeight.W600,
             disableScale = disableScale(),
+            modifier = Modifier.offset(y = (-10).dp),
         )
     }
 }

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryYearOverYearView.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -41,7 +42,7 @@ import au.com.shiftyjelly.pocketcasts.utils.featureflag.UserTier
 import kotlin.math.max
 import au.com.shiftyjelly.pocketcasts.localization.R as LR
 
-private const val YearFontSize = 50
+private const val YearFontSize = 60
 private const val MinimumPillarPercentage = 0.4
 
 @Composable
@@ -63,7 +64,7 @@ fun StoryYearOverYearView(
 
         SubscriptionBadgeForTier(
             tier = SubscriptionTier.fromUserTier(userTier),
-            displayMode = SubscriptionBadgeDisplayMode.Colored,
+            displayMode = SubscriptionBadgeDisplayMode.ColoredWithBlackForeground,
         )
 
         Spacer(modifier = modifier.height(14.dp))
@@ -74,7 +75,7 @@ fun StoryYearOverYearView(
 
         SecondaryText(story)
 
-        Spacer(modifier = modifier.weight(0.2f))
+        Spacer(modifier = modifier.weight(0.15f))
 
         YearPillars(
             story = story,
@@ -198,21 +199,23 @@ private fun YearTextContent(
             fontWeight = FontWeight.W500,
             maxFontSize = YearFontSize.sp,
             maxLines = 1,
+            letterSpacing = 0.sp,
         )
         TextH50(
             text = timeText,
             color = textColor,
             disableScale = disableScale(),
             fontFamily = StoryFontFamily,
             fontWeight = FontWeight.W600,
+            modifier = Modifier.offset(y = (-8).dp)
         )
     }
 }
 
 private fun previousYearPillarPercentageSize(
     yearOverYearListeningTime: YearOverYearListeningTime,
 ) = when {
-    yearOverYearListeningTime.percentage == Double.POSITIVE_INFINITY -> 0.25
+    yearOverYearListeningTime.percentage == Double.POSITIVE_INFINITY -> 0.3
     yearOverYearListeningTime.percentage > 0.0 -> max(
         yearOverYearListeningTime.totalPlayedTimeLastYear.toDouble() / yearOverYearListeningTime.totalPlayedTimeThisYear,
         MinimumPillarPercentage

modules/features/player/src/main/java/au/com/shiftyjelly/pocketcasts/player/view/bookmark/components/UpsellView.kt

@@ -72,7 +72,7 @@ private fun UpsellViewContent(
                 Spacer(modifier = Modifier.width(8.dp))
                 SubscriptionBadgeForTier(
                     tier = state.freeTrial.subscriptionTier,
-                    displayMode = SubscriptionBadgeDisplayMode.Colored
+                    displayMode = SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground
                 )
             }
         },

modules/features/settings/src/main/java/au/com/shiftyjelly/pocketcasts/settings/whatsnew/WhatsNewPage.kt

@@ -127,7 +127,7 @@ private fun WhatsNewPageLoaded(
 
                 SubscriptionBadgeForTier(
                     tier = Subscription.SubscriptionTier.fromUserTier(state.tier),
-                    displayMode = SubscriptionBadgeDisplayMode.Colored
+                    displayMode = SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground
                 )
 
                 Spacer(

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/buttons/RowButton.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -41,9 +42,11 @@ fun RowButton(
     colors: ButtonColors = ButtonDefaults.buttonColors(),
     textColor: Color = MaterialTheme.theme.colors.primaryInteractive02,
     fontFamily: FontFamily? = null,
+    fontWeight: FontWeight? = null,
     @DrawableRes leadingIcon: Int? = null,
     onClick: () -> Unit,
     cornerRadius: Dp = 12.dp,
+    textVerticalPadding: Dp = 6.dp,
     @DrawableRes textIcon: Int? = null,
 ) {
     Box(
@@ -85,8 +88,9 @@ fun RowButton(
                     TextP40(
                         text = text,
                         fontFamily = fontFamily,
+                        fontWeight = fontWeight,
                         modifier = Modifier
-                            .padding(6.dp),
+                            .padding(vertical = textVerticalPadding, horizontal = 6.dp),
                         textAlign = TextAlign.Center,
                         color = textColor
                     )

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/components/ScrollingRow.kt

@@ -53,7 +53,7 @@ fun ScrollingRow(
     }
     LazyRow(
         state = state,
-        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        horizontalArrangement = Arrangement.spacedBy(spacedBy),
         userScrollEnabled = !scrollAutomatically,
     ) {
         if (scrollAutomatically) {

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/images/SubscriptionBadge.kt

@@ -84,31 +84,37 @@ fun SubscriptionBadgeForTier(
             shortNameRes = LR.string.pocket_casts_plus_short,
             iconColor = when (displayMode) {
                 SubscriptionBadgeDisplayMode.Black -> SubscriptionTierColor.plusGold
-                SubscriptionBadgeDisplayMode.Colored -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithBlackForeground -> Color.Black
             },
             backgroundColor = when (displayMode) {
                 SubscriptionBadgeDisplayMode.Black -> Color.Black
-                SubscriptionBadgeDisplayMode.Colored -> SubscriptionTierColor.plusGold
+                SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground,
+                SubscriptionBadgeDisplayMode.ColoredWithBlackForeground -> SubscriptionTierColor.plusGold
             },
             textColor = when (displayMode) {
                 SubscriptionBadgeDisplayMode.Black -> SubscriptionTierColor.plusGold
-                SubscriptionBadgeDisplayMode.Colored -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithBlackForeground -> Color.Black
             },
         )
         SubscriptionTier.PATRON -> SubscriptionBadge(
             iconRes = IR.drawable.ic_patron,
             shortNameRes = LR.string.pocket_casts_patron_short,
             iconColor = when (displayMode) {
                 SubscriptionBadgeDisplayMode.Black -> SubscriptionTierColor.patronPurpleLight
-                SubscriptionBadgeDisplayMode.Colored -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithBlackForeground -> Color.Black
             },
             backgroundColor = when (displayMode) {
                 SubscriptionBadgeDisplayMode.Black -> Color.Black
-                SubscriptionBadgeDisplayMode.Colored -> SubscriptionTierColor.patronPurple
+                SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground,
+                SubscriptionBadgeDisplayMode.ColoredWithBlackForeground -> SubscriptionTierColor.patronPurple
             },
             textColor = when (displayMode) {
                 SubscriptionBadgeDisplayMode.Black -> Color.White
-                SubscriptionBadgeDisplayMode.Colored -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground -> Color.White
+                SubscriptionBadgeDisplayMode.ColoredWithBlackForeground -> Color.Black
             },
         )
         SubscriptionTier.UNKNOWN -> Unit
@@ -117,7 +123,8 @@ fun SubscriptionBadgeForTier(
 
 enum class SubscriptionBadgeDisplayMode {
     Black,
-    Colored,
+    ColoredWithWhiteForeground,
+    ColoredWithBlackForeground,
 }
 
 object SubscriptionTierColor {
@@ -132,7 +139,7 @@ object SubscriptionTierColor {
 fun SubscriptionBadgePlusColoredPreview() {
     SubscriptionBadgeForTier(
         tier = SubscriptionTier.PLUS,
-        displayMode = SubscriptionBadgeDisplayMode.Colored
+        displayMode = SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground
     )
 }
 
@@ -152,7 +159,7 @@ fun SubscriptionBadgePlusBlackPreview() {
 fun SubscriptionBadgePatronColoredPreview() {
     SubscriptionBadgeForTier(
         tier = SubscriptionTier.PATRON,
-        displayMode = SubscriptionBadgeDisplayMode.Colored
+        displayMode = SubscriptionBadgeDisplayMode.ColoredWithWhiteForeground
     )
 }
 
@@ -165,3 +172,23 @@ fun SubscriptionBadgePatronBlackPreview() {
         displayMode = SubscriptionBadgeDisplayMode.Black
     )
 }
+
+@ShowkaseComposable(name = "SubscriptionBadge", group = "Images", styleName = "Plus - Colored with black foreground")
+@Preview(name = "ColoredWithBlackForeground")
+@Composable
+fun SubscriptionBadgePlusColoredWithBlackForegroundPreview() {
+    SubscriptionBadgeForTier(
+        tier = SubscriptionTier.PLUS,
+        displayMode = SubscriptionBadgeDisplayMode.ColoredWithBlackForeground
+    )
+}
+
+@ShowkaseComposable(name = "SubscriptionBadge", group = "Images", styleName = "Patron - Colored with black foreground")
+@Preview(name = "ColoredWithBlackForeground")
+@Composable
+fun SubscriptionBadgePatronColoredWithBlackForegroundPreview() {
+    SubscriptionBadgeForTier(
+        tier = SubscriptionTier.PATRON,
+        displayMode = SubscriptionBadgeDisplayMode.ColoredWithBlackForeground
+    )
+}