Update design with expressive theme

app/src/main/java/de/pawcode/cardstore/navigation/Navigation.kt

@@ -55,6 +55,7 @@ fun Navigation(modifier: Modifier = Modifier) {
         snackbar = { snackbarData ->
           Snackbar(
             snackbarData = snackbarData,
+            shape = MaterialTheme.shapes.medium,
             containerColor = MaterialTheme.colorScheme.inverseSurface,
             contentColor = MaterialTheme.colorScheme.inverseOnSurface,
             actionColor = MaterialTheme.colorScheme.inversePrimary,

app/src/main/java/de/pawcode/cardstore/ui/components/AddCardComponent.kt

@@ -30,6 +30,7 @@ fun AddCardComponent(hasCards: Boolean, onClick: () -> Unit) {
     modifier = Modifier.fillMaxWidth().aspectRatio(1.586f).clickable { onClick() },
     colors =
       CardDefaults.outlinedCardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer),
+    shape = MaterialTheme.shapes.large,
   ) {
     Column(
       horizontalAlignment = Alignment.CenterHorizontally,

app/src/main/java/de/pawcode/cardstore/ui/components/AppBar.kt

@@ -5,6 +5,8 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.filled.Sort
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -16,15 +18,21 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import de.pawcode.cardstore.R
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun AppBar(
   title: String,
+  subtitle: String? = null,
   onBack: (() -> Unit)? = null,
   actions: @Composable (RowScope.() -> Unit)? = null,
 ) {
   TopAppBar(
     title = { Text(text = title) },
+    subtitle = {
+      if (subtitle != null) {
+        Text(text = subtitle)
+      }
+    },
     navigationIcon = {
       if (onBack != null) {
         IconButton(onClick = { onBack() }) {
@@ -41,6 +49,7 @@ fun AppBar(
         containerColor = MaterialTheme.colorScheme.primaryContainer,
         navigationIconContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
         titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+        subtitleContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
         actionIconContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
       ),
   )
@@ -57,9 +66,10 @@ fun PreviewAppBar() {
 fun PreviewAppBarActions() {
   AppBar(
     title = "Card Store",
+    subtitle = "My cool card",
     onBack = {},
     actions = {
-      IconButton(onClick = {}) {
+      FilledIconButton(onClick = {}) {
         Icon(
           Icons.AutoMirrored.Filled.Sort,
           contentDescription = stringResource(R.string.cards_sort),

app/src/main/java/de/pawcode/cardstore/ui/components/CardComponent.kt

@@ -44,6 +44,7 @@ fun CardComponent(card: CardEntity, onClick: () -> Unit, onLongPress: () -> Unit
         ),
     elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
     colors = CardDefaults.cardColors(containerColor = color),
+    shape = MaterialTheme.shapes.large,
   ) {
     Column(
       horizontalAlignment = Alignment.CenterHorizontally,

app/src/main/java/de/pawcode/cardstore/ui/components/EditCardForm.kt

@@ -1,5 +1,6 @@
 package de.pawcode.cardstore.ui.components
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -267,6 +268,7 @@ fun EditCardForm(
           val chipSelected =
             label.labelId == card.labels.find { it.labelId == label.labelId }?.labelId
           FilterChip(
+            modifier = Modifier.padding(bottom = 4.dp),
             selected = chipSelected,
             onClick = {
               onCardUpdate(
@@ -282,13 +284,13 @@ fun EditCardForm(
             },
             label = {
               Text(
-                modifier = Modifier.padding(vertical = 8.dp),
+                modifier = Modifier.padding(vertical = 10.dp),
                 text = label.name,
                 style = MaterialTheme.typography.bodyLarge,
               )
             },
             leadingIcon = {
-              if (chipSelected) {
+              AnimatedVisibility(visible = chipSelected) {
                 Icon(Icons.Filled.Check, contentDescription = null)
               }
             },

app/src/main/java/de/pawcode/cardstore/ui/components/LabelsListComponent.kt

@@ -1,5 +1,6 @@
 package de.pawcode.cardstore.ui.components
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -11,9 +12,11 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.EditNote
-import androidx.compose.material3.FilledTonalIconButton
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,6 +30,7 @@ import de.pawcode.cardstore.data.database.entities.EXAMPLE_LABEL
 import de.pawcode.cardstore.data.database.entities.EXAMPLE_LABEL_LIST
 import de.pawcode.cardstore.data.database.entities.LabelEntity
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun LabelsListComponent(
   labels: List<LabelEntity>,
@@ -57,15 +61,16 @@ fun LabelsListComponent(
           FilterChip(
             selected = chipSelected,
             onClick = { onLabelClick(label) },
+            shape = MaterialTheme.shapes.medium,
             label = {
               Text(
-                modifier = Modifier.padding(vertical = 8.dp),
+                modifier = Modifier.padding(vertical = 10.dp),
                 text = label.name,
                 style = MaterialTheme.typography.bodyLarge,
               )
             },
             leadingIcon = {
-              if (chipSelected) {
+              AnimatedVisibility(visible = chipSelected) {
                 Icon(Icons.Filled.Check, contentDescription = null)
               }
             },
@@ -74,11 +79,23 @@ fun LabelsListComponent(
       }
     }
 
-    FilledTonalIconButton(shape = MaterialTheme.shapes.small, onClick = { onEdit() }) {
+    FilledIconButton(
+      modifier =
+        Modifier.padding(start = 8.dp)
+          .size(
+            IconButtonDefaults.smallContainerSize(IconButtonDefaults.IconButtonWidthOption.Wide)
+          ),
+      shapes =
+        IconButtonDefaults.shapes(
+          shape = IconButtonDefaults.smallSquareShape,
+          pressedShape = IconButtonDefaults.smallPressedShape,
+        ),
+      onClick = { onEdit() },
+    ) {
       Icon(
         imageVector = if (labels.isNotEmpty()) Icons.Filled.EditNote else Icons.Filled.Add,
         contentDescription = stringResource(R.string.labels_edit),
-        modifier = Modifier.size(32.dp),
+        modifier = Modifier.size(IconButtonDefaults.smallIconSize),
       )
     }
   }

app/src/main/java/de/pawcode/cardstore/ui/components/SelectDropdownMenu.kt

@@ -1,5 +1,9 @@
 package de.pawcode.cardstore.ui.components
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Sort
 import androidx.compose.material.icons.automirrored.filled.TrendingUp
@@ -9,18 +13,24 @@ import androidx.compose.material.icons.filled.History
 import androidx.compose.material.icons.filled.SortByAlpha
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
 import de.pawcode.cardstore.R
 import de.pawcode.cardstore.data.enums.SortAttribute
 
@@ -30,6 +40,7 @@ data class DropdownOption<TValue : Enum<TValue>>(
   val value: TValue,
 )
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun <TValue : Enum<TValue>> SelectDropdownMenu(
   icon: ImageVector,
@@ -41,25 +52,52 @@ fun <TValue : Enum<TValue>> SelectDropdownMenu(
 ) {
   var dropdownExpanded by remember { mutableStateOf(initiallyExpanded) }
 
-  IconButton(onClick = { dropdownExpanded = !dropdownExpanded }) {
-    Icon(icon, contentDescription = title)
-  }
-  DropdownMenu(expanded = dropdownExpanded, onDismissRequest = { dropdownExpanded = false }) {
-    values.forEach { option ->
-      DropdownMenuItem(
-        text = { Text(text = option.title, maxLines = 1, overflow = TextOverflow.Ellipsis) },
-        leadingIcon = { Icon(imageVector = option.icon, contentDescription = option.title) },
-        trailingIcon = {
-          if (value == option.value) {
-            Icon(Icons.Filled.Check, contentDescription = null)
-          }
-        },
-        onClick = {
-          onValueChange(option.value)
-          dropdownExpanded = false
-        },
+  Box {
+    IconButton(
+      modifier =
+        Modifier.size(
+          IconButtonDefaults.smallContainerSize(IconButtonDefaults.IconButtonWidthOption.Wide)
+        ),
+      onClick = { dropdownExpanded = !dropdownExpanded },
+      shapes =
+        IconButtonDefaults.shapes(
+          shape = IconButtonDefaults.smallRoundShape,
+          pressedShape = IconButtonDefaults.smallPressedShape,
+        ),
+    ) {
+      Icon(
+        icon,
+        contentDescription = title,
+        modifier = Modifier.size(IconButtonDefaults.smallIconSize),
       )
     }
+    DropdownMenu(
+      expanded = dropdownExpanded,
+      onDismissRequest = { dropdownExpanded = false },
+      offset = DpOffset(0.dp, 4.dp),
+      shape = MaterialTheme.shapes.medium,
+      containerColor = MaterialTheme.colorScheme.surfaceVariant,
+    ) {
+      values.forEach { option ->
+        DropdownMenuItem(
+          text = {
+            Text(
+              modifier = Modifier.padding(4.dp),
+              text = option.title,
+              maxLines = 1,
+              overflow = TextOverflow.Ellipsis,
+            )
+          },
+          leadingIcon = { Icon(imageVector = option.icon, contentDescription = option.title) },
+          trailingIcon = {
+            AnimatedVisibility(visible = value === option.value) {
+              Icon(Icons.Filled.Check, contentDescription = null)
+            }
+          },
+          onClick = { onValueChange(option.value) },
+        )
+      }
+    }
   }
 }
 

app/src/main/java/de/pawcode/cardstore/ui/components/SettingsGroup.kt

@@ -24,11 +24,7 @@ fun SettingsGroup(modifier: Modifier = Modifier, title: String, content: @Compos
       modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
     )
 
-    Surface(
-      modifier = Modifier.fillMaxWidth(),
-      color = MaterialTheme.colorScheme.surface,
-      shape = MaterialTheme.shapes.extraLarge,
-    ) {
+    Surface(modifier = Modifier.fillMaxWidth(), shape = MaterialTheme.shapes.extraLarge) {
       Column(verticalArrangement = Arrangement.spacedBy(2.dp)) { content() }
     }
   }
@@ -40,27 +36,24 @@ fun PreviewSettingsGroup() {
   SettingsGroup(title = "About") {
     SettingsItem(
       icon = Icons.Default.Web,
-      iconColor = MaterialTheme.colorScheme.primaryContainer,
-      iconBackground = MaterialTheme.colorScheme.onPrimaryContainer,
+      iconColor = MaterialTheme.colorScheme.onPrimaryFixedVariant,
+      iconBackground = MaterialTheme.colorScheme.primaryFixed,
       title = "pawcode Development",
       subtitle = "View website",
       onClick = {},
     )
     SettingsItem(
       icon = Icons.Default.Web,
-      iconColor = MaterialTheme.colorScheme.secondaryContainer,
-      iconBackground = MaterialTheme.colorScheme.onSecondaryContainer,
+      iconColor = MaterialTheme.colorScheme.onSecondaryFixedVariant,
+      iconBackground = MaterialTheme.colorScheme.secondaryFixed,
       title = "pawcode Development",
-      subtitle = "View website",
-      onClick = {},
     )
     SettingsItem(
       icon = Icons.Default.Web,
-      iconColor = MaterialTheme.colorScheme.tertiaryContainer,
-      iconBackground = MaterialTheme.colorScheme.onTertiaryContainer,
+      iconColor = MaterialTheme.colorScheme.onTertiaryFixedVariant,
+      iconBackground = MaterialTheme.colorScheme.tertiaryFixed,
       title = "pawcode Development",
       subtitle = "View website",
-      onClick = {},
     )
   }
 }