From c5bb93da0216e80324ad3a2d76b840062cbfef7f Mon Sep 17 00:00:00 2001 From: Rahul Patel Date: Tue, 30 Jul 2024 02:36:13 +0530 Subject: [PATCH] Beautify MoreDialog or Options sheet --- .../view/ui/commons/MoreDialogFragment.kt | 72 ++++++++++++------- 1 file changed, 47 insertions(+), 25 deletions(-) diff --git a/app/src/main/java/com/aurora/store/view/ui/commons/MoreDialogFragment.kt b/app/src/main/java/com/aurora/store/view/ui/commons/MoreDialogFragment.kt index dbae37a26..4e751b738 100644 --- a/app/src/main/java/com/aurora/store/view/ui/commons/MoreDialogFragment.kt +++ b/app/src/main/java/com/aurora/store/view/ui/commons/MoreDialogFragment.kt @@ -33,6 +33,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.ComposeView import androidx.compose.ui.platform.LocalContext @@ -50,7 +51,10 @@ import coil.compose.SubcomposeAsyncImage import coil.request.ImageRequest import com.aurora.Constants import com.aurora.Constants.URL_TOS +import com.aurora.extensions.accentColor import com.aurora.extensions.browse +import com.aurora.extensions.darkenColor +import com.aurora.extensions.lightenColor import com.aurora.store.R import com.aurora.store.data.providers.AuthProvider import com.aurora.store.view.theme.AuroraTheme @@ -64,6 +68,11 @@ class MoreDialogFragment : DialogFragment() { @Inject lateinit var authProvider: AuthProvider + var primaryColor: Color = Color.White + var onPrimaryColor: Color = Color.Black + var secondaryColor: Color = Color.White + var onSecondaryColor: Color = Color.Black + private data class Option( @StringRes val title: Int, @DrawableRes val icon: Int, @@ -81,30 +90,36 @@ class MoreDialogFragment : DialogFragment() { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { AuroraTheme { - val backgroundColor = if (isSystemInDarkTheme()) { - MaterialTheme.colorScheme.onSecondary + if (isSystemInDarkTheme()) { + primaryColor = Color(darkenColor(requireContext().accentColor(), 0.25f)) + onPrimaryColor = Color(lightenColor(primaryColor.toArgb())) + secondaryColor = Color(darkenColor(requireContext().accentColor(), 0.15f)) + onSecondaryColor = Color(lightenColor(primaryColor.toArgb())) + primaryColor to onPrimaryColor to secondaryColor to onSecondaryColor } else { - MaterialTheme.colorScheme.surfaceVariant + primaryColor = Color(lightenColor(requireContext().accentColor(), 0.85f)) + onPrimaryColor = Color(darkenColor(primaryColor.toArgb())) + secondaryColor = Color(lightenColor(requireContext().accentColor(), 0.95f)) + onSecondaryColor = Color(darkenColor(primaryColor.toArgb())) + primaryColor to onPrimaryColor to secondaryColor to onSecondaryColor } - val onBackgroundColor = if (isSystemInDarkTheme()) { - MaterialTheme.colorScheme.onSurface - } else { - MaterialTheme.colorScheme.onSecondary - } - - val tintColor = if (isSystemInDarkTheme()) Color.White else Color.Black - Column( modifier = Modifier .fillMaxWidth() - .background(color = backgroundColor) + .background(color = primaryColor) .verticalScroll(rememberScrollState()) .padding(10.dp), verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically) ) { - AppBar(tintColor = tintColor) - AccountHeader(backgroundColor = onBackgroundColor) + AppBar( + backgroundColor = primaryColor, + onBackgroundColor = onPrimaryColor + ) + AccountHeader( + backgroundColor = secondaryColor, + onBackgroundColor = onSecondaryColor + ) Column( modifier = Modifier .clip( @@ -115,17 +130,22 @@ class MoreDialogFragment : DialogFragment() { bottomEnd = 20.dp ) ) - .background(color = onBackgroundColor) + .background(color = secondaryColor) ) { - getOptions().fastForEach { option -> OptionItem(option = option) } + getOptions().fastForEach { option -> + OptionItem( + option = option, + tintColor = onSecondaryColor + ) + } } getExtraOptions().fastForEach { option -> OptionItem( option = option, - tintColor = tintColor + tintColor = onPrimaryColor ) } - Footer(tintColor) + Footer(onPrimaryColor) } } } @@ -133,20 +153,20 @@ class MoreDialogFragment : DialogFragment() { } @Composable - fun AppBar(tintColor: Color) { + fun AppBar(backgroundColor: Color = Color.Transparent, onBackgroundColor: Color) { Box(contentAlignment = Alignment.CenterEnd) { Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.app_name), style = MaterialTheme.typography.titleMedium, - color = tintColor, + color = onBackgroundColor, textAlign = TextAlign.Center ) IconButton(onClick = { findNavController().navigateUp() }) { Icon( painter = painterResource(id = R.drawable.ic_cancel), contentDescription = stringResource(id = R.string.action_cancel), - tint = tintColor + tint = onBackgroundColor ) } } @@ -176,7 +196,7 @@ class MoreDialogFragment : DialogFragment() { } @Composable - private fun AccountHeader(backgroundColor: Color) { + private fun AccountHeader(backgroundColor: Color, onBackgroundColor: Color = Color.White) { Column( modifier = Modifier .fillMaxWidth() @@ -215,12 +235,14 @@ class MoreDialogFragment : DialogFragment() { Text( text = if (authProvider.isAnonymous) "anonymous" else authProvider.authData!!.userProfile!!.name, fontWeight = FontWeight.SemiBold, - fontSize = 16.sp + fontSize = 16.sp, + color = onBackgroundColor ) Text( text = if (authProvider.isAnonymous) "anonymous@gmail.com" else authProvider.authData!!.userProfile!!.email, fontWeight = FontWeight.Normal, - fontSize = 14.sp + fontSize = 14.sp, + color = onBackgroundColor ) } } @@ -230,7 +252,7 @@ class MoreDialogFragment : DialogFragment() { ) { Text( text = stringResource(id = R.string.manage_account), - color = Color.Black + color = onBackgroundColor ) } }