Feat(ui): Add drop shadow to UI dialogs (#678)

## Description
Adds a subtle drop shadow to dialog containers in Dialogs.kt. Should
make the dialogs pop a bit more instead of looking flat.

### Related issues
Fixes #665

### Screenshots

Before:

<img width="1950" height="1123" alt="before1"
src="https://github.com/user-attachments/assets/b3cba7b2-108c-4afe-94ef-474943a6cccf"
/>


After:
<img width="1952" height="1133" alt="after"
src="https://github.com/user-attachments/assets/ff9aaf50-e122-4e27-bae1-e981f257fd4c"
/>



### AI/LLM usage
None

---------

Co-authored-by: Ray <154766448+damontecres@users.noreply.github.com>
This commit is contained in:
Justin Caveda 2026-01-29 12:32:00 -06:00 committed by GitHub
parent 792d3598b7
commit b3ef60f86d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -32,6 +32,7 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.vector.ImageVector
@ -183,7 +184,7 @@ fun DialogPopup(
dismissOnClick: Boolean = true,
waitToLoad: Boolean = true,
properties: DialogProperties = DialogProperties(),
elevation: Dp = 3.dp,
elevation: Dp = 8.dp,
) {
var waiting by remember { mutableStateOf(waitToLoad) }
if (showDialog) {
@ -238,7 +239,7 @@ fun DialogPopupContent(
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
dismissOnClick: Boolean = true,
elevation: Dp = 3.dp,
elevation: Dp = 8.dp,
) {
val elevatedContainerColor =
MaterialTheme.colorScheme.surfaceColorAtElevation(elevation)
@ -246,6 +247,7 @@ fun DialogPopupContent(
verticalArrangement = Arrangement.spacedBy(8.dp),
modifier =
modifier
.shadow(elevation = elevation, shape = RoundedCornerShape(28.0.dp))
.graphicsLayer {
this.clip = true
this.shape = RoundedCornerShape(28.0.dp)
@ -296,7 +298,7 @@ fun DialogPopup(
onDismissRequest: () -> Unit,
dismissOnClick: Boolean = true,
properties: DialogProperties = DialogProperties(),
elevation: Dp = 3.dp,
elevation: Dp = 8.dp,
) = DialogPopup(
showDialog = true,
waitToLoad = params.fromLongClick,
@ -345,6 +347,7 @@ fun ScrollableDialog(
.width(width)
.heightIn(max = maxHeight)
.focusable()
.shadow(elevation = 8.dp, shape = RoundedCornerShape(8.dp))
.background(
MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp),
shape = RoundedCornerShape(8.dp),
@ -373,7 +376,7 @@ fun ScrollableDialog(
fun BasicDialog(
onDismissRequest: () -> Unit,
properties: DialogProperties = DialogProperties(),
elevation: Dp = 3.dp,
elevation: Dp = 8.dp,
content: @Composable () -> Unit,
) {
Dialog(
@ -383,6 +386,7 @@ fun BasicDialog(
Box(
modifier =
Modifier
.shadow(elevation = elevation, shape = RoundedCornerShape(8.dp))
.background(
MaterialTheme.colorScheme.surfaceColorAtElevation(elevation),
shape = RoundedCornerShape(8.dp),
@ -403,7 +407,7 @@ fun ConfirmDialog(
onCancel: () -> Unit,
onConfirm: () -> Unit,
properties: DialogProperties = DialogProperties(),
elevation: Dp = 3.dp,
elevation: Dp = 8.dp,
) = BasicDialog(
onDismissRequest = onCancel,
properties = properties,