refactor: Redesign finance screen (#1777)

* refactor: Redesign payment screen * resolved detekt error * refactor : changed current theme instead of using NewUi * resolved spotless errors * refactor: Redesign finance screen UI * resolved spotless errors * resolved conflicts * changed structure of accounts screen * refactor padding values in finance screen
openMF · Oct 3, 2024 · 845b4fd · 845b4fd
1 parent da4106f
commit 845b4fd
Show file tree

Hide file tree

Showing 7 changed files with 247 additions and 55 deletions.
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
@@ -66,6 +66,7 @@ fun EmptyContentScreen(
                     .fillMaxWidth()
                     .padding(start = 24.dp, end = 24.dp),
                 textAlign = TextAlign.Center,
+                color = MaterialTheme.colorScheme.primary,
                 style = MaterialTheme.typography.titleMedium,
                 fontWeight = FontWeight.Bold,
             )
@@ -76,9 +77,9 @@ fun EmptyContentScreen(
                 text = subTitle,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(start = 24.dp, end = 24.dp),
+                    .padding(start = 37.dp, end = 37.dp),
                 textAlign = TextAlign.Center,
-                style = MaterialTheme.typography.bodyMedium,
+                style = MaterialTheme.typography.bodyLarge,
                 color = MaterialTheme.colorScheme.onSurface,
             )
         }
