refactor: replace Surface with Card components for improved UI consistency

app/src/main/java/hu/bbara/purefin/ui/screen/home/components/HomeEmptyState.kt

@@ -10,11 +10,12 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Collections
 import androidx.compose.material.icons.outlined.Refresh
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -31,9 +32,9 @@ fun HomeEmptyState(
 ) {
     val scheme = MaterialTheme.colorScheme
 
-    Surface(
+    Card(
         shape = RoundedCornerShape(30.dp),
-        color = scheme.surfaceContainerLow,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainerLow),
         modifier = modifier.padding(horizontal = 16.dp)
     ) {
         Column(

app/src/main/java/hu/bbara/purefin/ui/screen/home/components/continuewatching/ContinueWatchingCard.kt

@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.continuewatching
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,8 +10,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -35,16 +35,13 @@ internal fun ContinueWatchingCard(
 ) {
     val scheme = MaterialTheme.colorScheme
 
-    Surface(
+    Card(
+        onClick = { onMediaSelected(item) },
         shape = RoundedCornerShape(26.dp),
-        color = scheme.surfaceContainer,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainer),
         modifier = modifier.width(280.dp)
     ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable { onMediaSelected(item) }
-        ) {
+        Column(modifier = Modifier.fillMaxWidth()) {
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -93,7 +90,7 @@ internal fun ContinueWatchingCard(
                 Text(
                     text = item.secondaryText,
                     style = MaterialTheme.typography.bodySmall,
-                    color = scheme.onSurface,
+                    color = scheme.onSurfaceVariant,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
                 )

app/src/main/java/hu/bbara/purefin/ui/screen/home/components/featured/SuggestionCard.kt

@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.featured
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,13 +10,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
@@ -37,13 +36,12 @@ internal fun SuggestionCard(
     val scheme = MaterialTheme.colorScheme
     val description = item.description.trim()
 
-    Surface(
-        color = scheme.surfaceContainerLow,
+    ElevatedCard(
+        onClick = onClick,
+        colors = CardDefaults.elevatedCardColors(containerColor = scheme.surfaceContainerLow),
+        elevation = CardDefaults.elevatedCardElevation(defaultElevation = 1.dp),
         shape = RoundedCornerShape(30.dp),
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(RoundedCornerShape(30.dp))
-            .clickable(onClick = onClick)
+        modifier = modifier.fillMaxWidth()
     ) {
         Box(
             modifier = Modifier

app/src/main/java/hu/bbara/purefin/ui/screen/home/components/library/HomeBrowseCard.kt

@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.library
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -12,8 +11,9 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -37,16 +37,13 @@ internal fun HomeBrowseCard(
 ) {
     val scheme = MaterialTheme.colorScheme
 
-    Surface(
+    Card(
+        onClick = { onMediaSelected(uiModel) },
         shape = RoundedCornerShape(12.dp),
-        color = scheme.surfaceContainer,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainer),
         modifier = modifier.width(188.dp)
     ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable { onMediaSelected(uiModel) }
-        ) {
+        Column(modifier = Modifier.fillMaxWidth()) {
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -75,7 +72,7 @@ internal fun HomeBrowseCard(
                 }
             }
             Spacer(modifier = Modifier.height(10.dp))
-            Column(modifier = modifier.padding(12.dp)) {
+            Column(modifier = Modifier.padding(12.dp)) {
                 Text(
                     text = uiModel.primaryText,
                     style = MaterialTheme.typography.bodyLarge,
@@ -87,7 +84,7 @@ internal fun HomeBrowseCard(
                 Text(
                     text = uiModel.secondaryText,
                     style = MaterialTheme.typography.bodySmall,
-                    color = scheme.onSurface,
+                    color = scheme.onSurfaceVariant,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
                 )

app/src/main/java/hu/bbara/purefin/ui/screen/home/components/nextup/NextUpCard.kt

@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.nextup
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,8 +10,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -33,16 +33,13 @@ internal fun NextUpCard(
 ) {
     val scheme = MaterialTheme.colorScheme
 
-    Surface(
+    Card(
+        onClick = { onMediaSelected(uiModel) },
         shape = RoundedCornerShape(24.dp),
-        color = scheme.surfaceContainer,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainer),
         modifier = modifier.width(256.dp)
     ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable { onMediaSelected(uiModel) }
-        ) {
+        Column(modifier = Modifier.fillMaxWidth()) {
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -83,7 +80,7 @@ internal fun NextUpCard(
                 Text(
                     text = uiModel.secondaryText,
                     style = MaterialTheme.typography.bodySmall,
-                    color = scheme.onSurface,
+                    color = scheme.onSurfaceVariant,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
                 )