Refine home screen card styling and visual hierarchy

Updated various home screen components (`ContinueWatchingCard`, `HomeBrowseCard`, `NextUpCard`, `HomeSearchResultCard`, etc.) to simplify their appearance and improve readability:

- Removed `tonalElevation` from multiple Surface containers.
- Replaced `surfaceVariant` backgrounds and `onSurfaceVariant` text colors with `surface` and `onSurface` for better contrast.
- Removed the thin border from `HomeBrowseCard`.
- Darkened the gradient overlay on `HomeFeaturedCard` for better text legibility and adjusted the progress bar padding.
This commit is contained in:
2026-03-31 12:16:48 +02:00
parent 4455640142
commit f2759b271e
7 changed files with 9 additions and 18 deletions

View File

@@ -59,7 +59,6 @@ internal fun ContinueWatchingCard(
Surface(
shape = RoundedCornerShape(26.dp),
color = scheme.surfaceContainer,
tonalElevation = 3.dp,
modifier = modifier.width(320.dp)
) {
Column(
@@ -126,7 +125,7 @@ internal fun ContinueWatchingCard(
Text(
text = supportingText,
style = MaterialTheme.typography.bodySmall,
color = scheme.onSurfaceVariant,
color = scheme.onSurface,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

View File

@@ -40,7 +40,6 @@ internal fun HomeFeaturedCard(
Surface(
color = scheme.surfaceContainerLow,
shape = RoundedCornerShape(30.dp),
tonalElevation = 4.dp,
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(30.dp))
@@ -63,9 +62,9 @@ internal fun HomeFeaturedCard(
.background(
Brush.verticalGradient(
colors = listOf(
Color.Black.copy(alpha = 0.08f),
Color.Black.copy(alpha = 0.18f),
Color.Black.copy(alpha = 0.72f)
Color.Black.copy(alpha = 0.44f),
Color.Black.copy(alpha = 0.44f),
Color.Black.copy(alpha = 0.80f)
)
)
)
@@ -115,6 +114,7 @@ internal fun HomeFeaturedCard(
foregroundColor = scheme.primary,
backgroundColor = Color.White.copy(alpha = 0.26f),
modifier = Modifier.align(Alignment.BottomStart)
.padding(bottom = 6.dp, start = 6.dp, end = 6.dp)
)
}
}

View File

@@ -1,7 +1,6 @@
package hu.bbara.purefin.app.home.ui.library
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@@ -84,10 +83,7 @@ internal fun HomeBrowseCard(
.fillMaxWidth()
.aspectRatio(16f / 10f)
.clip(RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp))
.border(
1.dp, scheme.outlineVariant.copy(alpha = 0.35f), RoundedCornerShape(18.dp)
)
.background(scheme.surfaceVariant)
.background(scheme.surface)
) {
PurefinAsyncImage(
model = item.imageUrl,
@@ -147,7 +143,7 @@ internal fun HomeBrowseCard(
Text(
text = supportingText,
style = MaterialTheme.typography.bodySmall,
color = scheme.onSurfaceVariant,
color = scheme.onSurface,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

View File

@@ -37,7 +37,6 @@ internal fun NextUpCard(
Surface(
shape = RoundedCornerShape(24.dp),
color = scheme.surfaceContainer,
tonalElevation = 2.dp,
modifier = modifier.width(256.dp)
) {
Column(
@@ -53,7 +52,7 @@ internal fun NextUpCard(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(16f / 10f)
.background(scheme.surfaceVariant)
.background(scheme.surface)
) {
PurefinAsyncImage(
model = item.episode.heroImageUrl,
@@ -91,7 +90,7 @@ internal fun NextUpCard(
.filter { it.isNotBlank() }
.joinToString(""),
style = MaterialTheme.typography.bodySmall,
color = scheme.onSurfaceVariant,
color = scheme.onSurface,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

View File

@@ -32,7 +32,6 @@ internal fun HomeSearchResultCard(
Surface(
shape = RoundedCornerShape(22.dp),
color = scheme.surfaceContainer,
tonalElevation = 2.dp,
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(22.dp))

View File

@@ -28,7 +28,6 @@ internal fun SearchMessage(
Surface(
shape = RoundedCornerShape(24.dp),
color = MaterialTheme.colorScheme.surfaceContainerHigh,
tonalElevation = 1.dp,
modifier = Modifier.fillMaxWidth()
) {
Box(

View File

@@ -33,7 +33,6 @@ fun HomeEmptyState(
Surface(
shape = RoundedCornerShape(30.dp),
color = scheme.surfaceContainerLow,
tonalElevation = 2.dp,
modifier = modifier.padding(horizontal = 16.dp)
) {
Column(