From 91f9832e02ab76a1c4cb1c246d26c2578839eb0d Mon Sep 17 00:00:00 2001
From: Sebastiano Poggi <rock3r@users.noreply.github.com>
Date: Fri, 19 Jul 2024 16:39:55 +0200
Subject: [PATCH] Improve borders sample page (#461)

---
 .../standalone/view/component/Borders.kt      | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt
index f088019bc..27f2decc8 100644
--- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt
+++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt
@@ -1,8 +1,11 @@
 package org.jetbrains.jewel.samples.standalone.view.component
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -28,9 +31,13 @@ import org.jetbrains.jewel.ui.theme.colorPalette
 @Composable
 @View("Borders", position = 13, icon = "icons/components/borders.svg")
 internal fun Borders() {
-    GroupHeader("Borders")
-    var borderAlignment by remember { mutableStateOf(Stroke.Alignment.Center) }
+    GroupHeader("Group header")
+    Text("This is a group header example")
+
+    Spacer(Modifier.height(16.dp))
 
+    GroupHeader("Border alignment/expand")
+    var borderAlignment by remember { mutableStateOf(Stroke.Alignment.Center) }
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),
         verticalAlignment = Alignment.CenterVertically,
@@ -82,42 +89,57 @@ internal fun Borders() {
         horizontalArrangement = Arrangement.spacedBy(10.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
+        val isDark = JewelTheme.isDark
+        val colorPalette = JewelTheme.colorPalette
+        val borderColor =
+            remember(isDark) {
+                if (isDark) colorPalette.blue(6) else colorPalette.blue(4)
+            }
+        val backgroundColor =
+            remember(isDark) {
+                if (isDark) colorPalette.grey(4) else colorPalette.grey(11)
+            }
+
         Box(
             Modifier.size(28.dp, 28.dp)
+                .background(backgroundColor, shape = CircleShape)
                 .border(
                     borderAlignment,
                     width,
-                    JewelTheme.colorPalette.blue(4),
+                    borderColor,
                     CircleShape,
                     expand,
                 ),
         )
         Box(
             Modifier.size(72.dp, 28.dp)
+                .background(backgroundColor, shape = RectangleShape)
                 .border(
                     borderAlignment,
                     width,
-                    JewelTheme.colorPalette.blue(4),
+                    borderColor,
                     RectangleShape,
                     expand,
                 ),
         )
         Box(
             Modifier.size(72.dp, 28.dp)
+                .background(backgroundColor, shape = RoundedCornerShape(4.dp))
                 .border(
                     borderAlignment,
                     width,
-                    JewelTheme.colorPalette.blue(4),
+                    borderColor,
                     RoundedCornerShape(4.dp),
                     expand,
                 ),
         )
         Box(
             Modifier.size(72.dp, 28.dp)
+                .background(backgroundColor, shape = RoundedCornerShape(4.dp, 0.dp, 4.dp, 0.dp))
                 .border(
                     borderAlignment,
                     width,
-                    JewelTheme.colorPalette.blue(4),
+                    borderColor,
                     RoundedCornerShape(4.dp, 0.dp, 4.dp, 0.dp),
                     expand,
                 ),