🔧 updated lyrics customisation page ui

Author: shub39

app/src/main/java/com/shub39/rush/presentation/ListItemExt.kt

@@ -29,7 +29,7 @@ private const val endCornerRadius = 16
 
 @Composable
 fun listItemColors(): ListItemColors {
-    return ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
+    return ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainerHighest)
 }
 
 fun leadingItemShape(): Shape =

app/src/main/java/com/shub39/rush/presentation/components/ListItemCard.kt

@@ -0,0 +1,32 @@
+package com.shub39.rush.presentation.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ListItemCard(
+    modifier: Modifier = Modifier,
+    shape: Shape = RoundedCornerShape(4.dp),
+    colors: CardColors = CardDefaults.cardColors(),
+    content: @Composable (ColumnScope.() -> Unit)
+) {
+    Card(
+        modifier = modifier,
+        shape = shape,
+        colors = colors,
+    ) {
+        Column(
+            modifier = Modifier.padding(16.dp),
+            content = content
+        )
+    }
+}

app/src/main/java/com/shub39/rush/presentation/components/ListSelect.kt

@@ -57,23 +57,21 @@ fun <T> ListSelect(
 ) {
     Column(
         modifier = modifier.fillMaxWidth(),
-        horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(8.dp),
     ) {
         Text(
             text = title,
-            style = MaterialTheme.typography.titleLarge,
-            textAlign = TextAlign.Center,
+            style = MaterialTheme.typography.titleMedium,
         )
 
-        FlowRow(horizontalArrangement = Arrangement.Center) {
+        FlowRow {
             options.forEach { option ->
                 ToggleButton(
                     checked = option == selected,
                     onCheckedChange = { onSelectedChange(option) },
                     content = { labelProvider(option) },
                     colors = ToggleButtonDefaults.tonalToggleButtonColors(),
-                    modifier = Modifier.padding(horizontal = 4.dp),
+                    modifier = Modifier.padding(horizontal = 2.dp),
                 )
             }
         }