refactor: Redesign payment screen (#1773)

* refactor: Redesign payment screen * resolved detekt error * refactor : changed current theme instead of using NewUi * resolved spotless errors
openMF · Oct 1, 2024 · da4106f · da4106f
1 parent 8bd08c2
commit da4106f
Show file tree

Hide file tree

Showing 17 changed files with 549 additions and 213 deletions.
diff --git a/build-logic/convention/src/main/kotlin/org/mifospay/Detekt.kt b/build-logic/convention/src/main/kotlin/org/mifospay/Detekt.kt
@@ -5,9 +5,11 @@ import io.gitlab.arturbosch.detekt.extensions.DetektExtension
 import org.gradle.api.Project
 import org.gradle.kotlin.dsl.dependencies
 import org.gradle.kotlin.dsl.named
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
 internal fun Project.configureDetekt(extension: DetektExtension) = extension.apply {
     tasks.named<Detekt>("detekt") {
+        jvmTarget = "17"
         reports {
             xml.required.set(true)
             html.required.set(true)

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/IconBox.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/IconBox.kt
@@ -12,6 +12,7 @@ package org.mifospay.core.designsystem.component
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedIconButton
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
@@ -21,7 +22,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.mifospay.core.designsystem.icon.MifosIcons
 import org.mifospay.core.designsystem.theme.MifosTheme
-import org.mifospay.core.designsystem.theme.NewUi
 
 @Composable
 fun IconBox(
@@ -33,7 +33,7 @@ fun IconBox(
         onClick = onClick,
         modifier = modifier,
         shape = RoundedCornerShape(12.dp),
-        border = BorderStroke(2.dp, NewUi.onSurface.copy(alpha = 0.1f)),
+        border = BorderStroke(2.dp, MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)),
     ) {
         Icon(
             imageVector = icon,

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosScaffold.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosScaffold.kt
@@ -12,6 +12,7 @@ package org.mifospay.core.designsystem.component
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -43,6 +44,7 @@ fun MifosScaffold(
                     onClick = content.onClick,
                     contentColor = content.contentColor,
                     content = content.content,
+                    containerColor = MaterialTheme.colorScheme.primary,
                 )
             }
         },

diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosTab.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosTab.kt
@@ -9,31 +9,43 @@
  */
 package org.mifospay.core.designsystem.component
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun MifosTab(
     text: String,
     selected: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    selectedContentColor: Color = MaterialTheme.colorScheme.onSurface,
-    unselectedContentColor: Color = Color.LightGray,
+    selectedContentColor: Color = MaterialTheme.colorScheme.primary,
+    unselectedContentColor: Color = MaterialTheme.colorScheme.primaryContainer,
 ) {
     Tab(
         text = {
             Text(
                 text = text,
-                color = MaterialTheme.colorScheme.onSurface,
+                color = if (selected) {
+                    MaterialTheme.colorScheme.onPrimary
+                } else {
+                    MaterialTheme.colorScheme.onSurface
+                },
             )
         },
         selected = selected,
-        modifier = modifier,
+        modifier = modifier
+            .clip(RoundedCornerShape(25.dp))
+            .background(if (selected) selectedContentColor else unselectedContentColor)
+            .padding(horizontal = 20.dp),
         selectedContentColor = selectedContentColor,
         unselectedContentColor = unselectedContentColor,
         onClick = onClick,

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
@@ -14,6 +14,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -57,7 +58,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.mifospay.core.designsystem.theme.MifosTheme
-import org.mifospay.core.designsystem.theme.NewUi
 
 @Composable
 fun MfOutlinedTextField(
@@ -84,18 +84,15 @@ fun MfOutlinedTextField(
         },
         singleLine = singleLine,
         trailingIcon = trailingIcon,
-        keyboardActions =
-        KeyboardActions {
+        keyboardActions = KeyboardActions {
             onKeyboardActions?.invoke()
         },
         keyboardOptions = keyboardOptions,
-        colors =
-        OutlinedTextFieldDefaults.colors(
+        colors = OutlinedTextFieldDefaults.colors(
             focusedBorderColor = MaterialTheme.colorScheme.onSurface,
             focusedLabelColor = MaterialTheme.colorScheme.onSurface,
         ),
-        textStyle =
-        LocalDensity.current.run {
+        textStyle = LocalDensity.current.run {
             TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
         },
     )
@@ -118,8 +115,7 @@ fun MfPasswordTextField(
         onValueChange = onPasswordChange,
         label = { Text(label) },
         isError = isError,
-        visualTransformation =
-        if (isPasswordVisible) {
+        visualTransformation = if (isPasswordVisible) {
             VisualTransformation.None
         } else {
             PasswordVisualTransformation()
@@ -157,14 +153,12 @@ fun MifosOutlinedTextField(
         onValueChange = onValueChange,
         label = { Text(stringResource(id = label)) },
         modifier = modifier,
-        leadingIcon =
-        if (icon != null) {
+        leadingIcon = if (icon != null) {
             {
                 Image(
                     painter = painterResource(id = icon),
                     contentDescription = null,
-                    colorFilter =
-                    ColorFilter.tint(
+                    colorFilter = ColorFilter.tint(
                         MaterialTheme.colorScheme.onSurface,
                     ),
                 )
@@ -175,13 +169,11 @@ fun MifosOutlinedTextField(
         trailingIcon = trailingIcon,
         maxLines = maxLines,
         singleLine = singleLine,
-        colors =
-        OutlinedTextFieldDefaults.colors(
+        colors = OutlinedTextFieldDefaults.colors(
             focusedBorderColor = MaterialTheme.colorScheme.onSurface,
             focusedLabelColor = MaterialTheme.colorScheme.onSurface,
         ),
-        textStyle =
-        LocalDensity.current.run {
+        textStyle = LocalDensity.current.run {
             TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
         },
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
@@ -209,6 +201,9 @@ fun MifosTextField(
     minLines: Int = 1,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     keyboardOptions: KeyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
+    trailingIcon: @Composable (() -> Unit)? = null,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    indicatorColor: Color? = null,
 ) {
     var isFocused by rememberSaveable { mutableStateOf(false) }
 
@@ -232,31 +227,56 @@ fun MifosTextField(
         singleLine = singleLine,
         maxLines = maxLines,
         minLines = minLines,
-        cursorBrush = SolidColor(NewUi.primaryColor),
+        cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
         decorationBox = { innerTextField ->
             Column {
                 Text(
                     text = label,
-                    color = NewUi.primaryColor,
+                    color = MaterialTheme.colorScheme.primary,
                     style = MaterialTheme.typography.labelLarge,
                     modifier = Modifier.align(alignment = Alignment.Start),
                 )
 
                 Spacer(modifier = Modifier.height(5.dp))
 
-                innerTextField()
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.fillMaxWidth(),
+                ) {
+                    if (leadingIcon != null) {
+                        leadingIcon()
+                    }
 
-                Spacer(modifier = Modifier.height(5.dp))
-                HorizontalDivider(
-                    thickness = 1.dp,
-                    color = if (isFocused) {
-                        NewUi.secondaryColor
-                    } else {
-                        NewUi.onSurface.copy(alpha = 0.05f)
-                    },
-                )
+                    Box(modifier = Modifier.weight(1f)) {
+                        innerTextField()
+                    }
+
+                    if (trailingIcon != null) {
+                        trailingIcon()
+                    }
+                }
+                indicatorColor?.let { color ->
+                    HorizontalDivider(
+                        thickness = 1.dp,
+                        color = if (isFocused) {
+                            color
+                        } else {
+                            MaterialTheme.colorScheme.onSurface.copy(alpha = 0.05f)
+                        },
+                    )
+                } ?: run {
+                    HorizontalDivider(
+                        thickness = 1.dp,
+                        color = if (isFocused) {
+                            MaterialTheme.colorScheme.primary
+                        } else {
+                            MaterialTheme.colorScheme.onSurface.copy(alpha = 0.05f)
+                        },
+                    )
+                }
             }
         },
+
     )
 }
 

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
@@ -11,9 +11,9 @@ package org.mifospay.core.designsystem.theme
 
 import androidx.compose.ui.graphics.Color
 
-val md_theme_light_primary = Color(0xFF000000)
-val md_theme_light_onPrimary = Color(0xFFFFFFFF)
-val md_theme_light_primaryContainer = Color(0xFFFFD9E2)
+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_secondary = Color(0xFF984061)
 val md_theme_light_onSecondary = Color(0xFFFFFFFF)
@@ -30,7 +30,7 @@ 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_onSurface = Color(0xFF000000)
+val md_theme_light_onSurface = Color(0xFF333333) // onSurface
 val md_theme_light_surfaceVariant = Color(0xFFF2DDE1)
 val md_theme_light_onSurfaceVariant = Color(0xFF514347)
 val md_theme_light_outline = Color(0xFF837377)

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.surface,
-    selectedContentColor: Color = MaterialTheme.colorScheme.onSurface,
-    unselectedContentColor: Color = Color.LightGray,
+    containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
+    selectedContentColor: Color = MaterialTheme.colorScheme.primary,
+    unselectedContentColor: Color = MaterialTheme.colorScheme.primaryContainer,
     edgePadding: Dp = 8.dp,
 ) {
     val scope = rememberCoroutineScope()
@@ -41,6 +41,8 @@ fun MifosScrollableTabRow(
         containerColor = containerColor,
         selectedTabIndex = pagerState.currentPage,
         edgePadding = edgePadding,
+        indicator = {},
+        divider = {},
     ) {
         tabContents.forEachIndexed { index, currentTab ->
             MifosTab(

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
@@ -10,6 +10,7 @@
 package org.mifospay.feature.history
 
 import android.widget.Toast
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -21,6 +22,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -46,7 +49,6 @@ import org.mifospay.core.designsystem.component.MifosBottomSheet
 import org.mifospay.core.designsystem.component.MifosButton
 import org.mifospay.core.designsystem.component.MifosLoadingWheel
 import org.mifospay.core.designsystem.icon.MifosIcons
-import org.mifospay.core.designsystem.theme.lightGrey
 import org.mifospay.core.ui.EmptyContentScreen
 import org.mifospay.core.ui.TransactionItemScreen
 import org.mifospay.feature.transaction.detail.TransactionDetailScreen
@@ -141,6 +143,8 @@ private fun HistoryScreen(
                                 modifier = Modifier
                                     .clickable { transactionDetailState = it },
                             )
+                            HorizontalDivider(thickness = 0.5.dp, modifier = Modifier.padding(5.dp))
+                            Spacer(modifier = Modifier.height(15.dp))
                         }
                     }
                 }
@@ -178,9 +182,19 @@ private fun Chip(
     modifier: Modifier = Modifier,
 ) {
     val context = LocalContext.current
-    val backgroundColor = if (selected) MaterialTheme.colorScheme.primary else lightGrey
+    val backgroundColor = MaterialTheme.colorScheme.onPrimary
     MifosButton(
-        modifier = modifier,
+        modifier = modifier.then(
+            if (selected) {
+                Modifier.border(
+                    width = 1.dp,
+                    color = MaterialTheme.colorScheme.primary,
+                    shape = RoundedCornerShape(25.dp),
+                )
+            } else {
+                Modifier
+            },
+        ),
         onClick = {
             onClick()
             Toast.makeText(context, label, Toast.LENGTH_SHORT).show()
@@ -190,7 +204,7 @@ private fun Chip(
         Text(
             modifier = Modifier.padding(top = 4.dp, bottom = 4.dp, start = 16.dp, end = 16.dp),
             text = label,
-            color = if (selected) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onSurface,
+            color = MaterialTheme.colorScheme.onSurface,
         )
     }
 }