MoreDialogFragment: Better theme and color handling

Signed-off-by: Aayush Gupta <aayushgupta219@gmail.com>

app/src/main/java/com/aurora/store/view/theme/Theme.kt

@@ -0,0 +1,33 @@
+package com.aurora.store.view.theme
+
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Typography
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import com.aurora.store.R
+
+@Composable
+fun AuroraTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+    val colorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+        if (darkTheme) {
+            dynamicDarkColorScheme(LocalContext.current)
+        } else {
+            dynamicLightColorScheme(LocalContext.current)
+        }
+    } else {
+        if (darkTheme) {
+            darkColorScheme(primary = colorResource(id = R.color.colorAccent))
+        } else {
+            lightColorScheme(primary = colorResource(id = R.color.colorAccent))
+        }
+    }
+
+    MaterialTheme(colorScheme = colorScheme, typography = Typography(), content = content)
+}

app/src/main/java/com/aurora/store/view/ui/commons/MoreDialogFragment.kt

@@ -9,6 +9,7 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -43,17 +44,16 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.util.fastForEach
-import androidx.core.graphics.ColorUtils
 import androidx.fragment.app.DialogFragment
 import androidx.navigation.fragment.findNavController
 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.store.R
 import com.aurora.store.data.providers.AuthProvider
+import com.aurora.store.view.theme.AuroraTheme
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 
 class MoreDialogFragment : DialogFragment() {
@@ -74,59 +74,80 @@ class MoreDialogFragment : DialogFragment() {
         return ComposeView(context).apply {
             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
             setContent {
-                val bColor = ColorUtils.setAlphaComponent(LocalContext.current.accentColor(), 20)
+                AuroraTheme {
-                Column(
+                    val backgroundColor = if (isSystemInDarkTheme()) {
-                    modifier = Modifier
+                        MaterialTheme.colorScheme.onSecondary
-                        .fillMaxWidth()
+                    } else {
-                        .background(color = Color(bColor))
+                        MaterialTheme.colorScheme.surfaceVariant
-                        .verticalScroll(rememberScrollState())
+                    }
-                        .padding(13.dp),
+
-                    verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically)
+                    val onBackgroundColor = if (isSystemInDarkTheme()) {
-                ) {
+                        MaterialTheme.colorScheme.onSurface
-                    AppBar()
+                    } else {
-                    AccountHeader()
+                        MaterialTheme.colorScheme.onSecondary
+                    }
+
+                    val tintColor = if (isSystemInDarkTheme()) Color.White else Color.Black
+
                     Column(
                         modifier = Modifier
-                            .clip(
+                            .fillMaxWidth()
-                                RoundedCornerShape(
+                            .background(color = backgroundColor)
-                                    topStart = 5.dp,
+                            .verticalScroll(rememberScrollState())
-                                    topEnd = 5.dp,
+                            .padding(10.dp),
-                                    bottomStart = 20.dp,
+                        verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically)
-                                    bottomEnd = 20.dp
-                                )
-                            )
-                            .background(color = Color.White)
                     ) {
-                        getOptions().fastForEach { option -> OptionItem(option = option) }
+                        AppBar(tintColor = tintColor)
+                        AccountHeader(backgroundColor = onBackgroundColor)
+                        Column(
+                            modifier = Modifier
+                                .clip(
+                                    RoundedCornerShape(
+                                        topStart = 5.dp,
+                                        topEnd = 5.dp,
+                                        bottomStart = 20.dp,
+                                        bottomEnd = 20.dp
+                                    )
+                                )
+                                .background(color = onBackgroundColor)
+                        ) {
+                            getOptions().fastForEach { option -> OptionItem(option = option) }
+                        }
+                        getExtraOptions().fastForEach { option ->
+                            OptionItem(
+                                option = option,
+                                tintColor = tintColor
+                            )
+                        }
+                        Footer(tintColor)
                     }
-                    getExtraOptions().fastForEach { option -> OptionItem(option = option) }
-                    Footer()
                 }
             }
         }
     }
 
     @Composable
-    fun AppBar() {
+    fun AppBar(tintColor: Color) {
         Box(contentAlignment = Alignment.CenterStart) {
             IconButton(onClick = { findNavController().navigateUp() }) {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_cancel),
                     contentDescription = stringResource(id = R.string.action_cancel),
-                    tint = Color.Black
+                    tint = tintColor
                 )
             }
             Text(
                 modifier = Modifier.fillMaxWidth(),
                 text = stringResource(id = R.string.app_name),
                 style = MaterialTheme.typography.titleMedium,
+                color = tintColor,
                 textAlign = TextAlign.Center
             )
         }
     }
 
     @Composable
-    fun Footer() {
+    fun Footer(tintColor: Color) {
         Row(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
@@ -135,34 +156,31 @@ class MoreDialogFragment : DialogFragment() {
             TextButton(onClick = { requireContext().browse(Constants.URL_POLICY) }) {
                 Text(
                     text = stringResource(id = R.string.privacy_policy_title),
-                    color = Color.Black
+                    color = tintColor
                 )
             }
-            Text(text = "•")
+            Text(text = "•", color = tintColor)
             TextButton(onClick = { requireContext().browse(URL_TOS) }) {
                 Text(
                     text = stringResource(id = R.string.menu_terms),
-                    color = Color.Black
+                    color = tintColor
                 )
             }
         }
     }
 
     @Composable
-    private fun AccountHeader() {
+    private fun AccountHeader(backgroundColor: Color) {
         val authData = AuthProvider.with(LocalContext.current).getAuthData()
         Column(
             modifier = Modifier
                 .fillMaxWidth()
                 .clip(
                     RoundedCornerShape(
-                        topStart = 20.dp,
+                        topStart = 20.dp, topEnd = 20.dp, bottomStart = 5.dp, bottomEnd = 5.dp
-                        topEnd = 20.dp,
-                        bottomStart = 5.dp,
-                        bottomEnd = 5.dp
                     )
                 )
-                .background(color = Color.White)
+                .background(color = backgroundColor)
                 .padding(20.dp),
             verticalArrangement = Arrangement.spacedBy(15.dp),
             horizontalAlignment = Alignment.CenterHorizontally
@@ -214,7 +232,7 @@ class MoreDialogFragment : DialogFragment() {
     }
 
     @Composable
-    private fun OptionItem(option: Option) {
+    private fun OptionItem(option: Option, tintColor: Color = Color.Black) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
@@ -226,16 +244,16 @@ class MoreDialogFragment : DialogFragment() {
             Image(
                 painter = painterResource(id = option.icon),
                 contentDescription = stringResource(id = option.title),
-                colorFilter = ColorFilter.tint(color = Color.Black),
+                colorFilter = ColorFilter.tint(color = tintColor),
                 modifier = Modifier
                     .padding(horizontal = 10.dp)
-                    .requiredSize(25.dp)
+                    .requiredSize(23.dp)
             )
             Text(
                 modifier = Modifier.fillMaxWidth(),
                 text = stringResource(id = option.title),
-                color = Color.Black,
+                color = tintColor,
-                fontSize = 16.sp,
+                fontSize = 15.sp,
             )
         }
     }