UI Improvements #3

.gitignore

@@ -12,6 +12,7 @@ output/
 .claude
 Android/app/src/main/assets/binaries/
 Android/app/src/main/assets/supported_locales.txt
+md3/
 
 # Keystores
 *.keystore
@@ -25,4 +26,4 @@ compile_commands.json
 *.qcow2
 
 # Android stuff
-.gradle
+.gradle

Android/app/src/main/java/com/droidspaces/app/ui/component/ContainerConfigForm.kt

@@ -141,8 +141,7 @@ fun ContainerConfigForm(
         ) {
             Surface(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 24.dp)
+                    .fillMaxWidth(0.92f)
                     .imePadding(),
                 shape = RoundedCornerShape(24.dp),
                 color = MaterialTheme.colorScheme.surfaceContainer,
@@ -168,43 +167,19 @@ fun ContainerConfigForm(
                         Text(context.getString(R.string.read_only), style = MaterialTheme.typography.bodyMedium)
                         Switch(checked = roEnabled, onCheckedChange = { roEnabled = it })
                     }
-                    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-                        Surface(
-                            modifier = Modifier.weight(1f).clip(RoundedCornerShape(14.dp)).clickable(onClick = { clearFocus(); showDestDialog = false }),
-                            shape = RoundedCornerShape(14.dp),
-                            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f),
-                            border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.4f)),
-                            tonalElevation = 0.dp
-                        ) {
-                            Box(modifier = Modifier.padding(14.dp), contentAlignment = Alignment.Center) {
-                                Text(context.getString(R.string.cancel), style = MaterialTheme.typography.labelLarge, fontWeight = FontWeight.SemiBold)
+                    DialogFooterRow(
+                        dismissLabel = context.getString(R.string.cancel),
+                        confirmLabel = context.getString(R.string.ok),
+                        onDismiss = { clearFocus(); showDestDialog = false },
+                        onConfirm = {
+                            clearFocus()
+                            if (destPath.isNotBlank()) {
+                                onStateChange(state.copy(bindMounts = state.bindMounts + BindMount(tempSrcPath, destPath, roEnabled)))
+                                showDestDialog = false
                             }
-                        }
-                        Surface(
-                            modifier = Modifier.weight(1f).clip(RoundedCornerShape(14.dp)).clickable(
-                                enabled = destPath.startsWith("/"),
-                                onClick = {
-                                    clearFocus()
-                                    if (destPath.isNotBlank()) {
-                                        onStateChange(state.copy(bindMounts = state.bindMounts + BindMount(tempSrcPath, destPath, roEnabled)))
-                                        showDestDialog = false
-                                    }
-                                }
-                            ),
-                            shape = RoundedCornerShape(14.dp),
-                            color = if (destPath.startsWith("/")) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
-                            tonalElevation = 0.dp
-                        ) {
-                            Box(modifier = Modifier.padding(14.dp), contentAlignment = Alignment.Center) {
-                                Text(
-                                    context.getString(R.string.ok),
-                                    style = MaterialTheme.typography.labelLarge,
-                                    fontWeight = FontWeight.SemiBold,
-                                    color = if (destPath.startsWith("/")) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
-                                )
-                            }
-                        }
-                    }
+                        },
+                        confirmEnabled = destPath.startsWith("/")
+                    )
                 }
             }
         }

Android/app/src/main/java/com/droidspaces/app/ui/component/DialogFooterRow.kt

@@ -32,38 +32,56 @@ fun DialogFooterRow(
     confirmLabel: String,
     onDismiss: () -> Unit,
     onConfirm: () -> Unit,
-    modifier: Modifier = Modifier,
+    modifier: Modifier = Modifier.padding(vertical = 4.dp),
     confirmEnabled: Boolean = true,
     cancelBorderAlpha: Float = 0.4f,
     textFontWeight: FontWeight = FontWeight.SemiBold,
     confirmColor: Color = MaterialTheme.colorScheme.primary,
     confirmContentColor: Color = MaterialTheme.colorScheme.onPrimary,
 ) {
-    Row(modifier = modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-        Surface(
-            modifier = Modifier.weight(1f).clip(RoundedCornerShape(14.dp)).clickable(onClick = onDismiss),
-            shape = RoundedCornerShape(14.dp),
-            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f),
-            border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = cancelBorderAlpha)),
-            tonalElevation = 0.dp
+    Surface(
+        modifier = modifier.fillMaxWidth(),
+        color = MaterialTheme.colorScheme.surfaceContainerHigh,
+        shape = RoundedCornerShape(20.dp),
+        border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.2f))
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp).fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(4.dp)
         ) {
-            Box(modifier = Modifier.padding(14.dp), contentAlignment = Alignment.Center) {
-                Text(dismissLabel, style = MaterialTheme.typography.labelLarge, fontWeight = textFontWeight)
+            // Dismiss/Cancel Button
+            Surface(
+                onClick = onDismiss,
+                modifier = Modifier.weight(1f),
+                shape = RoundedCornerShape(16.dp),
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f),
+                border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = cancelBorderAlpha))
+            ) {
+                Box(modifier = Modifier.padding(vertical = 12.dp), contentAlignment = Alignment.Center) {
+                    Text(
+                        text = dismissLabel,
+                        style = MaterialTheme.typography.labelLarge,
+                        fontWeight = textFontWeight
+                    )
+                }
             }
