fix: dark theme colors (#1789)

* fix: dark theme colors * fixed edit icon tint
openMF · Oct 18, 2024 · fac59da · fac59da
1 parent 8b105b9
commit fac59da
Show file tree

Hide file tree

Showing 16 changed files with 212 additions and 161 deletions.
diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Navigation.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Navigation.kt
@@ -61,8 +61,7 @@ fun RowScope.MifosNavigationBarItem(
         enabled = enabled,
         label = label,
         alwaysShowLabel = alwaysShowLabel,
-        colors =
-        NavigationBarItemDefaults.colors(
+        colors = NavigationBarItemDefaults.colors(
             selectedIconColor = MifosNavigationDefaults.navigationSelectedItemColor(),
             unselectedIconColor = MifosNavigationDefaults.navigationContentColor(),
             selectedTextColor = MifosNavigationDefaults.navigationSelectedItemColor(),
@@ -86,6 +85,7 @@ fun MifosNavigationBar(
 ) {
     NavigationBar(
         modifier = modifier,
+        containerColor = MaterialTheme.colorScheme.onPrimary,
         contentColor = MifosNavigationDefaults.navigationContentColor(),
         tonalElevation = 0.dp,
         content = content,
@@ -126,8 +126,7 @@ fun MifosNavigationRailItem(
         enabled = enabled,
         label = label,
         alwaysShowLabel = alwaysShowLabel,
-        colors =
-        NavigationRailItemDefaults.colors(
+        colors = NavigationRailItemDefaults.colors(
             selectedIconColor = MifosNavigationDefaults.navigationSelectedItemColor(),
             unselectedIconColor = MifosNavigationDefaults.navigationContentColor(),
             selectedTextColor = MifosNavigationDefaults.navigationSelectedItemColor(),
@@ -164,20 +163,18 @@ fun MifosNavigationRail(
 @Composable
 fun MifosNavigationBarPreview() {
     val items = listOf("Home", "Payments", "Finance", "Profile")
-    val icons =
-        listOf(
-            MifosIcons.Home,
-            MifosIcons.Payment,
-            MifosIcons.Finance,
-            MifosIcons.Profile,
-        )
-    val selectedIcons =
-        listOf(
-            MifosIcons.HomeBoarder,
-            MifosIcons.Payment,
-            MifosIcons.Finance,
-            MifosIcons.ProfileBoarder,
-        )
+    val icons = listOf(
+        MifosIcons.Home,
+        MifosIcons.Payment,
+        MifosIcons.Finance,
+        MifosIcons.Profile,
+    )
+    val selectedIcons = listOf(
+        MifosIcons.HomeBoarder,
+        MifosIcons.Payment,
+        MifosIcons.Finance,
+        MifosIcons.ProfileBoarder,
+    )
 
     MifosTheme {
         MifosNavigationBar {
@@ -208,20 +205,18 @@ fun MifosNavigationBarPreview() {
 @Composable
 fun MifosNavigationRailPreview() {
     val items = listOf("Home", "Payments", "Finance", "Profile")
-    val icons =
-        listOf(
-            MifosIcons.Home,
-            MifosIcons.Payment,
-            MifosIcons.Finance,
-            MifosIcons.Profile,
-        )
-    val selectedIcons =
-        listOf(
-            MifosIcons.HomeBoarder,
-            MifosIcons.Payment,
-            MifosIcons.Finance,
-            MifosIcons.ProfileBoarder,
-        )
+    val icons = listOf(
+        MifosIcons.Home,
+        MifosIcons.Payment,
+        MifosIcons.Finance,
+        MifosIcons.Profile,
+    )
+    val selectedIcons = listOf(
+        MifosIcons.HomeBoarder,
+        MifosIcons.Payment,
+        MifosIcons.Finance,
+        MifosIcons.ProfileBoarder,
+    )
 
     MifosTheme {
         MifosNavigationRail {
@@ -256,8 +251,8 @@ object MifosNavigationDefaults {
     fun navigationContentColor() = MaterialTheme.colorScheme.onSurfaceVariant
 
     @Composable
-    fun navigationSelectedItemColor() = MaterialTheme.colorScheme.onPrimaryContainer
+    fun navigationSelectedItemColor() = MaterialTheme.colorScheme.onSurface
 
     @Composable
-    fun navigationIndicatorColor() = MaterialTheme.colorScheme.primaryContainer
+    fun navigationIndicatorColor() = MaterialTheme.colorScheme.onPrimary
 }
diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/icon/MifosIcons.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/icon/MifosIcons.kt
@@ -65,13 +65,13 @@ object MifosIcons {
     val Visibility: ImageVector = Icons.Filled.Visibility
     val Check: ImageVector = Icons.Default.Check
     val KeyboardArrowDown: ImageVector = Icons.Default.KeyboardArrowDown
-    val Home = Icons.Outlined.Home
-    val HomeBoarder = Icons.Rounded.Home
+    val Home = Icons.Rounded.Home
+    val HomeBoarder = Icons.Outlined.Home
     val Payment = Icons.Rounded.SwapHoriz
-    val Finance = Icons.Outlined.Wallet
-    val FinanceBoarder = Icons.Rounded.Wallet
-    val Profile = Icons.Outlined.AccountCircle
-    val ProfileBoarder = Icons.Rounded.AccountCircle
+    val Finance = Icons.Rounded.Wallet
+    val FinanceBoarder = Icons.Outlined.Wallet
+    val Profile = Icons.Rounded.AccountCircle
+    val ProfileBoarder = Icons.Outlined.AccountCircle
     val MoreVert = Icons.Rounded.MoreVert
     val Search = Icons.Rounded.Search
     val Add = Icons.Rounded.Add

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/theme/Color.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/theme/Color.kt
@@ -14,7 +14,7 @@ import androidx.compose.ui.graphics.Color
 val md_theme_light_primary = Color(0xFF0673BA) // primary
 val md_theme_light_onPrimary = Color(0xFFFFFFFF) // gradientOne
 val md_theme_light_primaryContainer = Color(0xFFF5F5F5) // container color
-val md_theme_light_onPrimaryContainer = Color(0xFF3E001D)
+val md_theme_light_onPrimaryContainer = Color(0xFFFFFBFF) // 0xFFF0F0F0
 val md_theme_light_secondary = Color(0xFF984061)
 val md_theme_light_onSecondary = Color(0xFFFFFFFF)
 val md_theme_light_secondaryContainer = Color(0xFFFFD9E2)
@@ -29,7 +29,7 @@ val md_theme_light_onError = Color(0xFFFFFFFF)
 val md_theme_light_onErrorContainer = Color(0xFF410002)
 val md_theme_light_background = Color(0xFFFFFBFF)
 val md_theme_light_onBackground = Color(0xFF330045)
-val md_theme_light_surface = Color(0xFFFFFBFF)
+val md_theme_light_surface = Color(0xFFF0F0F0)
 val md_theme_light_onSurface = Color(0xFF333333) // onSurface
 val md_theme_light_surfaceVariant = Color(0xFFF2DDE1)
 val md_theme_light_onSurfaceVariant = Color(0xFF514347)
@@ -45,7 +45,7 @@ val md_theme_light_scrim = Color(0xFF000000)
 val md_theme_dark_primary = Color(0xFFFFFFFF)
 val md_theme_dark_onPrimary = Color(0xFF000000)
 val md_theme_dark_primaryContainer = Color(0xFF7B2949)
-val md_theme_dark_onPrimaryContainer = Color(0xFFFFD9E2)
+val md_theme_dark_onPrimaryContainer = Color(0xFF1C1C1C)
 val md_theme_dark_secondary = Color(0xFFFFB1C8)
 val md_theme_dark_onSecondary = Color(0xFF5E1133)
 val md_theme_dark_secondaryContainer = Color(0xFF7B2949)

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/ScrollableTabRow.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/ScrollableTabRow.kt
@@ -29,9 +29,9 @@ fun MifosScrollableTabRow(
     tabContents: List<TabContent>,
     pagerState: PagerState,
     modifier: Modifier = Modifier,
-    containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
+    containerColor: Color = MaterialTheme.colorScheme.surface,
     selectedContentColor: Color = MaterialTheme.colorScheme.primary,
-    unselectedContentColor: Color = MaterialTheme.colorScheme.primaryContainer,
+    unselectedContentColor: Color = MaterialTheme.colorScheme.surface,
     edgePadding: Dp = 8.dp,
 ) {
     val scope = rememberCoroutineScope()

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/TransactionItemScreen.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/TransactionItemScreen.kt
@@ -32,7 +32,6 @@ import androidx.compose.ui.unit.dp
 import com.mifospay.core.model.domain.Transaction
 import com.mifospay.core.model.domain.TransactionType
 import org.mifospay.common.Utils.getNewCurrencyFormatter
-import org.mifospay.core.designsystem.theme.NewUi
 import org.mifospay.core.designsystem.theme.green
 import org.mifospay.core.designsystem.theme.red
 
@@ -77,8 +76,15 @@ fun TransactionItemScreen(
                     },
                     modifier = when (transaction.transactionType) {
                         TransactionType.DEBIT -> Modifier.size(16.dp)
-                        TransactionType.CREDIT -> Modifier.graphicsLayer(rotationZ = 180f).size(16.dp)
-                        else -> Modifier.graphicsLayer(rotationZ = 180f).size(16.dp)
+                        TransactionType.CREDIT ->
+                            Modifier
+                                .graphicsLayer(rotationZ = 180f)
+                                .size(16.dp)
+
+                        else ->
+                            Modifier
+                                .graphicsLayer(rotationZ = 180f)
+                                .size(16.dp)
                     },
                     tint = when (transaction.transactionType) {
                         TransactionType.CREDIT -> green
@@ -104,7 +110,7 @@ fun TransactionItemScreen(
                 .fillMaxWidth()
                 .padding(horizontal = 20.dp),
             thickness = 1.dp,
-            color = NewUi.onSurface.copy(alpha = 0.05f),
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.13f),
         )
     }
 }
diff --git a/feature/history/src/main/kotlin/org/mifospay/feature/history/HistoryScreen.kt b/feature/history/src/main/kotlin/org/mifospay/feature/history/HistoryScreen.kt
@@ -178,7 +178,7 @@ private fun Chip(
     modifier: Modifier = Modifier,
 ) {
     val context = LocalContext.current
-    val backgroundColor = MaterialTheme.colorScheme.onPrimary
+    val backgroundColor = MaterialTheme.colorScheme.onPrimaryContainer
     MifosButton(
         modifier = modifier.then(
             if (selected) {

diff --git a/feature/home/src/main/kotlin/org/mifospay/feature/home/HomeScreen.kt b/feature/home/src/main/kotlin/org/mifospay/feature/home/HomeScreen.kt
@@ -115,7 +115,8 @@ private fun HomeScreen(
 ) {
     LazyColumn(
         modifier = modifier
-            .fillMaxSize(),
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.surface),
         contentPadding = PaddingValues(horizontal = 20.dp),
     ) {
         item {
@@ -304,7 +305,7 @@ fun MifosSendMoneyFreeCard(modifier: Modifier = Modifier) {
     Card(
         modifier = modifier,
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surface,
+            containerColor = MaterialTheme.colorScheme.onPrimaryContainer,
         ),
     ) {
         Row(
@@ -318,15 +319,16 @@ fun MifosSendMoneyFreeCard(modifier: Modifier = Modifier) {
             ) {
                 Text(
                     text = stringResource(id = R.string.start_sending_your_money_tax_free),
-                    color = NewUi.primaryColor,
+                    color = MaterialTheme.colorScheme.primary,
                     fontWeight = FontWeight(500),
                     style = MaterialTheme.typography.bodyLarge,
                 )
                 Text(
                     text = "Mifos Pay is the best place for users to receive and send money. Start saving money now!",
-                    color = NewUi.onSurface,
+                    color = MaterialTheme.colorScheme.onSurface,
                     style = MaterialTheme.typography.bodySmall,
                     fontWeight = FontWeight(300),
+                    modifier = Modifier.padding(top = 15.dp),
                 )
             }
 
@@ -346,7 +348,7 @@ fun TransactionHistoryCard(transactions: List<Transaction>, modifier: Modifier =
         modifier = modifier
             .fillMaxWidth(),
         colors = CardDefaults.cardColors(
-            containerColor = Color.White,
+            containerColor = MaterialTheme.colorScheme.onPrimaryContainer,
         ),
     ) {
         Column {
@@ -360,7 +362,7 @@ fun TransactionHistoryCard(transactions: List<Transaction>, modifier: Modifier =
             ) {
                 Text(
                     text = "Transaction History",
-                    color = NewUi.primaryColor,
+                    color = MaterialTheme.colorScheme.onSurface,
                     fontWeight = FontWeight(500),
                 )
 
@@ -395,7 +397,7 @@ private fun PaymentButton(
         modifier = modifier,
         onClick = onClick,
         colors = ButtonDefaults.buttonColors(
-            containerColor = MaterialTheme.colorScheme.surface,
+            containerColor = MaterialTheme.colorScheme.onPrimaryContainer,
             contentColor = MaterialTheme.colorScheme.onSurface,
         ),
     ) {

diff --git a/feature/payments/src/main/kotlin/org/mifospay/feature/payments/RequestScreen.kt b/feature/payments/src/main/kotlin/org/mifospay/feature/payments/RequestScreen.kt
@@ -79,7 +79,14 @@ internal fun RequestScreenContent(
                 horizontalArrangement = Arrangement.SpaceBetween,
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                Text(text = stringResource(id = R.string.feature_payments_virtual_payment_address_vpa))
+                Text(
+                    text = stringResource(
+                        id = R.string
+                            .feature_payments_virtual_payment_address_vpa,
+                    ),
+                    color = MaterialTheme
+                        .colorScheme.onSurface,
+                )
                 Text(
                     text = vpa,
                     style = MaterialTheme.typography.bodyMedium,
@@ -99,10 +106,14 @@ internal fun RequestScreenContent(
             HorizontalDivider(
                 thickness = 1.dp,
                 color = MaterialTheme.colorScheme.onSurface.copy
-                    (alpha = 0.05f),
+                    (alpha = 0.13f),
             )
             Column(modifier = Modifier.padding(top = 10.dp)) {
-                Text(text = stringResource(id = R.string.feature_payments_mobile_number))
+                Text(
+                    text = stringResource(id = R.string.feature_payments_mobile_number),
+                    color =
+                    MaterialTheme.colorScheme.onSurface,
+                )
                 Text(
                     text = mobile,
                     style = MaterialTheme.typography.bodyMedium,

diff --git a/feature/profile/src/main/kotlin/org/mifospay/feature/profile/ProfileCard.kt b/feature/profile/src/main/kotlin/org/mifospay/feature/profile/ProfileCard.kt
@@ -44,7 +44,7 @@ fun ProfileDetailsCard(
         ),
         shape = RoundedCornerShape(15.dp),
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.primaryContainer,
+            containerColor = MaterialTheme.colorScheme.onPrimaryContainer,
         ),
     ) {
         Column(

diff --git a/feature/profile/src/main/kotlin/org/mifospay/feature/profile/ProfileScreen.kt b/feature/profile/src/main/kotlin/org/mifospay/feature/profile/ProfileScreen.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -32,7 +33,6 @@ import org.koin.androidx.compose.koinViewModel
 import org.mifospay.core.designsystem.component.MfLoadingWheel
 import org.mifospay.core.designsystem.component.MifosButton
 import org.mifospay.core.designsystem.icon.MifosIcons
-import org.mifospay.core.designsystem.theme.MifosBlue
 import org.mifospay.core.ui.ProfileImage
 
 @Composable
@@ -79,7 +79,7 @@ fun ProfileScreenContent(
                         .fillMaxWidth()
                         .padding(horizontal = 20.dp)
                         .height(54.dp),
-                    color = MifosBlue,
+                    color = MaterialTheme.colorScheme.primary,
                     text = { Text(text = stringResource(id = R.string.feature_profile_personal_qr_code)) },
                     onClick = { /*TODO*/ },
                     leadingIcon = {
@@ -97,7 +97,7 @@ fun ProfileScreenContent(
                         .fillMaxWidth()
                         .padding(horizontal = 20.dp)
                         .height(55.dp),
-                    color = MifosBlue,
+                    color = MaterialTheme.colorScheme.primary,
                     text = { Text(text = stringResource(id = R.string.feature_profile_link_bank_account)) },
                     onClick = onLinkAccount,
                     leadingIcon = {
@@ -128,8 +128,7 @@ internal class ProfilePreviewProvider : PreviewParameterProvider<ProfileUiState>
 @Preview(showSystemUi = true, showBackground = true)
 @Composable
 private fun ProfileScreenPreview(
-    @PreviewParameter(ProfilePreviewProvider::class)
-    profileState: ProfileUiState,
+    @PreviewParameter(ProfilePreviewProvider::class) profileState: ProfileUiState,
 ) {
     ProfileScreenContent(
         profileState = profileState,