Updated banner style

kmp/src/commonMain/kotlin/org/tasks/compose/components/AnimatedBanner.kt

@@ -1,19 +1,16 @@
-@file:OptIn(ExperimentalAnimationApi::class)
-
 package org.tasks.compose.components
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Card
+import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -56,63 +53,41 @@ fun Banner(
     action: String,
     onAction: () -> Unit,
 ) {
-    Banner(
-        content = {
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        shape = MaterialTheme.shapes.extraLarge,
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        tonalElevation = 6.dp,
+    ) {
+        Column(
+            modifier = Modifier.padding(24.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
             Text(
                 text = title,
-                style = MaterialTheme.typography.bodyLarge,
-                modifier = Modifier.padding(horizontal = 16.dp),
+                style = MaterialTheme.typography.headlineSmall,
                 color = MaterialTheme.colorScheme.onSurface,
             )
-            Spacer(modifier = Modifier.height(4.dp))
             Text(
                 text = body,
                 style = MaterialTheme.typography.bodyMedium,
-                modifier = Modifier.padding(horizontal = 16.dp),
-                color = MaterialTheme.colorScheme.onSurface,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
             )
-        },
-        buttons = {
-            dismissText?.let {
-                BannerTextButton(text = it, onDismiss)
+            Row(
+                modifier = Modifier.align(Alignment.End),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                dismissText?.let {
+                    TextButton(onClick = onDismiss) {
+                        Text(text = it)
+                    }
+                }
+                Button(onClick = onAction) {
+                    Text(text = action)
+                }
             }
-            BannerTextButton(text = action, onAction)
-        }
-    )
-}
-
-@ExperimentalAnimationApi
-@Composable
-private fun Banner(
-    content: @Composable () -> Unit,
-    buttons: @Composable () -> Unit,
-) {
-    Card(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp)
-    ) {
-        Spacer(modifier = Modifier.height(16.dp))
-        content()
-        Row(
-            modifier = Modifier
-                .padding(vertical = 8.dp, horizontal = 16.dp)
-                .align(Alignment.End),
-            horizontalArrangement = Arrangement.spacedBy(8.dp)
-        ) {
-            buttons()
         }
     }
 }
-
-@Composable
-fun BannerTextButton(text: String, onClick: () -> Unit) {
-    TextButton(onClick = onClick) {
-        Text(
-            text = text,
-            style = MaterialTheme.typography.labelLarge.copy(
-                color = MaterialTheme.colorScheme.onSurface
-            ),
-        )
-    }
-}