@@ -98,7 +99,7 @@ fun EmptyContentScreen(
         subTitle = subTitle,
         imageContent = {
             Image(
-                modifier = Modifier.size(64.dp),
+                modifier = Modifier.size(200.dp),
                 painter = painterResource(id = iconDrawable),
                 colorFilter = if (iconTint != Color.Unspecified) ColorFilter.tint(iconTint) else null,
                 contentDescription = null,

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
@@ -40,9 +40,10 @@ fun AddCardChip(
                     fontWeight = FontWeight.Bold,
                     color = MaterialTheme.colorScheme.onPrimary,
                 ),
-                modifier = Modifier.padding(horizontal = 8.dp),
+                modifier = Modifier.padding(horizontal = 8.dp, vertical = 9.dp),
             )
         },
+        border = null,
         leadingIcon = {
             Icon(
                 imageVector = MifosIcons.Add,

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
@@ -9,22 +9,20 @@
  */
 package org.mifospay.feature.bank.accounts
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 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.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
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import com.mifospay.core.model.domain.BankAccountDetails
 import org.mifospay.core.designsystem.component.MifosCard
 
@@ -35,49 +33,33 @@ internal fun AccountsItem(
     modifier: Modifier = Modifier,
 ) {
     MifosCard(
-        modifier = modifier,
+        modifier = modifier.padding(vertical = 15.dp),
         onClick = { onAccountClicked.invoke() },
-        colors = CardDefaults.cardColors(MaterialTheme.colorScheme.surface),
+        colors = CardDefaults.cardColors(Color.Transparent),
+        elevation = 0.dp,
     ) {
         Column {
             Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 16.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.fillMaxWidth(),
             ) {
-                Icon(
-                    painter = painterResource(id = R.drawable.feature_accounts_ic_bank),
-                    contentDescription = null,
-                    modifier = Modifier
-                        .align(Alignment.CenterVertically)
-                        .padding(start = 16.dp, end = 16.dp)
-                        .size(39.dp),
+                Text(
+                    text = bankAccountDetails.accountholderName.toString(),
+                    color = MaterialTheme.colorScheme.onSurface,
+                    style = MaterialTheme.typography.bodyLarge,
+                )
+                Text(
+                    text = bankAccountDetails.branch.toString(),
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurface,
                 )
-
-                Column {
-                    Text(
-                        text = bankAccountDetails.accountholderName.toString(),
-                        color = MaterialTheme.colorScheme.onSurface,
-                    )
-                    Text(
-                        text = bankAccountDetails.bankName.toString(),
-                        modifier = Modifier.padding(top = 4.dp),
-                        style = MaterialTheme.typography.bodyMedium,
-                        color = MaterialTheme.colorScheme.onSurface,
-                    )
-                }
-                Column(
-                    horizontalAlignment = Alignment.End,
-                    modifier = Modifier.fillMaxWidth(),
-                ) {
-                    Text(
-                        text = bankAccountDetails.branch.toString(),
-                        modifier = Modifier.padding(16.dp),
-                        fontSize = 12.sp,
-                        color = MaterialTheme.colorScheme.onSurface,
-                    )
-                }
             }
+            Text(
+                text = bankAccountDetails.bankName.toString(),
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f),
+            )
         }
     }
 }

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
@@ -24,10 +24,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.mifos.library.pullrefresh.PullRefreshIndicator
 import com.mifos.library.pullrefresh.pullRefresh
@@ -102,14 +103,16 @@ private fun AccountScreen(
                     LazyColumn(
                         modifier = Modifier
                             .weight(1f)
-                            .fillMaxSize(),
+                            .fillMaxSize()
+                            .padding(horizontal = 25.dp, vertical = 7.dp),
                     ) {
                         item {
                             Text(
                                 text = stringResource(id = R.string.feature_accounts_linked_bank_account),
-                                fontSize = 16.sp,
+                                style = MaterialTheme.typography.bodyLarge,
+                                fontWeight = FontWeight.Bold,
                                 color = MaterialTheme.colorScheme.primary,
-                                modifier = Modifier.padding(top = 48.dp, start = 24.dp),
+                                modifier = Modifier.padding(vertical = 25.dp),
                             )
                         }
                         items(bankAccountDetailsList) { bankAccountDetails ->
@@ -120,16 +123,14 @@ private fun AccountScreen(
                                     onUpdateAccount(bankAccountDetails, index)
                                 },
                             )
-                            HorizontalDivider(
-                                modifier = Modifier.padding(8.dp),
-                            )
+                            HorizontalDivider(color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.05f))
                         }
                         item {
                             Box(
                                 modifier = Modifier
                                     .fillMaxWidth()
                                     .padding(16.dp)
-                                    .background(MaterialTheme.colorScheme.surface),
+                                    .background(Color.Transparent),
                             ) {
                                 AddCardChip(
                                     text = R.string.feature_accounts_add_account,

diff --git a/feature/accounts/src/main/res/values/strings.xml b/feature/accounts/src/main/res/values/strings.xml
@@ -26,7 +26,7 @@
     <string name="feature_accounts_other_banks">Other Banks</string>
     <string name="feature_accounts_error_oops">Oops!</string>
     <string name="feature_accounts_unexpected_error_subtitle">An unexpected error occurred. Please try again.</string>
-    <string name="feature_accounts_linked_bank_account">Linked bank accounts</string>
+    <string name="feature_accounts_linked_bank_account">Linked Bank Accounts</string>
     <string name="feature_accounts_add_account">ADD ACCOUNT</string>
     <string name="feature_accounts_add_cards">Please Add Cards</string>
     <string name="feature_accounts_no_linked_bank_accounts">No Linked Bank Accounts</string>

diff --git a/feature/savedcards/src/main/kotlin/org/mifospay/feature/savedcards/CardsScreen.kt b/feature/savedcards/src/main/kotlin/org/mifospay/feature/savedcards/CardsScreen.kt
@@ -42,6 +42,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -154,8 +155,8 @@ internal fun CardsScreen(
                     title = stringResource(id = R.string.feature_savedcards_error_oops),
                     subTitle = stringResource(id = R.string.feature_savedcards_unexpected_error_subtitle),
                     modifier = Modifier,
-                    iconTint = MaterialTheme.colorScheme.primary,
-                    iconImageVector = MifosIcons.Info,
+                    iconTint = Color.Unspecified,
+                    iconDrawable = R.drawable.artwork,
                 )
             }