Skip to content

Commit da4106f

Browse files
Nagarjuna0033Nagarjuna0033
authored
refactor: Redesign payment screen (#1773)
* refactor: Redesign payment screen * resolved detekt error * refactor : changed current theme instead of using NewUi * resolved spotless errors
1 parent 8bd08c2 commit da4106f

File tree

17 files changed

+549
-213
lines changed

17 files changed

+549
-213
lines changed

‎build-logic/convention/src/main/kotlin/org/mifospay/Detekt.kt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import io.gitlab.arturbosch.detekt.extensions.DetektExtension
55
import org.gradle.api.Project
66
import org.gradle.kotlin.dsl.dependencies
77
import org.gradle.kotlin.dsl.named
8+
import org.jetbrains.kotlin.gradle.dsl.JvmTarget
89

910
internal fun Project.configureDetekt(extension: DetektExtension) = extension.apply {
1011
tasks.named<Detekt>("detekt") {
12+
jvmTarget = "17"
1113
reports {
1214
xml.required.set(true)
1315
html.required.set(true)

‎core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/IconBox.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ package org.mifospay.core.designsystem.component
1212
import androidx.compose.foundation.BorderStroke
1313
import androidx.compose.foundation.shape.RoundedCornerShape
1414
import androidx.compose.material3.Icon
15+
import androidx.compose.material3.MaterialTheme
1516
import androidx.compose.material3.OutlinedIconButton
1617
import androidx.compose.material3.Surface
1718
import androidx.compose.runtime.Composable
@@ -21,7 +22,6 @@ import androidx.compose.ui.tooling.preview.Preview
2122
import androidx.compose.ui.unit.dp
2223
import org.mifospay.core.designsystem.icon.MifosIcons
2324
import org.mifospay.core.designsystem.theme.MifosTheme
24-
import org.mifospay.core.designsystem.theme.NewUi
2525

2626
@Composable
2727
fun IconBox(
@@ -33,7 +33,7 @@ fun IconBox(
3333
onClick = onClick,
3434
modifier = modifier,
3535
shape = RoundedCornerShape(12.dp),
36-
border = BorderStroke(2.dp, NewUi.onSurface.copy(alpha = 0.1f)),
36+
border = BorderStroke(2.dp, MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)),
3737
) {
3838
Icon(
3939
imageVector = icon,

‎core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosScaffold.kt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ package org.mifospay.core.designsystem.component
1212
import androidx.compose.foundation.layout.PaddingValues
1313
import androidx.compose.foundation.layout.RowScope
1414
import androidx.compose.material3.FloatingActionButton
15+
import androidx.compose.material3.MaterialTheme
1516
import androidx.compose.material3.Scaffold
1617
import androidx.compose.runtime.Composable
1718
import androidx.compose.ui.Modifier
@@ -43,6 +44,7 @@ fun MifosScaffold(
4344
onClick = content.onClick,
4445
contentColor = content.contentColor,
4546
content = content.content,
47+
containerColor = MaterialTheme.colorScheme.primary,
4648
)
4749
}
4850
},

‎core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosTab.kt

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,43 @@
99
*/
1010
package org.mifospay.core.designsystem.component
1111

12+
import androidx.compose.foundation.background
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.shape.RoundedCornerShape
1215
import androidx.compose.material3.MaterialTheme
1316
import androidx.compose.material3.Tab
1417
import androidx.compose.material3.Text
1518
import androidx.compose.runtime.Composable
1619
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.draw.clip
1721
import androidx.compose.ui.graphics.Color
22+
import androidx.compose.ui.unit.dp
1823

1924
@Composable
2025
fun MifosTab(
2126
text: String,
2227
selected: Boolean,
2328
onClick: () -> Unit,
2429
modifier: Modifier = Modifier,
25-
selectedContentColor: Color = MaterialTheme.colorScheme.onSurface,
26-
unselectedContentColor: Color = Color.LightGray,
30+
selectedContentColor: Color = MaterialTheme.colorScheme.primary,
31+
unselectedContentColor: Color = MaterialTheme.colorScheme.primaryContainer,
2732
) {
2833
Tab(
2934
text = {
3035
Text(
3136
text = text,
32-
color = MaterialTheme.colorScheme.onSurface,
37+
color = if (selected) {
38+
MaterialTheme.colorScheme.onPrimary
39+
} else {
40+
MaterialTheme.colorScheme.onSurface
41+
},
3342
)
3443
},
3544
selected = selected,
36-
modifier = modifier,
45+
modifier = modifier
46+
.clip(RoundedCornerShape(25.dp))
47+
.background(if (selected) selectedContentColor else unselectedContentColor)
48+
.padding(horizontal = 20.dp),
3749
selectedContentColor = selectedContentColor,
3850
unselectedContentColor = unselectedContentColor,
3951
onClick = onClick,

‎core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import androidx.compose.foundation.background
1414
import androidx.compose.foundation.interaction.MutableInteractionSource
1515
import androidx.compose.foundation.layout.Box
1616
import androidx.compose.foundation.layout.Column
17+
import androidx.compose.foundation.layout.Row
1718
import androidx.compose.foundation.layout.Spacer
1819
import androidx.compose.foundation.layout.fillMaxWidth
1920
import androidx.compose.foundation.layout.height
@@ -57,7 +58,6 @@ import androidx.compose.ui.tooling.preview.Preview
5758
import androidx.compose.ui.unit.dp
5859
import androidx.compose.ui.unit.sp
5960
import org.mifospay.core.designsystem.theme.MifosTheme
60-
import org.mifospay.core.designsystem.theme.NewUi
6161

6262
@Composable
6363
fun MfOutlinedTextField(
@@ -84,18 +84,15 @@ fun MfOutlinedTextField(
8484
},
8585
singleLine = singleLine,
8686
trailingIcon = trailingIcon,
87-
keyboardActions =
88-
KeyboardActions {
87+
keyboardActions = KeyboardActions {
8988
onKeyboardActions?.invoke()
9089
},
9190
keyboardOptions = keyboardOptions,
92-
colors =
93-
OutlinedTextFieldDefaults.colors(
91+
colors = OutlinedTextFieldDefaults.colors(
9492
focusedBorderColor = MaterialTheme.colorScheme.onSurface,
9593
focusedLabelColor = MaterialTheme.colorScheme.onSurface,
9694
),
97-
textStyle =
98-
LocalDensity.current.run {
95+
textStyle = LocalDensity.current.run {
9996
TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
10097
},
10198
)
@@ -118,8 +115,7 @@ fun MfPasswordTextField(
118115
onValueChange = onPasswordChange,
119116
label = { Text(label) },
120117
isError = isError,
121-
visualTransformation =
122-
if (isPasswordVisible) {
118+
visualTransformation = if (isPasswordVisible) {
123119
VisualTransformation.None
124120
} else {
125121
PasswordVisualTransformation()
@@ -157,14 +153,12 @@ fun MifosOutlinedTextField(
157153
onValueChange = onValueChange,
158154
label = { Text(stringResource(id = label)) },
159155
modifier = modifier,
160-
leadingIcon =
161-
if (icon != null) {
156+
leadingIcon = if (icon != null) {
162157
{
163158
Image(
164159
painter = painterResource(id = icon),
165160
contentDescription = null,
166-
colorFilter =
167-
ColorFilter.tint(
161+
colorFilter = ColorFilter.tint(
168162
MaterialTheme.colorScheme.onSurface,
169163
),
170164
)
@@ -175,13 +169,11 @@ fun MifosOutlinedTextField(
175169
trailingIcon = trailingIcon,
176170
maxLines = maxLines,
177171
singleLine = singleLine,
178-
colors =
179-
OutlinedTextFieldDefaults.colors(
172+
colors = OutlinedTextFieldDefaults.colors(
180173
focusedBorderColor = MaterialTheme.colorScheme.onSurface,
181174
focusedLabelColor = MaterialTheme.colorScheme.onSurface,
182175
),
183-
textStyle =
184-
LocalDensity.current.run {
176+
textStyle = LocalDensity.current.run {
185177
TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
186178
},
187179
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
@@ -209,6 +201,9 @@ fun MifosTextField(
209201
minLines: Int = 1,
210202
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
211203
keyboardOptions: KeyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
204+
trailingIcon: @Composable (() -> Unit)? = null,
205+
leadingIcon: @Composable (() -> Unit)? = null,
206+
indicatorColor: Color? = null,
212207
) {
213208
var isFocused by rememberSaveable { mutableStateOf(false) }
214209

@@ -232,31 +227,56 @@ fun MifosTextField(
232227
singleLine = singleLine,
233228
maxLines = maxLines,
234229
minLines = minLines,
235-
cursorBrush = SolidColor(NewUi.primaryColor),
230+
cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
236231
decorationBox = { innerTextField ->
237232
Column {
238233
Text(
239234
text = label,
240-
color = NewUi.primaryColor,
235+
color = MaterialTheme.colorScheme.primary,
241236
style = MaterialTheme.typography.labelLarge,
242237
modifier = Modifier.align(alignment = Alignment.Start),
243238
)
244239

245240
Spacer(modifier = Modifier.height(5.dp))
246241

247-
innerTextField()
242+
Row(
243+
verticalAlignment = Alignment.CenterVertically,
244+
modifier = Modifier.fillMaxWidth(),
245+
) {
246+
if (leadingIcon != null) {
247+
leadingIcon()
248+
}
248249

249-
Spacer(modifier = Modifier.height(5.dp))
250-
HorizontalDivider(
251-
thickness = 1.dp,
252-
color = if (isFocused) {
253-
NewUi.secondaryColor
254-
} else {
255-
NewUi.onSurface.copy(alpha = 0.05f)
256-
},
257-
)
250+
Box(modifier = Modifier.weight(1f)) {
251+
innerTextField()
252+
}
253+
254+
if (trailingIcon != null) {
255+
trailingIcon()
256+
}
257+
}
258+
indicatorColor?.let { color ->
259+
HorizontalDivider(
260+
thickness = 1.dp,
261+
color = if (isFocused) {
262+
color
263+
} else {
264+
MaterialTheme.colorScheme.onSurface.copy(alpha = 0.05f)
265+
},
266+
)
267+
} ?: run {
268+
HorizontalDivider(
269+
thickness = 1.dp,
270+
color = if (isFocused) {
271+
MaterialTheme.colorScheme.primary
272+
} else {
273+
MaterialTheme.colorScheme.onSurface.copy(alpha = 0.05f)
274+
},
275+
)
276+
}
258277
}
259278
},
279+
260280
)
261281
}
262282

‎core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/theme/Color.kt

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ package org.mifospay.core.designsystem.theme
1111

1212
import androidx.compose.ui.graphics.Color
1313

14-
val md_theme_light_primary = Color(0xFF000000)
15-
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
16-
val md_theme_light_primaryContainer = Color(0xFFFFD9E2)
14+
val md_theme_light_primary = Color(0xFF0673BA) // primary
15+
val md_theme_light_onPrimary = Color(0xFFFFFFFF) // gradientOne
16+
val md_theme_light_primaryContainer = Color(0xFFF5F5F5) // container color
1717
val md_theme_light_onPrimaryContainer = Color(0xFF3E001D)
1818
val md_theme_light_secondary = Color(0xFF984061)
1919
val md_theme_light_onSecondary = Color(0xFFFFFFFF)
@@ -30,7 +30,7 @@ val md_theme_light_onErrorContainer = Color(0xFF410002)
3030
val md_theme_light_background = Color(0xFFFFFBFF)
3131
val md_theme_light_onBackground = Color(0xFF330045)
3232
val md_theme_light_surface = Color(0xFFFFFBFF)
33-
val md_theme_light_onSurface = Color(0xFF000000)
33+
val md_theme_light_onSurface = Color(0xFF333333) // onSurface
3434
val md_theme_light_surfaceVariant = Color(0xFFF2DDE1)
3535
val md_theme_light_onSurfaceVariant = Color(0xFF514347)
3636
val md_theme_light_outline = Color(0xFF837377)

‎core/ui/src/main/kotlin/org/mifospay/core/ui/ScrollableTabRow.kt

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ fun MifosScrollableTabRow(
2929
tabContents: List<TabContent>,
3030
pagerState: PagerState,
3131
modifier: Modifier = Modifier,
32-
containerColor: Color = MaterialTheme.colorScheme.surface,
33-
selectedContentColor: Color = MaterialTheme.colorScheme.onSurface,
34-
unselectedContentColor: Color = Color.LightGray,
32+
containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
33+
selectedContentColor: Color = MaterialTheme.colorScheme.primary,
34+
unselectedContentColor: Color = MaterialTheme.colorScheme.primaryContainer,
3535
edgePadding: Dp = 8.dp,
3636
) {
3737
val scope = rememberCoroutineScope()
@@ -41,6 +41,8 @@ fun MifosScrollableTabRow(
4141
containerColor = containerColor,
4242
selectedTabIndex = pagerState.currentPage,
4343
edgePadding = edgePadding,
44+
indicator = {},
45+
divider = {},
4446
) {
4547
tabContents.forEachIndexed { index, currentTab ->
4648
MifosTab(

‎feature/history/src/main/kotlin/org/mifospay/feature/history/HistoryScreen.kt

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
package org.mifospay.feature.history
1111

1212
import android.widget.Toast
13+
import androidx.compose.foundation.border
1314
import androidx.compose.foundation.clickable
1415
import androidx.compose.foundation.layout.Arrangement
1516
import androidx.compose.foundation.layout.Column
@@ -21,6 +22,8 @@ import androidx.compose.foundation.layout.height
2122
import androidx.compose.foundation.layout.padding
2223
import androidx.compose.foundation.lazy.LazyColumn
2324
import androidx.compose.foundation.lazy.items
25+
import androidx.compose.foundation.shape.RoundedCornerShape
26+
import androidx.compose.material3.HorizontalDivider
2427
import androidx.compose.material3.MaterialTheme
2528
import androidx.compose.material3.Text
2629
import androidx.compose.runtime.Composable
@@ -46,7 +49,6 @@ import org.mifospay.core.designsystem.component.MifosBottomSheet
4649
import org.mifospay.core.designsystem.component.MifosButton
4750
import org.mifospay.core.designsystem.component.MifosLoadingWheel
4851
import org.mifospay.core.designsystem.icon.MifosIcons
49-
import org.mifospay.core.designsystem.theme.lightGrey
5052
import org.mifospay.core.ui.EmptyContentScreen
5153
import org.mifospay.core.ui.TransactionItemScreen
5254
import org.mifospay.feature.transaction.detail.TransactionDetailScreen
@@ -141,6 +143,8 @@ private fun HistoryScreen(
141143
modifier = Modifier
142144
.clickable { transactionDetailState = it },
143145
)
146+
HorizontalDivider(thickness = 0.5.dp, modifier = Modifier.padding(5.dp))
147+
Spacer(modifier = Modifier.height(15.dp))
144148
}
145149
}
146150
}
@@ -178,9 +182,19 @@ private fun Chip(
178182
modifier: Modifier = Modifier,
179183
) {
180184
val context = LocalContext.current
181-
val backgroundColor = if (selected) MaterialTheme.colorScheme.primary else lightGrey
185+
val backgroundColor = MaterialTheme.colorScheme.onPrimary
182186
MifosButton(
183-
modifier = modifier,
187+
modifier = modifier.then(
188+
if (selected) {
189+
Modifier.border(
190+
width = 1.dp,
191+
color = MaterialTheme.colorScheme.primary,
192+
shape = RoundedCornerShape(25.dp),
193+
)
194+
} else {
195+
Modifier
196+
},
197+
),
184198
onClick = {
185199
onClick()
186200
Toast.makeText(context, label, Toast.LENGTH_SHORT).show()
@@ -190,7 +204,7 @@ private fun Chip(
190204
Text(
191205
modifier = Modifier.padding(top = 4.dp, bottom = 4.dp, start = 16.dp, end = 16.dp),
192206
text = label,
193-
color = if (selected) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onSurface,
207+
color = MaterialTheme.colorScheme.onSurface,
194208
)
195209
}
196210
}

0 commit comments

Comments
 (0)