Merge pull request #636 from mike-n-jordan/setup_embedding_cake_app_i…

…n_landing_attempt_2

Rescale the buttons and checkout screen.

demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/cakes/CakeDetailsSheet.kt

@@ -63,7 +63,10 @@ fun CakeDetailsSheet(
                             contentDescription = "Add to cart",
                         )
                         Spacer(Modifier.width(4.dp))
-                        Text("Add to cart")
+                        Text(
+                            text = "Add to cart",
+                            style = MaterialTheme.typography.bodyMedium,
+                        )
                     }
                 }
             }

demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/checkout/CartContent.kt

@@ -10,13 +10,16 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.requiredWidth
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.shape.CircleShape
@@ -43,7 +46,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import com.bumble.appyx.navigation.collections.ImmutableList
 import com.bumble.appyx.navigation.collections.ImmutableMap
 import com.bumble.appyx.navigation.node.cakes.Cake
 import com.bumble.appyx.navigation.ui.EmbeddableResourceImage
@@ -180,7 +182,7 @@ private fun CardItem(
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(16.dp),
+                .padding(4.dp),
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Box(modifier = Modifier.size(50.dp)) {
@@ -233,12 +235,19 @@ private fun ActionButton(
     action: (Cake) -> Unit,
 ) {
     Button(
-        modifier = Modifier.size(24.dp),
+        modifier = Modifier
+            .heightIn(min = 12.dp, max = 24.dp)
+            .widthIn(min = 12.dp, max = 24.dp)
+            .aspectRatio(1f),
         onClick = { action(cake) },
         contentPadding = PaddingValues(0.dp),
         shape = CircleShape,
     ) {
-        Text(text = text, fontWeight = FontWeight.Bold)
+        Text(
+            text = text,
+            fontWeight = FontWeight.Bold,
+            style = MaterialTheme.typography.bodyMedium,
+        )
     }
 }
 
@@ -258,14 +267,20 @@ private fun LazyItemScope.CartActions(
             onClick = onClearCart,
             colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.secondary)
         ) {
-            Text("Clear cart")
+            Text(
+                text = "Clear cart",
+                style = MaterialTheme.typography.bodySmall
+            )
         }
         Spacer(modifier = Modifier.requiredWidth(4.dp))
         Button(
             onClick = onCheckout,
             modifier = Modifier.weight(1f)
         ) {
-            Text("Checkout")
+            Text(
+                text = "Checkout",
+                style = MaterialTheme.typography.bodySmall
+            )
         }
     }
 }

demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/checkout/CartItemsNode.kt

@@ -80,7 +80,10 @@ class CartItemsNode(
             Button(onClick = {
                 navigator.goToCakes()
             }) {
-                Text("Get some cakes!")
+                Text(
+                    text = "Get some cakes!",
+                    style = MaterialTheme.typography.bodyMedium,
+                )
             }
         }
     }

demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/home/HomeNode.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
@@ -31,17 +32,25 @@ class HomeNode(
         ) {
             val navigator = LocalNavigator.current
 
-            Column {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
                 Text(
                     text = "Navigator demo",
                     style = MaterialTheme.typography.headlineSmall,
-                    textAlign = TextAlign.Center
+                    textAlign = TextAlign.Center,
                 )
                 Spacer(Modifier.size(16.dp))
-                Button(onClick = {
-                    navigator.goToARandomCake()
-                }) {
-                    Text("Go to a random cake")
+                Button(
+                    onClick = {
+                        navigator.goToARandomCake()
+                    },
+                ) {
+                    Text(
+                        text = "Go to a random cake",
+                        style = MaterialTheme.typography.bodyMedium,
+                    )
                 }
             }
         }

demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/loggedout/LoggedOutNode.kt

@@ -110,6 +110,7 @@ class LoggedOutNode(
                 ) {
                     Text(
                         text = "Log in",
+                        style = MaterialTheme.typography.bodyMedium,
                     )
                 }
             }

demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/profile/ProfileNode.kt

@@ -62,6 +62,7 @@ class ProfileNode(
                     ) {
                         Text(
                             text = "Log out",
+                            style = MaterialTheme.typography.bodyMedium,
                         )
                     }
                 }

demos/appyx-navigation/web/src/jsMain/kotlin/com/bumble/appyx/navigation/WebTypography.kt

@@ -6,15 +6,15 @@ import com.bumble.appyx.navigation.ui.typography
 
 internal val webTypography = typography.copy(
     bodySmall = typography.bodySmall.copy(
-        fontSize = 4.sp,
+        fontSize = 8.sp,
         fontFamily = FontFamily.SansSerif,
     ),
     bodyMedium = typography.bodyMedium.copy(
-        fontSize = 6.sp,
+        fontSize = 10.sp,
         fontFamily = FontFamily.SansSerif,
     ),
     bodyLarge = typography.bodyLarge.copy(
-        fontSize = 8.sp,
+        fontSize = 12.sp,
         fontFamily = FontFamily.SansSerif,
     ),
     titleSmall = typography.titleSmall.copy(
@@ -30,15 +30,15 @@ internal val webTypography = typography.copy(
         fontFamily = FontFamily.SansSerif,
     ),
     headlineSmall = typography.headlineSmall.copy(
-        fontSize = 12.sp,
+        fontSize = 14.sp,
         fontFamily = FontFamily.SansSerif,
     ),
     headlineMedium = typography.headlineMedium.copy(
-        fontSize = 14.sp,
+        fontSize = 16.sp,
         fontFamily = FontFamily.SansSerif,
     ),
     headlineLarge = typography.headlineLarge.copy(
-        fontSize = 16.sp,
+        fontSize = 18.sp,
         fontFamily = FontFamily.SansSerif,
     ),
 )