refactor: openMF#1692 Use MaterialTheme colors for a uniform theme

Shermine237 · Jul 3, 2024 · ec923a4 · ec923a4
1 parent 7b6233c
commit ec923a4
Show file tree

Hide file tree

Showing 72 changed files with 419 additions and 303 deletions.
diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Button.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Button.kt
@@ -38,7 +38,7 @@ fun MifosButton(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
-    color: Color = MaterialTheme.colorScheme.onBackground,
+    color: Color = MaterialTheme.colorScheme.primary,
     content: @Composable RowScope.() -> Unit,
 ) {
     Button(

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/LoadingWheel.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/LoadingWheel.kt
@@ -146,7 +146,7 @@ fun MfOverlayLoadingWheel(contentDesc: String = "Loading") {
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .background(color = Color.Black.copy(alpha = 0.6f))
+            .background(color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f))
             .focusable(),
         contentAlignment = Alignment.Center
     ) {
@@ -160,7 +160,7 @@ fun MfOverlayLoadingWheel(contentDesc: String = "Loading") {
 @Composable
 fun MfLoadingWheel(
     contentDesc: String = "Loading",
-    backgroundColor: Color = Color.Black.copy(alpha = 0.6f)
+    backgroundColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
 ) {
     Box(
         modifier = Modifier

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosTopBar.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosTopBar.kt
@@ -6,6 +6,7 @@ import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
@@ -26,19 +27,20 @@ fun MifosTopBar(
         title = {
             Text(
                 text = stringResource(id = topBarTitle),
-                style = styleMifosTopBar
+                style = MaterialTheme.typography.titleLarge,
+                color = MaterialTheme.colorScheme.onSurface
             )
         },
         navigationIcon = {
             IconButton(onClick = { backPress.invoke() }) {
                 Icon(
                     imageVector = Icons.Filled.ArrowBack,
                     contentDescription = "Back",
-                    tint = mifosText
+                    tint = MaterialTheme.colorScheme.onSurface
                 )
             }
         },
-        colors = TopAppBarDefaults.mediumTopAppBarColors(containerColor = Color.White),
+        colors = TopAppBarDefaults.mediumTopAppBarColors(containerColor = MaterialTheme.colorScheme.surface),
         actions = actions
     )
 }
diff --git a/...designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/OutlineTextField.kt b/...designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/OutlineTextField.kt
@@ -3,6 +3,7 @@ package org.mifospay.core.designsystem.component
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
@@ -43,8 +44,8 @@ fun MifosOutlinedTextField(
                 Image(
                     painter = painterResource(id = icon),
                     contentDescription = null,
-                    colorFilter = if (isSystemInDarkTheme()) ColorFilter.tint(Color.White) else ColorFilter.tint(
-                        Color.Black
+                    colorFilter = ColorFilter.tint(
+                        MaterialTheme.colorScheme.onSurface
                     )
                 )
             }
@@ -53,11 +54,11 @@ fun MifosOutlinedTextField(
         maxLines = maxLines,
         singleLine = singleLine,
         colors = OutlinedTextFieldDefaults.colors(
-            focusedBorderColor = Color.Black,
-            focusedLabelColor = Color.Black
+            focusedBorderColor = MaterialTheme.colorScheme.onSurface,
+            focusedLabelColor = MaterialTheme.colorScheme.onSurface
         ),
         textStyle = LocalDensity.current.run {
-            TextStyle(fontSize = 18.sp, color = Color.Black)
+            TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
         },
         keyboardOptions = keyboardOptions,
         visualTransformation = visualTransformation,

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt
@@ -12,6 +12,7 @@ import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
@@ -62,11 +63,11 @@ fun MfOutlinedTextField(
         },
         keyboardOptions = keyboardOptions,
         colors = OutlinedTextFieldDefaults.colors(
-            focusedBorderColor = Color.Black,
-            focusedLabelColor = Color.Black
+            focusedBorderColor = MaterialTheme.colorScheme.onSurface,
+            focusedLabelColor = MaterialTheme.colorScheme.onSurface
         ),
         textStyle = LocalDensity.current.run {
-            TextStyle(fontSize = 18.sp, color = Color.Black)
+            TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
         }
     )
 }
@@ -133,10 +134,8 @@ fun MifosOutlinedTextField(
                 Image(
                     painter = painterResource(id = icon),
                     contentDescription = null,
-                    colorFilter = if (isSystemInDarkTheme()) {
-                        ColorFilter.tint(Color.White)
-                    } else ColorFilter.tint(
-                        Color.Black
+                    colorFilter = ColorFilter.tint(
+                        MaterialTheme.colorScheme.onSurface
                     )
                 )
             }
@@ -145,11 +144,11 @@ fun MifosOutlinedTextField(
         maxLines = maxLines,
         singleLine = singleLine,
         colors = OutlinedTextFieldDefaults.colors(
-            focusedBorderColor = Color.Black,
-            focusedLabelColor = Color.Black
+            focusedBorderColor = MaterialTheme.colorScheme.onSurface,
+            focusedLabelColor = MaterialTheme.colorScheme.onSurface
         ),
         textStyle = LocalDensity.current.run {
-            TextStyle(fontSize = 18.sp, color = Color.Black)
+            TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
         },
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
         keyboardActions = keyboardActions,
@@ -163,7 +162,7 @@ fun MifosOutlinedTextField(
 fun MfOutlinedTextFieldPreview() {
     MifosTheme {
         Box(
-            modifier = Modifier.background(color = Color.White)
+            modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)
         ) {
             MfOutlinedTextField(
                 modifier = Modifier,

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/EmptyContentScreen.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/EmptyContentScreen.kt
@@ -72,6 +72,7 @@ fun EmptyContentScreen(
                     .padding(start = 24.dp, end = 24.dp),
                 textAlign = TextAlign.Center,
                 style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurface
             )
         }
     }
@@ -82,7 +83,7 @@ fun EmptyContentScreen(
     modifier: Modifier = Modifier,
     title: String,
     subTitle: String,
-    iconTint: Color = LocalTintTheme.current.iconTint,
+    iconTint: Color = MaterialTheme.colorScheme.surfaceTint,
     iconDrawable: Int
 ) {
     EmptyContentScreen(
@@ -105,7 +106,7 @@ fun EmptyContentScreen(
     modifier: Modifier = Modifier,
     title: String,
     subTitle: String,
-    iconTint: Color = LocalTintTheme.current.iconTint,
+    iconTint: Color = MaterialTheme.colorScheme.surfaceTint,
     iconImageVector: ImageVector = Icons.Rounded.Search
 ) {
     EmptyContentScreen(

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/FaqItemScreen.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/FaqItemScreen.kt
@@ -51,7 +51,7 @@ fun FaqItemScreen(
             Text(
                 text = question.orEmpty(),
                 style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Bold),
-                color = Color.Black,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier = Modifier
                     .fillMaxWidth()
                     .weight(1f),
@@ -60,7 +60,7 @@ fun FaqItemScreen(
             Icon(
                 imageVector = Icons.Default.ArrowDropDown,
                 contentDescription = "drop down",
-                tint = Color.Black,
+                tint = MaterialTheme.colorScheme.onSurface,
                 modifier = Modifier
                     .scale(1f, if (isSelected) -1f else 1f)
             )
@@ -77,7 +77,7 @@ fun FaqItemScreen(
             Text(
                 text = answer.orEmpty(),
                 style = MaterialTheme.typography.bodyMedium,
-                color = Color.Black,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(bottom = 8.dp)

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/HeadingTitile.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/HeadingTitile.kt
@@ -6,6 +6,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -29,7 +30,7 @@ fun VerifyStepHeader(text: String, isVerified: Boolean) {
     ) {
         Text(
             text = text,
-            color = Color(0xFF212121),
+            color = MaterialTheme.colorScheme.onSurface,
             fontSize = 17.sp,
             overflow = TextOverflow.Ellipsis,
             modifier = Modifier
@@ -45,7 +46,7 @@ fun VerifyStepHeader(text: String, isVerified: Boolean) {
                 Icon(
                     imageVector = Icons.Default.Check,
                     contentDescription = null,
-                    tint = if (isVerified) Color.Black else Color.Gray,
+                    tint = if (isVerified) MaterialTheme.colorScheme.onSurface else Color.Gray,
                     modifier = Modifier.size(24.dp)
                 )
         }

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
@@ -1,6 +1,7 @@
 package org.mifospay.core.ui
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
@@ -26,8 +27,8 @@ fun MifosScrollableTabRow(
     tabContents: List<TabContent>,
     pagerState: PagerState,
     modifier: Modifier = Modifier,
-    containerColor: Color = Color.White,
-    selectedContentColor: Color = Color.Black,
+    containerColor: Color = MaterialTheme.colorScheme.surface,
+    selectedContentColor: Color = MaterialTheme.colorScheme.onSurface,
     unselectedContentColor: Color = Color.LightGray,
     edgePadding: Dp = 8.dp
 ) {
@@ -42,7 +43,8 @@ fun MifosScrollableTabRow(
     ) {
         tabContents.forEachIndexed { index, currentTab ->
             Tab(
-                text = { Text(text = currentTab.tabName) },
+                text = { Text(text = currentTab.tabName,
+                    color = MaterialTheme.colorScheme.onSurface) },
                 selected = pagerState.currentPage == index,
                 selectedContentColor = selectedContentColor,
                 unselectedContentColor = unselectedContentColor,

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
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -48,7 +49,7 @@ fun TransactionItemScreen(
                 }
             ),
             contentDescription = null,
-            colorFilter = ColorFilter.tint(Color.Black)
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface)
         )
         Column(
             modifier = Modifier
@@ -60,7 +61,7 @@ fun TransactionItemScreen(
                 style = TextStyle(
                     fontSize = 14.sp,
                     fontWeight = FontWeight(400),
-                    color = Color(0xFF000000),
+                    color = MaterialTheme.colorScheme.onSurface,
 
                     )
             )

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/utility/AddBtnChip.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/utility/AddBtnChip.kt
@@ -31,7 +31,7 @@ fun AddCardChip(
                 stringResource(text),
                 style = MaterialTheme.typography.bodyLarge.copy(
                     fontWeight = FontWeight.Bold,
-                    color = Color.White
+                    color = MaterialTheme.colorScheme.onPrimary
                 ),
                 modifier = Modifier.padding(horizontal = 8.dp)
             )
@@ -41,11 +41,11 @@ fun AddCardChip(
                 Icons.Filled.Add,
                 contentDescription = stringResource(btnText),
                 modifier = Modifier.size(16.dp),
-                tint = Color.White
+                tint = MaterialTheme.colorScheme.onPrimary
             )
         },
         colors = AssistChipDefaults.assistChipColors(
-            containerColor = Color.Black
+            containerColor = MaterialTheme.colorScheme.primary
         ),
     )
 }
diff --git a/feature/accounts/src/main/kotlin/org/mifospay/feature/bank/accounts/AccountsItem.kt b/feature/accounts/src/main/kotlin/org/mifospay/feature/bank/accounts/AccountsItem.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -29,7 +30,7 @@ fun AccountsItem(
 ) {
     MifosCard(
         onClick = { onAccountClicked.invoke() },
-        colors = CardDefaults.cardColors(Color.White)
+        colors = CardDefaults.cardColors(MaterialTheme.colorScheme.surface)
     ) {
         Column {
             Row(
@@ -49,12 +50,13 @@ fun AccountsItem(
                 Column {
                     Text(
                         text = bankAccountDetails.accountholderName.toString(),
-                        color = mifosText,
+                        color = MaterialTheme.colorScheme.onSurface,
                     )
                     Text(
                         text = bankAccountDetails.bankName.toString(),
                         modifier = Modifier.padding(top = 4.dp),
-                        style = styleMedium16sp.copy(mifosText)
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurface
                     )
                 }
                 Column(
@@ -65,7 +67,7 @@ fun AccountsItem(
                         text = bankAccountDetails.branch.toString(),
                         modifier = Modifier.padding(16.dp),
                         fontSize = 12.sp,
-                        color = mifosText
+                        color = MaterialTheme.colorScheme.onSurface
                     )
                 }
             }

diff --git a/feature/accounts/src/main/kotlin/org/mifospay/feature/bank/accounts/AccountsScreen.kt b/feature/accounts/src/main/kotlin/org/mifospay/feature/bank/accounts/AccountsScreen.kt
@@ -19,6 +19,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -110,7 +111,7 @@ fun AccountScreen(
                         modifier = Modifier,
                         title = stringResource(id = R.string.error_oops),
                         subTitle = stringResource(id = R.string.unexpected_error_subtitle),
-                        iconTint = Color.Black,
+                        iconTint = MaterialTheme.colorScheme.onSurface,
                         iconImageVector = Icons.Rounded.Info
                     )
                 }
@@ -125,7 +126,7 @@ fun AccountScreen(
                             Text(
                                 text = stringResource(id = R.string.linked_bank_account),
                                 fontSize = 16.sp,
-                                color = colorResource(id = R.color.colorTextPrimary),
+                                color = MaterialTheme.colorScheme.primary,
                                 modifier = Modifier.padding(top = 48.dp, start = 24.dp)
                             )
                         }
@@ -146,7 +147,7 @@ fun AccountScreen(
                                 modifier = Modifier
                                     .fillMaxWidth()
                                     .padding(16.dp)
-                                    .background(color = Color.White)
+                                    .background(MaterialTheme.colorScheme.surface)
                             ) {
                                 AddCardChip(
                                     modifier = Modifier.align(Alignment.Center),
@@ -162,7 +163,7 @@ fun AccountScreen(
                 AccountsUiState.Loading -> {
                     MfLoadingWheel(
                         contentDesc = stringResource(R.string.loading),
-                        backgroundColor = Color.White
+                        backgroundColor = MaterialTheme.colorScheme.surface
                     )
                 }