UI Refinement

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

@@ -9,8 +9,10 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import com.droidspaces.app.R
 import com.droidspaces.app.ui.theme.ThemePalette
 
 /**
@@ -37,7 +39,7 @@ fun AccentColorPicker(
             },
             headlineContent = {
                 Text(
-                    text = "Accent Color",
+                    text = stringResource(R.string.accent_color),
                     style = MaterialTheme.typography.titleMedium,
                     fontWeight = FontWeight.SemiBold
                 )

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

@@ -199,7 +199,7 @@ fun ContainerCard(
                     .fillMaxWidth()
                     .padding(horizontal = 4.dp),
                 color = MaterialTheme.colorScheme.surfaceContainerHigh, // Depth for secondary actions
-                shape = RoundedCornerShape(12.dp),
+                shape = RoundedCornerShape(20.dp),
                 border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.2f))
             ) {
                 Row(modifier = Modifier.fillMaxWidth().padding(4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp)) {

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

@@ -1,5 +1,7 @@
 package com.droidspaces.app.ui.component
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -8,6 +10,9 @@ import androidx.compose.material.icons.filled.Check
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.font.FontWeight
@@ -30,9 +35,9 @@ fun <T> DsDropdown(
     var expanded by remember { mutableStateOf(false) }
     val focusManager = LocalFocusManager.current
 
-    val fieldShape = RoundedCornerShape(16.dp)
+    val fieldShape = RoundedCornerShape(20.dp)
     val fieldColors = OutlinedTextFieldDefaults.colors(
-        unfocusedBorderColor = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f),
+        unfocusedBorderColor = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f),
         focusedBorderColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.8f),
         unfocusedContainerColor = MaterialTheme.colorScheme.surfaceContainerLow,
         focusedContainerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
@@ -63,32 +68,52 @@ fun <T> DsDropdown(
                 .menuAnchor()
                 .fillMaxWidth()
         )
-        ExposedDropdownMenu(
-            expanded = expanded,
-            onDismissRequest = { 
-                expanded = false
-                focusManager.clearFocus()
-            }
+        val isDark = MaterialTheme.colorScheme.background.luminance() < 0.5f
+        val dropdownColor = if (isDark) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.surfaceContainer
+
+        MaterialTheme(
+            colorScheme = MaterialTheme.colorScheme.copy(
+                surface = dropdownColor,
+                surfaceContainer = dropdownColor,
+                surfaceTint = Color.Transparent
+            ),
+            shapes = MaterialTheme.shapes.copy(
+                extraSmall = RoundedCornerShape(20.dp)
+            )
         ) {
-            options.forEach { option ->
-                DropdownMenuItem(
-                    text = { Text(displayName(option), fontWeight = FontWeight.Medium) },
-                    onClick = {
-                        onSelect(option)
-                        expanded = false
-                        focusManager.clearFocus()
-                    },
-                    leadingIcon = if (option == selected) {
-                        {
-                            Icon(
-                                Icons.Default.Check,
-                                contentDescription = null,
-                                modifier = Modifier.size(18.dp),
-                                tint = MaterialTheme.colorScheme.primary
-                            )
-                        }
-                    } else null
-                )
+            ExposedDropdownMenu(
+                expanded = expanded,
+                onDismissRequest = { 
+                    expanded = false
+                    focusManager.clearFocus()
+                },
+                modifier = Modifier
+                    .border(
+                        width = 1.dp,
+                        color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f),
+                        shape = RoundedCornerShape(20.dp)
+                    )
+            ) {
+                options.forEach { option ->
+                    DropdownMenuItem(
+                        text = { Text(displayName(option), fontWeight = FontWeight.Medium) },
+                        onClick = {
+                            onSelect(option)
+                            expanded = false
+                            focusManager.clearFocus()
+                        },
+                        leadingIcon = if (option == selected) {
+                            {
+                                Icon(
+                                    Icons.Default.Check,
+                                    contentDescription = null,
+                                    modifier = Modifier.size(18.dp),
+                                    tint = MaterialTheme.colorScheme.primary
+                                )
+                            }
+                        } else null
+                    )
+                }
             }
         }
     }

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

@@ -2,14 +2,10 @@ package com.droidspaces.app.ui.component
 
 import android.content.Intent
 import android.net.Uri
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -26,20 +22,12 @@ fun HelpCard(
     val url = context.getString(R.string.help_card_url)
     val cardShape = RoundedCornerShape(20.dp)
 
-    val interactionSource = remember { MutableInteractionSource() }
-
     Surface(
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(cardShape)
-            .clickable(
-                interactionSource = interactionSource,
-                indication = rememberRipple(bounded = true),
-                onClick = {
-                    val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
-                    context.startActivity(intent)
-                }
-            ),
+        onClick = {
+            val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
+            context.startActivity(intent)
+        },
+        modifier = modifier.fillMaxWidth(),
         shape = cardShape,
         color = MaterialTheme.colorScheme.surfaceContainer,
         border = androidx.compose.foundation.BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f))

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

@@ -33,7 +33,7 @@ fun SettingsRowCard(
         enabled = enabled,
         shape = RoundedCornerShape(20.dp),
         color = MaterialTheme.colorScheme.surfaceContainerHigh,
-        border = androidx.compose.foundation.BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f))
+        border = androidx.compose.foundation.BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f))
     ) {
         Row(
             modifier = Modifier

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

@@ -24,6 +24,7 @@ fun SwitchItem(
     val stateAlpha = Modifier.alpha(if (enabled) 1f else 0.5f)
 
     ListItem(
+        colors = ListItemDefaults.colors(containerColor = androidx.compose.ui.graphics.Color.Transparent),
         modifier = Modifier
             .toggleable(
                 value = checked,
@@ -52,7 +53,7 @@ fun SwitchItem(
             Switch(
                 checked = checked,
                 enabled = enabled,
-                onCheckedChange = onCheckedChange,
+                onCheckedChange = null,
                 interactionSource = interactionSource,
                 colors = SwitchDefaults.colors(
                     checkedThumbColor = MaterialTheme.colorScheme.onPrimary,

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

@@ -34,7 +34,7 @@ fun ToggleCard(
         enabled = enabled,
         shape = RoundedCornerShape(20.dp),
         color = MaterialTheme.colorScheme.surfaceContainerHigh,
-        border = androidx.compose.foundation.BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f))
+        border = androidx.compose.foundation.BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f))
     ) {
         Row(
             modifier = Modifier
@@ -81,7 +81,7 @@ fun ToggleCard(
             }
             Switch(
                 checked = checked,
-                onCheckedChange = onCheckedChange,
+                onCheckedChange = null,
                 enabled = enabled,
                 colors = SwitchDefaults.colors(
                     checkedThumbColor = MaterialTheme.colorScheme.onPrimary,

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

@@ -18,6 +18,7 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
@@ -401,12 +402,34 @@ private fun OpenRCServiceCard(
                                 ) {
                                     Box(contentAlignment = Alignment.Center) { Icon(Icons.Default.MoreVert, null, tint = MaterialTheme.colorScheme.onSurfaceVariant) }
                                 }
-                                DropdownMenu(expanded = showMenu, onDismissRequest = { showMenu = false }) {
-                                    DropdownMenuItem(
-                                        text = { Text(context.getString(R.string.restart_service)) },
-                                        leadingIcon = { Icon(Icons.Default.Refresh, null) },
-                                        onClick = { showMenu = false; onAction(context.getString(R.string.restart_service)) { ContainerOpenRCManager.restartService(containerName, service.name) } }
+                                val isDark = MaterialTheme.colorScheme.background.luminance() < 0.5f
+                                val dropdownColor = if (isDark) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.surfaceContainer
+                                MaterialTheme(
+                                    colorScheme = MaterialTheme.colorScheme.copy(
+                                        surface = dropdownColor,
+                                        surfaceContainer = dropdownColor,
+                                        surfaceTint = Color.Transparent
+                                    ),
+                                    shapes = MaterialTheme.shapes.copy(
+                                        extraSmall = RoundedCornerShape(20.dp)
                                     )
+                                ) {
+                                    DropdownMenu(
+                                        expanded = showMenu,
+                                        onDismissRequest = { showMenu = false },
+                                        modifier = Modifier
+                                            .border(
+                                                width = 1.dp,
+                                                color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f),
+                                                shape = RoundedCornerShape(20.dp)
+                                            )
+                                    ) {
+                                        DropdownMenuItem(
+                                            text = { Text(context.getString(R.string.restart_service)) },
+                                            leadingIcon = { Icon(Icons.Default.Refresh, null) },
+                                            onClick = { showMenu = false; onAction(context.getString(R.string.restart_service)) { ContainerOpenRCManager.restartService(containerName, service.name) } }
+                                        )
+                                    }
                                 }
                             }
                         }

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

@@ -18,6 +18,7 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
@@ -404,19 +405,41 @@ private fun ProcdServiceCard(
                             ) {
                                 Box(contentAlignment = Alignment.Center) { Icon(Icons.Default.MoreVert, null, tint = MaterialTheme.colorScheme.onSurfaceVariant) }
                             }
-                            DropdownMenu(expanded = showMenu, onDismissRequest = { showMenu = false }) {
-                                DropdownMenuItem(
-                                    text = { Text(context.getString(R.string.restart_service)) },
-                                    leadingIcon = { Icon(Icons.Default.Refresh, null) },
-                                    onClick = { showMenu = false; onAction(context.getString(R.string.restart_service)) { ContainerProcdManager.restartService(containerName, service.name) } }
-                                )
-                                DropdownMenuItem(
-                                    text = { Text(context.getString(R.string.reload_service)) },
-                                    leadingIcon = { Icon(Icons.Default.Refresh, null) },
-                                    onClick = { showMenu = false; onAction(context.getString(R.string.reload_service)) { ContainerProcdManager.reloadService(containerName, service.name) } }
-                                )
+                                val isDark = MaterialTheme.colorScheme.background.luminance() < 0.5f
+                                val dropdownColor = if (isDark) MaterialTheme.colorScheme.surfaceContainerHigh else MaterialTheme.colorScheme.surfaceContainer
+                                MaterialTheme(
+                                    colorScheme = MaterialTheme.colorScheme.copy(
+                                        surface = dropdownColor,
+                                        surfaceContainer = dropdownColor,
+                                        surfaceTint = Color.Transparent
+                                    ),
+                                    shapes = MaterialTheme.shapes.copy(
+                                        extraSmall = RoundedCornerShape(20.dp)
+                                    )
+                                ) {
+                                    DropdownMenu(
+                                        expanded = showMenu,
+                                        onDismissRequest = { showMenu = false },
+                                        modifier = Modifier
+                                            .border(
+                                                width = 1.dp,
+                                                color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f),
+                                                shape = RoundedCornerShape(20.dp)
+                                            )
+                                    ) {
+                                        DropdownMenuItem(
+                                            text = { Text(context.getString(R.string.restart_service)) },
+                                            leadingIcon = { Icon(Icons.Default.Refresh, null) },
+                                            onClick = { showMenu = false; onAction(context.getString(R.string.restart_service)) { ContainerProcdManager.restartService(containerName, service.name) } }
+                                        )
+                                        DropdownMenuItem(
+                                            text = { Text(context.getString(R.string.reload_service)) },
+                                            leadingIcon = { Icon(Icons.Default.Refresh, null) },
+                                            onClick = { showMenu = false; onAction(context.getString(R.string.reload_service)) { ContainerProcdManager.reloadService(containerName, service.name) } }
+                                        )
+                                    }
+                                }
                             }
-                        }
                     }
                 }
             }