-        }
-        Surface(
-            modifier = Modifier.weight(1f).clip(RoundedCornerShape(14.dp)).clickable(enabled = confirmEnabled, onClick = onConfirm),
-            shape = RoundedCornerShape(14.dp),
-            color = if (confirmEnabled) confirmColor else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
-            tonalElevation = 0.dp
-        ) {
-            Box(modifier = Modifier.padding(14.dp), contentAlignment = Alignment.Center) {
-                Text(
-                    confirmLabel,
-                    style = MaterialTheme.typography.labelLarge,
-                    fontWeight = textFontWeight,
-                    color = if (confirmEnabled) confirmContentColor else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
-                )
+
+            // Confirm/OK Button
+            Surface(
+                onClick = onConfirm,
+                enabled = confirmEnabled,
+                modifier = Modifier.weight(1f),
+                shape = RoundedCornerShape(16.dp),
+                color = if (confirmEnabled) confirmColor else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
+            ) {
+                Box(modifier = Modifier.padding(vertical = 12.dp), contentAlignment = Alignment.Center) {
+                    Text(
+                        text = confirmLabel,
+                        style = MaterialTheme.typography.labelLarge,
+                        fontWeight = textFontWeight,
+                        color = if (confirmEnabled) confirmContentColor else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
+                    )
+                }
             }
         }
     }

Android/app/src/main/java/com/droidspaces/app/ui/component/HardwareAccessDialog.kt

@@ -34,7 +34,7 @@ fun HardwareAccessDialog(
     ) {
         Surface(
             modifier = Modifier
-                .fillMaxWidth(0.95f)
+                .fillMaxWidth(0.92f)
                 .wrapContentHeight(),
             shape = RoundedCornerShape(24.dp),
             color = MaterialTheme.colorScheme.surfaceContainer,

Android/app/src/main/java/com/droidspaces/app/ui/component/PrivilegedModeDialog.kt

@@ -76,7 +76,7 @@ fun PrivilegedModeDialog(
     ) {
         Surface(
             modifier = Modifier
-                .fillMaxWidth(0.95f)
+                .fillMaxWidth(0.92f)
                 .wrapContentHeight(),
             shape = RoundedCornerShape(24.dp),
             color = MaterialTheme.colorScheme.surfaceContainer,

Android/app/src/main/java/com/droidspaces/app/ui/component/RootfsRepoSheet.kt

@@ -22,6 +22,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -486,10 +487,10 @@ private fun RootfsAssetCard(
                         progress = { state.percent / 100f },
                         modifier = Modifier
                             .fillMaxWidth()
-                            .height(4.dp)
-                            .clip(RoundedCornerShape(2.dp)),
+                            .height(4.dp),
                         color = MaterialTheme.colorScheme.tertiary, // Match state pill
-                        trackColor = MaterialTheme.colorScheme.tertiary.copy(alpha = 0.15f)
+                        trackColor = MaterialTheme.colorScheme.tertiary.copy(alpha = 0.15f),
+                        strokeCap = StrokeCap.Round
                     )
                     Text(
                         text = "${state.percent}%",

Android/app/src/main/java/com/droidspaces/app/ui/screen/ContainerDetailsScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -548,9 +549,10 @@ private fun SparseDiskUsageCard(
                 progress = { animatedFraction },
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(8.dp)
-                    .clip(RoundedCornerShape(4.dp)),
-                trackColor = MaterialTheme.colorScheme.surfaceVariant
+                    .height(8.dp),
+                color = MaterialTheme.colorScheme.primary,
+                trackColor = MaterialTheme.colorScheme.surfaceVariant,
+                strokeCap = StrokeCap.Round
             )
         }
     }