Beautify MoreDialog or Options sheet

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()) {
+                    if (isSystemInDarkTheme()) {
-                        MaterialTheme.colorScheme.onSecondary
+                        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)
+                        AppBar(
-                        AccountHeader(backgroundColor = onBackgroundColor)
+                            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
                 )
             }
         }