mirror of
https://github.com/bbara04/Purefin.git
synced 2026-03-31 17:10:08 +02:00
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:
@@ -59,7 +59,6 @@ internal fun ContinueWatchingCard(
|
|||||||
Surface(
|
Surface(
|
||||||
shape = RoundedCornerShape(26.dp),
|
shape = RoundedCornerShape(26.dp),
|
||||||
color = scheme.surfaceContainer,
|
color = scheme.surfaceContainer,
|
||||||
tonalElevation = 3.dp,
|
|
||||||
modifier = modifier.width(320.dp)
|
modifier = modifier.width(320.dp)
|
||||||
) {
|
) {
|
||||||
Column(
|
Column(
|
||||||
@@ -126,7 +125,7 @@ internal fun ContinueWatchingCard(
|
|||||||
Text(
|
Text(
|
||||||
text = supportingText,
|
text = supportingText,
|
||||||
style = MaterialTheme.typography.bodySmall,
|
style = MaterialTheme.typography.bodySmall,
|
||||||
color = scheme.onSurfaceVariant,
|
color = scheme.onSurface,
|
||||||
maxLines = 1,
|
maxLines = 1,
|
||||||
overflow = TextOverflow.Ellipsis
|
overflow = TextOverflow.Ellipsis
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -40,7 +40,6 @@ internal fun HomeFeaturedCard(
|
|||||||
Surface(
|
Surface(
|
||||||
color = scheme.surfaceContainerLow,
|
color = scheme.surfaceContainerLow,
|
||||||
shape = RoundedCornerShape(30.dp),
|
shape = RoundedCornerShape(30.dp),
|
||||||
tonalElevation = 4.dp,
|
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.clip(RoundedCornerShape(30.dp))
|
.clip(RoundedCornerShape(30.dp))
|
||||||
@@ -63,9 +62,9 @@ internal fun HomeFeaturedCard(
|
|||||||
.background(
|
.background(
|
||||||
Brush.verticalGradient(
|
Brush.verticalGradient(
|
||||||
colors = listOf(
|
colors = listOf(
|
||||||
Color.Black.copy(alpha = 0.08f),
|
Color.Black.copy(alpha = 0.44f),
|
||||||
Color.Black.copy(alpha = 0.18f),
|
Color.Black.copy(alpha = 0.44f),
|
||||||
Color.Black.copy(alpha = 0.72f)
|
Color.Black.copy(alpha = 0.80f)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
@@ -115,6 +114,7 @@ internal fun HomeFeaturedCard(
|
|||||||
foregroundColor = scheme.primary,
|
foregroundColor = scheme.primary,
|
||||||
backgroundColor = Color.White.copy(alpha = 0.26f),
|
backgroundColor = Color.White.copy(alpha = 0.26f),
|
||||||
modifier = Modifier.align(Alignment.BottomStart)
|
modifier = Modifier.align(Alignment.BottomStart)
|
||||||
|
.padding(bottom = 6.dp, start = 6.dp, end = 6.dp)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
package hu.bbara.purefin.app.home.ui.library
|
package hu.bbara.purefin.app.home.ui.library
|
||||||
|
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.border
|
|
||||||
import androidx.compose.foundation.clickable
|
import androidx.compose.foundation.clickable
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
@@ -84,10 +83,7 @@ internal fun HomeBrowseCard(
|
|||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.aspectRatio(16f / 10f)
|
.aspectRatio(16f / 10f)
|
||||||
.clip(RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp))
|
.clip(RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp))
|
||||||
.border(
|
.background(scheme.surface)
|
||||||
1.dp, scheme.outlineVariant.copy(alpha = 0.35f), RoundedCornerShape(18.dp)
|
|
||||||
)
|
|
||||||
.background(scheme.surfaceVariant)
|
|
||||||
) {
|
) {
|
||||||
PurefinAsyncImage(
|
PurefinAsyncImage(
|
||||||
model = item.imageUrl,
|
model = item.imageUrl,
|
||||||
@@ -147,7 +143,7 @@ internal fun HomeBrowseCard(
|
|||||||
Text(
|
Text(
|
||||||
text = supportingText,
|
text = supportingText,
|
||||||
style = MaterialTheme.typography.bodySmall,
|
style = MaterialTheme.typography.bodySmall,
|
||||||
color = scheme.onSurfaceVariant,
|
color = scheme.onSurface,
|
||||||
maxLines = 1,
|
maxLines = 1,
|
||||||
overflow = TextOverflow.Ellipsis
|
overflow = TextOverflow.Ellipsis
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -37,7 +37,6 @@ internal fun NextUpCard(
|
|||||||
Surface(
|
Surface(
|
||||||
shape = RoundedCornerShape(24.dp),
|
shape = RoundedCornerShape(24.dp),
|
||||||
color = scheme.surfaceContainer,
|
color = scheme.surfaceContainer,
|
||||||
tonalElevation = 2.dp,
|
|
||||||
modifier = modifier.width(256.dp)
|
modifier = modifier.width(256.dp)
|
||||||
) {
|
) {
|
||||||
Column(
|
Column(
|
||||||
@@ -53,7 +52,7 @@ internal fun NextUpCard(
|
|||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.aspectRatio(16f / 10f)
|
.aspectRatio(16f / 10f)
|
||||||
.background(scheme.surfaceVariant)
|
.background(scheme.surface)
|
||||||
) {
|
) {
|
||||||
PurefinAsyncImage(
|
PurefinAsyncImage(
|
||||||
model = item.episode.heroImageUrl,
|
model = item.episode.heroImageUrl,
|
||||||
@@ -91,7 +90,7 @@ internal fun NextUpCard(
|
|||||||
.filter { it.isNotBlank() }
|
.filter { it.isNotBlank() }
|
||||||
.joinToString(" • "),
|
.joinToString(" • "),
|
||||||
style = MaterialTheme.typography.bodySmall,
|
style = MaterialTheme.typography.bodySmall,
|
||||||
color = scheme.onSurfaceVariant,
|
color = scheme.onSurface,
|
||||||
maxLines = 1,
|
maxLines = 1,
|
||||||
overflow = TextOverflow.Ellipsis
|
overflow = TextOverflow.Ellipsis
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -32,7 +32,6 @@ internal fun HomeSearchResultCard(
|
|||||||
Surface(
|
Surface(
|
||||||
shape = RoundedCornerShape(22.dp),
|
shape = RoundedCornerShape(22.dp),
|
||||||
color = scheme.surfaceContainer,
|
color = scheme.surfaceContainer,
|
||||||
tonalElevation = 2.dp,
|
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.clip(RoundedCornerShape(22.dp))
|
.clip(RoundedCornerShape(22.dp))
|
||||||
|
|||||||
@@ -28,7 +28,6 @@ internal fun SearchMessage(
|
|||||||
Surface(
|
Surface(
|
||||||
shape = RoundedCornerShape(24.dp),
|
shape = RoundedCornerShape(24.dp),
|
||||||
color = MaterialTheme.colorScheme.surfaceContainerHigh,
|
color = MaterialTheme.colorScheme.surfaceContainerHigh,
|
||||||
tonalElevation = 1.dp,
|
|
||||||
modifier = Modifier.fillMaxWidth()
|
modifier = Modifier.fillMaxWidth()
|
||||||
) {
|
) {
|
||||||
Box(
|
Box(
|
||||||
|
|||||||
@@ -33,7 +33,6 @@ fun HomeEmptyState(
|
|||||||
Surface(
|
Surface(
|
||||||
shape = RoundedCornerShape(30.dp),
|
shape = RoundedCornerShape(30.dp),
|
||||||
color = scheme.surfaceContainerLow,
|
color = scheme.surfaceContainerLow,
|
||||||
tonalElevation = 2.dp,
|
|
||||||
modifier = modifier.padding(horizontal = 16.dp)
|
modifier = modifier.padding(horizontal = 16.dp)
|
||||||
) {
|
) {
|
||||||
Column(
|
Column(
|
||||||
|
|||||||
Reference in New Issue
Block a user