BIT-1989-settings-about-dialog-landscape-error (#1180)

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenTwoButtonDialog.kt

@@ -1,11 +1,33 @@
 package com.x8bit.bitwarden.ui.platform.components.dialog
 
-import androidx.compose.material3.AlertDialog
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeightIn
+import androidx.compose.foundation.layout.requiredWidthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
+import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight
+import com.x8bit.bitwarden.ui.platform.components.util.maxDialogWidth
 
 /**
  * Represents a Bitwarden-styled dialog with two buttons.
@@ -21,7 +43,9 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
  * @param confirmTextColor The color of the confirm text.
  * @param dismissTextColor The color of the dismiss text.
  */
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
+@Suppress("LongMethod")
 fun BitwardenTwoButtonDialog(
     title: String?,
     message: String,
@@ -33,36 +57,84 @@ fun BitwardenTwoButtonDialog(
     confirmTextColor: Color? = null,
     dismissTextColor: Color? = null,
 ) {
-    AlertDialog(
+    Dialog(
         onDismissRequest = onDismissRequest,
-        dismissButton = {
+        properties = DialogProperties(usePlatformDefaultWidth = false),
-            BitwardenTextButton(
+    ) {
-                label = dismissButtonText,
+        val configuration = LocalConfiguration.current
-                labelTextColor = dismissTextColor,
+        val scrollState = rememberScrollState()
-                onClick = onDismissClick,
+        Column(
+            modifier = Modifier
+                .requiredHeightIn(
+                    max = configuration.maxDialogHeight,
                 )
-        },
+                .requiredWidthIn(
-        confirmButton = {
+                    max = configuration.maxDialogWidth,
+                )
+                // This background is necessary for the dialog to not be transparent.
+                .background(
+                    color = MaterialTheme.colorScheme.surfaceContainerHigh,
+                    shape = RoundedCornerShape(28.dp),
+                ),
+            horizontalAlignment = Alignment.End,
+        ) {
+            title?.let {
+                Spacer(modifier = Modifier.height(24.dp))
+                Text(
+                    modifier = Modifier
+                        .padding(horizontal = 24.dp)
+                        .fillMaxWidth(),
+                    text = title,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    style = MaterialTheme.typography.headlineSmall,
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+            }
+            if (scrollState.canScrollBackward) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(MaterialTheme.colorScheme.outlineVariant),
+                )
+            }
+            Text(
+                modifier = Modifier
+                    .weight(1f, fill = false)
+                    .verticalScroll(scrollState)
+                    .padding(horizontal = 24.dp)
+                    .fillMaxWidth(),
+                text = message,
+                color = MaterialTheme.colorScheme.onSurface,
+                style = MaterialTheme.typography.bodyMedium,
+            )
+            if (scrollState.canScrollForward) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(MaterialTheme.colorScheme.outlineVariant),
+                )
+            }
+            Spacer(modifier = Modifier.height(12.dp))
+            FlowRow(
+                horizontalArrangement = Arrangement.End,
+                modifier = Modifier.padding(horizontal = 8.dp),
+            ) {
                 BitwardenTextButton(
+                    modifier = Modifier.padding(horizontal = 4.dp),
                     label = confirmButtonText,
                     labelTextColor = confirmTextColor,
                     onClick = onConfirmClick,
                 )
-        },
+                BitwardenTextButton(
-        title = title?.let {
+                    modifier = Modifier.padding(horizontal = 4.dp),
-            {
+                    label = dismissButtonText,
-                Text(
+                    labelTextColor = dismissTextColor,
-                    text = it,
+                    onClick = onDismissClick,
-                    style = MaterialTheme.typography.headlineSmall,
                 )
             }
-        },
+            Spacer(modifier = Modifier.height(24.dp))
-        text = {
+        }
-            Text(
+    }
-                text = message,
-                style = MaterialTheme.typography.bodyMedium,
-            )
-        },
-        containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
-    )
 }

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/util/DialogExtensions.kt

@@ -18,3 +18,18 @@ val Configuration.maxDialogHeight: Dp
 
         else -> Dp.Unspecified
     }
+
+/**
+ * Provides the maximum width [Dp] common for all dialogs with a given [Configuration].
+ */
+val Configuration.maxDialogWidth: Dp
+    get() = when (orientation) {
+        Configuration.ORIENTATION_LANDSCAPE -> 542.dp
+        Configuration.ORIENTATION_PORTRAIT -> 312.dp
+        Configuration.ORIENTATION_UNDEFINED -> Dp.Unspecified
+        @Suppress("DEPRECATION")
+        Configuration.ORIENTATION_SQUARE,
+        -> Dp.Unspecified
+
+        else -> Dp.Unspecified
+    }