style: unify AlertDialog shape, background and buttons

danwelch3 · Oct 6, 2024 · 0e161d6 · 0e161d6
1 parent 8af225b
commit 0e161d6
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 85 deletions.
diff --git a/app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsFragment.kt b/app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsFragment.kt
@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Button
 import androidx.compose.material.Card
@@ -29,6 +30,7 @@ import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
+import androidx.compose.material.TextButton
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -686,7 +688,9 @@ private fun NavCard(
 private fun NavButton(@StringRes title: Int, enabled: Boolean, onClick: () -> Unit) {
     var showDialog by remember { mutableStateOf(false) }
     if (showDialog) AlertDialog(
-        onDismissRequest = { },
+        onDismissRequest = {},
+        shape = RoundedCornerShape(16.dp),
+        backgroundColor = MaterialTheme.colors.background,
         title = {
             Row(
                 modifier = Modifier.fillMaxWidth(),
@@ -708,11 +712,13 @@ private fun NavButton(@StringRes title: Int, enabled: Boolean, onClick: () -> Un
         },
         buttons = {
             Row(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                Button(
+                TextButton(
                     modifier = Modifier.weight(1f),
                     onClick = { showDialog = false },
                 ) { Text(stringResource(R.string.cancel)) }

diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/DeviceMetrics.kt b/app/src/main/java/com/geeksville/mesh/ui/components/DeviceMetrics.kt
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Card
@@ -312,9 +313,10 @@ private fun DeviceInfoDialog(onDismiss: () -> Unit) {
         onDismissRequest = onDismiss,
         confirmButton = {
             TextButton(onClick = onDismiss) {
-                Text(stringResource(R.string.okay))
+                Text(stringResource(R.string.close))
             }
         },
+        shape = RoundedCornerShape(16.dp),
         backgroundColor = MaterialTheme.colors.background
     )
 }

diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/IndoorAirQuality.kt b/app/src/main/java/com/geeksville/mesh/ui/components/IndoorAirQuality.kt
@@ -15,12 +15,12 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.AlertDialog
-import androidx.compose.material.Button
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
 import androidx.compose.material.LinearProgressIndicator
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.TextButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ThumbUp
 import androidx.compose.material.icons.filled.Warning
@@ -34,9 +34,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.geeksville.mesh.R
 
 enum class Iaq(val color: Color, val description: String) {
     Excellent(Color.Green, "Excellent"),
@@ -173,13 +175,14 @@ fun IndoorAirQuality(iaq: Int, displayMode: IaqDisplayMode = IaqDisplayMode.Pill
         if (isLegendOpen) {
             AlertDialog(
                 onDismissRequest = { isLegendOpen = false },
-                title = { Text("IAQ Scale") },
+                shape = RoundedCornerShape(16.dp),
+                backgroundColor = MaterialTheme.colors.background,
                 text = {
                     IAQScale()
                 },
                 confirmButton = {
-                    Button(onClick = { isLegendOpen = false }) {
-                        Text("Close")
+                    TextButton(onClick = { isLegendOpen = false }) {
+                        Text(text = stringResource(id = R.string.close))
                     }
                 }
             )
@@ -198,8 +201,15 @@ fun IAQScale(modifier: Modifier = Modifier) {
             .padding(16.dp),
         horizontalAlignment = Alignment.Start
     ) {
-        Text("Indoor Air Quality (IAQ)", style = MaterialTheme.typography.h6)
-        Spacer(modifier = Modifier.height(8.dp))
+        Text(
+            text = "Indoor Air Quality (IAQ)",
+            style = MaterialTheme.typography.h6.copy(
+                fontWeight = FontWeight.Bold,
+                textAlign = TextAlign.Center,
+            ),
+            modifier = Modifier.fillMaxWidth(),
+        )
+        Spacer(modifier = Modifier.height(16.dp))
         for (iaq in Iaq.entries) {
             Row(verticalAlignment = Alignment.CenterVertically) {
                 Box(

diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/SimpleAlertDialog.kt b/app/src/main/java/com/geeksville/mesh/ui/components/SimpleAlertDialog.kt
@@ -36,7 +36,6 @@ fun SimpleAlertDialog(
             ),
         ) { Text(text = stringResource(id = R.string.close)) }
     },
-    modifier = Modifier.background(MaterialTheme.colors.background.copy(alpha = 1f)),
     title = {
         Text(
             text = stringResource(id = title),
@@ -46,6 +45,7 @@ fun SimpleAlertDialog(
     },
     text = text,
     shape = RoundedCornerShape(16.dp),
+    backgroundColor = MaterialTheme.colors.background,
 )
 
 @Composable

diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/config/EditChannelDialog.kt b/app/src/main/java/com/geeksville/mesh/ui/components/config/EditChannelDialog.kt
@@ -7,10 +7,12 @@ import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
@@ -34,7 +36,6 @@ import com.geeksville.mesh.ui.components.EditBase64Preference
 import com.geeksville.mesh.ui.components.EditTextPreference
 import com.geeksville.mesh.ui.components.PositionPrecisionPreference
 import com.geeksville.mesh.ui.components.SwitchPreference
-import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
 
 @Suppress("LongMethod")
 @OptIn(ExperimentalLayoutApi::class)
@@ -46,99 +47,96 @@ fun EditChannelDialog(
     modifier: Modifier = Modifier,
     modemPresetName: String = "Default",
 ) {
+    val focusManager = LocalFocusManager.current
+    var isFocused by remember { mutableStateOf(false) }
+
     var channelInput by remember(channelSettings) { mutableStateOf(channelSettings) }
 
     AlertDialog(
         onDismissRequest = onDismissRequest,
+        shape = RoundedCornerShape(16.dp),
+        backgroundColor = MaterialTheme.colors.background,
         text = {
-            AppCompatTheme {
-                Column(modifier.fillMaxWidth()) {
-                    val focusManager = LocalFocusManager.current
-                    var isFocused by remember { mutableStateOf(false) }
-                    EditTextPreference(
-                        title = stringResource(R.string.channel_name),
-                        value = if (isFocused) channelInput.name else channelInput.name.ifEmpty { modemPresetName },
-                        maxSize = 11, // name max_size:12
-                        enabled = true,
-                        isError = false,
-                        keyboardOptions = KeyboardOptions.Default.copy(
-                            keyboardType = KeyboardType.Text, imeAction = ImeAction.Done
-                        ),
-                        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-                        onValueChanged = {
-                            channelInput = channelInput.copy {
-                                name = it.trim()
-                                if (psk == Channel.default.settings.psk) psk = Channel.getRandomKey()
-                            }
-                        },
-                        onFocusChanged = { isFocused = it.isFocused },
-                    )
+            Column(modifier.fillMaxWidth()) {
+                EditTextPreference(
+                    title = stringResource(R.string.channel_name),
+                    value = if (isFocused) channelInput.name else channelInput.name.ifEmpty { modemPresetName },
+                    maxSize = 11, // name max_size:12
+                    enabled = true,
+                    isError = false,
+                    keyboardOptions = KeyboardOptions.Default.copy(
+                        keyboardType = KeyboardType.Text, imeAction = ImeAction.Done
+                    ),
+                    keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
+                    onValueChanged = {
+                        channelInput = channelInput.copy {
+                            name = it.trim()
+                            if (psk == Channel.default.settings.psk) psk = Channel.getRandomKey()
+                        }
+                    },
+                    onFocusChanged = { isFocused = it.isFocused },
+                )
 
-                    EditBase64Preference(
-                        title = "PSK",
-                        value = channelInput.psk,
-                        enabled = true,
-                        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-                        onValueChange = {
-                            val fullPsk = Channel(channelSettings { psk = it }).psk
-                            if (fullPsk.size() in setOf(0, 16, 32)) {
-                                channelInput = channelInput.copy { psk = it }
-                            }
-                        },
-                        onGenerateKey = {
-                            channelInput = channelInput.copy { psk = Channel.getRandomKey() }
-                        },
-                    )
+                EditBase64Preference(
+                    title = "PSK",
+                    value = channelInput.psk,
+                    enabled = true,
+                    keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
+                    onValueChange = {
+                        val fullPsk = Channel(channelSettings { psk = it }).psk
+                        if (fullPsk.size() in setOf(0, 16, 32)) {
+                            channelInput = channelInput.copy { psk = it }
+                        }
+                    },
+                    onGenerateKey = {
+                        channelInput = channelInput.copy { psk = Channel.getRandomKey() }
+                    },
+                )
 
-                    SwitchPreference(
-                        title = "Uplink enabled",
-                        checked = channelInput.uplinkEnabled,
-                        enabled = true,
-                        onCheckedChange = {
-                            channelInput = channelInput.copy { uplinkEnabled = it }
-                        },
-                        padding = PaddingValues(0.dp)
-                    )
+                SwitchPreference(
+                    title = "Uplink enabled",
+                    checked = channelInput.uplinkEnabled,
+                    enabled = true,
+                    onCheckedChange = {
+                        channelInput = channelInput.copy { uplinkEnabled = it }
+                    },
+                    padding = PaddingValues(0.dp)
+                )
 
-                    SwitchPreference(
-                        title = "Downlink enabled",
-                        checked = channelInput.downlinkEnabled,
-                        enabled = true,
-                        onCheckedChange = {
-                            channelInput = channelInput.copy { downlinkEnabled = it }
-                        },
-                        padding = PaddingValues(0.dp)
-                    )
+                SwitchPreference(
+                    title = "Downlink enabled",
+                    checked = channelInput.downlinkEnabled,
+                    enabled = true,
+                    onCheckedChange = {
+                        channelInput = channelInput.copy { downlinkEnabled = it }
+                    },
+                    padding = PaddingValues(0.dp)
+                )
 
-                    PositionPrecisionPreference(
-                        title = "Position enabled",
-                        enabled = true,
-                        value = channelInput.moduleSettings.positionPrecision,
-                        onValueChanged = {
-                            val module = channelInput.moduleSettings.copy { positionPrecision = it }
-                            channelInput = channelInput.copy { moduleSettings = module }
-                        },
-                    )
-                }
+                PositionPrecisionPreference(
+                    title = "Position enabled",
+                    enabled = true,
+                    value = channelInput.moduleSettings.positionPrecision,
+                    onValueChanged = {
+                        val module = channelInput.moduleSettings.copy { positionPrecision = it }
+                        channelInput = channelInput.copy { moduleSettings = module }
+                    },
+                )
             }
         },
         buttons = {
             FlowRow(
                 modifier = modifier
                     .fillMaxWidth()
-                    .padding(horizontal = 24.dp),
+                    .padding(start = 24.dp, end = 24.dp, bottom = 16.dp),
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
             ) {
                 TextButton(
-                    modifier = modifier
-                        .fillMaxWidth()
-                        .weight(1f),
+                    modifier = modifier.weight(1f),
                     onClick = onDismissRequest
                 ) { Text(stringResource(R.string.cancel)) }
                 Button(
-                    modifier = modifier
-                        .fillMaxWidth()
-                        .weight(1f),
+                    modifier = modifier.weight(1f),
                     onClick = {
                         onAddClick(channelInput)
                     },

diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/config/PacketResponseStateDialog.kt b/app/src/main/java/com/geeksville/mesh/ui/components/config/PacketResponseStateDialog.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Button
 import androidx.compose.material.LinearProgressIndicator
@@ -29,6 +30,8 @@ fun <T> PacketResponseStateDialog(
 ) {
     AlertDialog(
         onDismissRequest = {},
+        shape = RoundedCornerShape(16.dp),
+        backgroundColor = MaterialTheme.colors.background,
         title = {
             Column(
                 modifier = Modifier.fillMaxWidth(),
@@ -60,7 +63,9 @@ fun <T> PacketResponseStateDialog(
         },
         buttons = {
             Row(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 24.dp, end = 24.dp, bottom = 16.dp),
                 horizontalArrangement = Arrangement.Center
             ) {
                 Button(