Merge pull request #4 from openMF/development

refactor: openMF#2636 Use MaterialTheme colors for a uniform theme (openMF#2637)
Shermine237 · Jul 1, 2024 · 42f3518 · 42f3518
2 parents 887864e + dc68f7a
commit 42f3518
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 35 deletions.
diff --git a/app/src/main/java/org/mifos/mobile/ui/about/AboutUsHeader.kt b/app/src/main/java/org/mifos/mobile/ui/about/AboutUsHeader.kt
@@ -33,7 +33,7 @@ fun AboutUsHeader() {
         Text(
             text = stringResource(id = R.string.app_name),
             style = MaterialTheme.typography.headlineMedium,
-            color = if (isSystemInDarkTheme()) Color.White else Color.Black,
+            color = MaterialTheme.colorScheme.onSurface,
             textAlign = TextAlign.Center,
             modifier = Modifier
                 .fillMaxWidth()
@@ -43,7 +43,7 @@ fun AboutUsHeader() {
         Text(
             text = stringResource(id = R.string.about_app_description),
             style = MaterialTheme.typography.titleSmall.copy(),
-            color = if (isSystemInDarkTheme()) Color.White else Color.Black,
+            color = MaterialTheme.colorScheme.onSurface,
             textAlign = TextAlign.Center,
             modifier = Modifier
                 .fillMaxWidth()

diff --git a/app/src/main/java/org/mifos/mobile/ui/about/AboutUsScreen.kt b/app/src/main/java/org/mifos/mobile/ui/about/AboutUsScreen.kt
@@ -10,6 +10,7 @@ import androidx.compose.ui.unit.dp
 import org.mifos.mobile.core.model.enums.AboutUsListItemId
 import org.mifos.mobile.core.ui.component.AboutUsItemCard
 import org.mifos.mobile.core.ui.component.MifosItemCard
+import org.mifos.mobile.core.ui.theme.MifosMobileTheme
 
 @Composable
 fun AboutUsScreen(viewModel: AboutUsViewModel) {
@@ -64,8 +65,10 @@ fun AboutUsScreen(viewModel: AboutUsViewModel) {
 
 }
 
+@Preview(showSystemUi = true, device = "id:pixel_5")
 @Composable
-@Preview
 fun AboutScreenPreview() {
-    AboutUsScreen(AboutUsViewModel())
+    MifosMobileTheme {
+        AboutUsScreen(AboutUsViewModel())
+    }
 }
diff --git a/app/src/main/java/org/mifos/mobile/ui/client_accounts/ClientAccountsScreen.kt b/app/src/main/java/org/mifos/mobile/ui/client_accounts/ClientAccountsScreen.kt
@@ -128,13 +128,12 @@ fun ClientAccountsScreen(
                     1 -> openNextActivity(currentPage)
                 }
             },
-            contentColor = if (isSystemInDarkTheme()) MaterialTheme.colorScheme.secondary
-            else MaterialTheme.colorScheme.primary,
+            contentColor = MaterialTheme.colorScheme.primary,
             content = {
                 Icon(
                     imageVector = MifosIcons.Add,
                     contentDescription = "Create Account",
-                    tint = if (isSystemInDarkTheme()) Color.Black else Color.White
+                    tint = MaterialTheme.colorScheme.onSurface
                 )
             }
         ),

diff --git a/app/src/main/java/org/mifos/mobile/ui/help/HelpScreen.kt b/app/src/main/java/org/mifos/mobile/ui/help/HelpScreen.kt
@@ -61,7 +61,7 @@ fun HelpScreen(
                 .fillMaxWidth()
                 .padding(start = 16.dp, end = 16.dp, top = 12.dp, bottom = 8.dp),
             style = MaterialTheme.typography.titleMedium,
-            color = if (isSystemInDarkTheme()) Color.White else Color.Black
+            color = MaterialTheme.colorScheme.onSurface
         )
 
         if (!faqArrayList.isNullOrEmpty()) {

diff --git a/app/src/main/java/org/mifos/mobile/ui/login/LoginScreen.kt b/app/src/main/java/org/mifos/mobile/ui/login/LoginScreen.kt
@@ -23,6 +23,7 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Divider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -47,6 +48,7 @@ import androidx.compose.ui.unit.sp
 import org.mifos.mobile.R
 import org.mifos.mobile.core.ui.component.MifosMobileIcon
 import org.mifos.mobile.core.ui.component.MifosOutlinedTextField
+import org.mifos.mobile.core.ui.theme.MifosMobileTheme
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
@@ -164,9 +166,7 @@ fun LoginScreen(
                 .padding(start = 16.dp, end = 16.dp, top = 4.dp),
             contentPadding = PaddingValues(12.dp),
             colors = ButtonDefaults.buttonColors(
-                containerColor = if (isSystemInDarkTheme()) Color(
-                    0xFF9bb1e3
-                ) else Color(0xFF325ca8)
+                containerColor = MaterialTheme.colorScheme.primary
             )
         ) {
             Text(text = stringResource(id = R.string.login))
@@ -189,7 +189,7 @@ fun LoginScreen(
                 modifier = Modifier.padding(8.dp),
                 text = "or",
                 fontSize = 18.sp,
-                color = if (isSystemInDarkTheme()) Color.White else Color.Black
+                color = MaterialTheme.colorScheme.onSurface
             )
             Divider(
                 modifier = Modifier
@@ -207,18 +207,18 @@ fun LoginScreen(
                 .fillMaxWidth()
                 .align(Alignment.CenterHorizontally),
             colors = ButtonDefaults.textButtonColors(
-                contentColor = if (isSystemInDarkTheme()) Color(
-                    0xFF9bb1e3
-                ) else Color(0xFF325ca8)
+                contentColor = MaterialTheme.colorScheme.primary
             )
         ) {
             Text(text = stringResource(id = R.string.create_an_account))
         }
     }
 }
 
-@Preview(showSystemUi = true, uiMode = UI_MODE_NIGHT_NO)
+@Preview(showSystemUi = true, device = "id:pixel_5")
 @Composable
-fun LoginScreenPreview() {
-    LoginScreen({ _, _ -> }, {}, { "" }, { "" })
+fun LoanScreenPreview() {
+    MifosMobileTheme {
+        LoginScreen({ _, _ -> }, {}, { "" }, { "" })
+    }
 }
diff --git a/app/src/main/java/org/mifos/mobile/ui/user_profile/UserProfileDetails.kt b/app/src/main/java/org/mifos/mobile/ui/user_profile/UserProfileDetails.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 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
@@ -31,7 +32,7 @@ fun UserProfileDetails(
         Text(
             modifier = Modifier.padding(top = 16.dp, start = 8.dp),
             text = stringResource(id = R.string.user_details),
-            color = Color(0xFF8E9099),
+            color = MaterialTheme.colorScheme.onSecondary,
             style = TextStyle(fontSize = 12.sp, fontWeight = FontWeight.SemiBold),
         )
         Row(
@@ -41,13 +42,13 @@ fun UserProfileDetails(
             Icon(
                 modifier = Modifier.padding(top = 8.dp, end = 8.dp),
                 painter = painterResource(id = R.drawable.ic_phone_24dp),
-                tint = if (isSystemInDarkTheme()) Color(0xFF9bb1e3) else Color(0xFF325ca8),
+                tint = MaterialTheme.colorScheme.surfaceTint,
                 contentDescription = null
             )
             userDetails.phoneNumber?.let {
                 Text(
                     text = it,
-                    color = if (isSystemInDarkTheme()) Color.White else Color.Black,
+                    color = MaterialTheme.colorScheme.onSurface,
                     style = TextStyle(fontSize = 14.sp)
                 )
             }
@@ -59,13 +60,13 @@ fun UserProfileDetails(
             Icon(
                 modifier = Modifier.padding(top = 8.dp, end = 8.dp),
                 painter = painterResource(id = R.drawable.ic_cake_24dp),
-                tint = if (isSystemInDarkTheme()) Color(0xFF9bb1e3) else Color(0xFF325ca8),
+                tint = MaterialTheme.colorScheme.surfaceTint,
                 contentDescription = null
             )
             userDetails.dob?.let {
                 Text(
                     text = it,
-                    color = if (isSystemInDarkTheme()) Color.White else Color.Black,
+                    color = MaterialTheme.colorScheme.onSurface,
                     style = TextStyle(fontSize = 14.sp)
                 )
             }
@@ -77,13 +78,13 @@ fun UserProfileDetails(
             Icon(
                 modifier = Modifier.padding(top = 8.dp, end = 8.dp),
                 painter = painterResource(id = R.drawable.ic_gender_24dp),
-                tint = if (isSystemInDarkTheme()) Color(0xFF9bb1e3) else Color(0xFF325ca8),
+                tint = MaterialTheme.colorScheme.surfaceTint,
                 contentDescription = null
             )
             userDetails.gender?.let {
                 Text(
                     text = it,
-                    color = if (isSystemInDarkTheme()) Color.White else Color.Black,
+                    color = MaterialTheme.colorScheme.onSurface,
                     style = TextStyle(fontSize = 14.sp)
                 )
             }

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -50,7 +50,7 @@
     <!--<color name="primary">#068799</color>-->
     <!--<color name="primary_dark">#006978</color>-->
     <!--<color name="primary_light">#56c8d8</color>-->
-    <color name="primary">#03A9F4</color>
+    <color name="primary">#FF325ca8</color>
     <color name="primary_dark">#0288D1</color>
     <color name="primary_light">#B3E5FC</color>
     <color name="accent">#FF4081</color>

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -1,6 +1,8 @@
 <resources>
 
-    <style name="AppTheme" parent="Mifos.DesignSystem.Theme.Base" />
+    <style name="AppTheme" parent="Mifos.DesignSystem.Theme.Base">
+        <item name="colorPrimary">@color/primary</item>
+    </style>
 
     <style name="SplashTheme" parent="Mifos.DesignSystem.Theme.Base">
         <item name="android:windowBackground">@drawable/splash_background</item>

diff --git a/...tration/src/main/java/org/mifos/mobile/feature/registration/screens/RegistrationScreen.kt b/...tration/src/main/java/org/mifos/mobile/feature/registration/screens/RegistrationScreen.kt
@@ -72,6 +72,7 @@ import org.mifos.mobile.core.ui.theme.MifosMobileTheme
 import org.mifos.mobile.feature.registration.utils.PasswordStrength
 import org.mifos.mobile.feature.registration.viewmodel.RegistrationViewModel
 
+
 /**
  * @author pratyush
  * @since 28/12/2023
@@ -343,7 +344,7 @@ fun RegistrationContent(
             Text(
                 text = stringResource(id = R.string.verification_mode),
                 modifier = Modifier.padding(end = 8.dp),
-                color = if (isSystemInDarkTheme()) Color.White else Color.Black
+                color = MaterialTheme.colorScheme.onSurface
             )
             radioOptions.forEach { authMode ->
                 RadioButton(
@@ -352,7 +353,7 @@ fun RegistrationContent(
                 )
                 Text(
                     text = authMode,
-                    color = if (isSystemInDarkTheme()) Color.White else Color.Black
+                    color = MaterialTheme.colorScheme.onSurface
                 )
             }
         }
@@ -568,6 +569,7 @@ class RegistrationScreenPreviewProvider : PreviewParameterProvider<RegistrationS
 
 @Preview(showSystemUi = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
+
 private fun RegistrationScreenPreview(
     @PreviewParameter(RegistrationScreenPreviewProvider::class) registrationUiState: RegistrationState
 ) {
@@ -579,5 +581,6 @@ private fun RegistrationScreenPreview(
             { _, _, _, _, _, _, _, _, _ -> },
             { 0f }
         )
+
     }
 }
diff --git a/...main/java/org/mifos/mobile/feature/registration/screens/RegistrationVerificationScreen.kt b/...main/java/org/mifos/mobile/feature/registration/screens/RegistrationVerificationScreen.kt
@@ -18,6 +18,7 @@ import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -238,8 +239,7 @@ fun RegistrationVerificationContent(verifyUser: (authenticationToken: String, re
                 .padding(start = 16.dp, end = 16.dp, top = 12.dp),
             contentPadding = PaddingValues(12.dp),
             colors = ButtonDefaults.buttonColors(
-                containerColor = if (isSystemInDarkTheme()) Color(0xFF9bb1e3)
-                else Color(0xFF325ca8)
+                containerColor = MaterialTheme.colorScheme.primary
             )
         ) {
             Text(text = stringResource(id = R.string.verify))

diff --git a/ui/src/main/java/org/mifos/mobile/core/ui/component/MifosOutlinedTextField.kt b/ui/src/main/java/org/mifos/mobile/core/ui/component/MifosOutlinedTextField.kt
@@ -47,7 +47,7 @@ fun MifosOutlinedTextField(
     imeAction: ImeAction = ImeAction.Next,
     modifier: Modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
     colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(
-        focusedBorderColor = if (isSystemInDarkTheme()) Color(0xFF9bb1e3) else Color(0xFF325ca8)
+        focusedBorderColor = MaterialTheme.colorScheme.primary
     )
 ) {
     OutlinedTextField(

diff --git a/ui/src/main/java/org/mifos/mobile/core/ui/component/MifosTextButtonWithTopDrawable.kt b/ui/src/main/java/org/mifos/mobile/core/ui/component/MifosTextButtonWithTopDrawable.kt
@@ -10,6 +10,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Phone
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -36,9 +37,7 @@ fun MifosTextButtonWithTopDrawable(
         onClick = { onClick.invoke() },
         modifier = modifier,
         colors = ButtonDefaults.textButtonColors(
-            contentColor = if (isSystemInDarkTheme()) Color(
-                0xFF9bb1e3
-            ) else Color(0xFF325ca8)
+            contentColor = MaterialTheme.colorScheme.primary
         ),
         content = {
             Column(