Improve the expand button UX

stadiamaps · Oct 31, 2024 · 59a8b4b · 59a8b4b
1 parent a27dd87
commit 59a8b4b
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/views/InstructionsView.kt b/android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/views/InstructionsView.kt
@@ -5,6 +5,7 @@ import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
@@ -18,7 +19,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material.icons.filled.KeyboardArrowUp
-import androidx.compose.material3.Button
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -27,6 +27,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.tooling.preview.Preview
@@ -106,15 +107,18 @@ fun InstructionsView(
           }
 
           item {
-            Button(onClick = { isExpanded = !isExpanded }, modifier = Modifier.fillMaxWidth()) {
-              Icon(
-                  if (isExpanded) {
-                    Icons.Default.KeyboardArrowUp
-                  } else {
-                    Icons.Default.KeyboardArrowDown
-                  },
-                  contentDescription = "Show upcoming maneuvers")
-            }
+            Box(
+                modifier =
+                    Modifier.height(36.dp).fillMaxWidth().clickable { isExpanded = !isExpanded }) {
+                  Icon(
+                      if (isExpanded) {
+                        Icons.Default.KeyboardArrowUp
+                      } else {
+                        Icons.Default.KeyboardArrowDown
+                      },
+                      modifier = Modifier.align(Alignment.Center),
+                      contentDescription = "Show upcoming maneuvers")
+                }
           }
         }
       }