fix: inconsistent dark mode rendering across UI components - #2661
Merged
biplab1 merged 3 commits intoApr 4, 2026
Conversation
📝 WalkthroughWalkthroughThis PR replaces hardcoded whites and AppColors with theme tokens from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
amanna13
marked this pull request as ready for review
April 2, 2026 18:00
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
feature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.kt (1)
226-229:⚠️ Potential issue | 🟠 MajorHardcoded text color breaks dark mode contrast.
The
Color.DarkGray.copy(alpha = .7f)will render as dark gray in both light and dark modes. In dark mode, this creates insufficient contrast against the dark card background, making the product name and account ID difficult to read.🎨 Proposed fix using theme color
Text( text = "${loanCollectionSheetItem?.productShortName} (#${loanCollectionSheetItem?.accountId})", - color = Color.DarkGray.copy(alpha = .7f), + color = KptTheme.colorScheme.onSurfaceVariant, style = KptTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold), )🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.kt` around lines 226 - 229, The Text composable in PaymentDetailsScreen is using a hardcoded Color.DarkGray.copy(alpha = .7f) which breaks dark-mode contrast; update the color parameter to use a theme-aware color (e.g., LocalContentColor.current.copy(alpha = 0.7f) or KptTheme.colorScheme.onSurface.copy(alpha = 0.7f)) so the product/account text respects light/dark themes and accessibility; locate the Text call that sets text = "${loanCollectionSheetItem?.productShortName} (#${loanCollectionSheetItem?.accountId})" and replace the Color.DarkGray.copy(...) expression with a theme color as described.
🧹 Nitpick comments (7)
feature/report/src/commonMain/kotlin/com/mifos/feature/report/runReport/RunReportScreen.kt (1)
281-286: Consider replacing hardcodedBluewith a theme color for consistency.While this PR correctly replaces hardcoded
WhitewithKptTheme.colorScheme.surfacefor the dropdown, the icon background still uses a hardcodedBluecolor which won't adapt to dark mode.♻️ Suggested fix
Box( contentAlignment = Alignment.Center, modifier = Modifier .size(DesignToken.sizes.dp42) - .background(Blue, CircleShape), + .background(KptTheme.colorScheme.primary, CircleShape), ) {Also remove the unused import at line 56:
-import androidx.compose.ui.graphics.Color.Companion.Blue🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/report/src/commonMain/kotlin/com/mifos/feature/report/runReport/RunReportScreen.kt` around lines 281 - 286, Replace the hardcoded Blue used in the Box background inside RunReportScreen (the Box with modifier.size(DesignToken.sizes.dp42) and CircleShape) with a theme-aware color (e.g., KptTheme.colorScheme.primary or another appropriate KptTheme.colorScheme.* value) so the icon background adapts to dark mode; then remove the now-unused import referenced near the top of RunReportScreen.kt (the import that became unused after replacing Blue). Ensure you update only the Box background color reference and delete the unused import statement.feature/loan/src/commonMain/kotlin/com/mifos/feature/loan/component/RepaymentPeriodCard.kt (1)
141-149: Consider migrating remaining hardcoded color for full dark mode consistency.
AppColors.customEnableis still used for the "paid" status styling. For complete dark mode support consistent with this PR's objective, consider replacing it with a theme-aware color (e.g., a semantic token fromKptTheme.colorSchemeor a custom theme extension for success/positive states).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/loan/src/commonMain/kotlin/com/mifos/feature/loan/component/RepaymentPeriodCard.kt` around lines 141 - 149, Replace hardcoded AppColors.customEnable usage in RepaymentPeriodCard's Text composables with a theme-aware color: identify the two occurrences where AppColors.customEnable is used for the "paid" state (the label Text using MifosTypography.labelSmall and the amount Text using MifosTypography.titleSmallEmphasized) and substitute them with an appropriate KptTheme.colorScheme semantic token (or a custom theme extension for success/positive states) so the colors follow dark mode; ensure both conditional expressions (color = if (isPaid) ...) use the chosen theme token and update any imports if you add a custom theme extension.feature/loan/src/commonMain/kotlin/com/mifos/feature/loan/loanAccountProfile/LoanAccountProfileScreen.kt (1)
286-296: Derive status-chip text color from chip background for contrast safety.At Line 295, text color is fixed to
onPrimary, but the chip background isui.color(Line 289), which is not guaranteed to beprimary. This can produce low contrast for some status colors/themes.♻️ Proposed contrast-safe adjustment
+import androidx.compose.ui.graphics.luminance ... statusUi?.let { ui -> + val statusTextColor = if (ui.color.luminance() > 0.5f) Color.Black else Color.White Box( modifier = Modifier .clip(KptTheme.shapes.large) .background(ui.color) .padding(horizontal = DesignToken.padding.medium, vertical = KptTheme.spacing.xs), contentAlignment = Alignment.Center, ) { Text( text = stringResource(ui.labelRes).uppercase(), - color = KptTheme.colorScheme.onPrimary, + color = statusTextColor, style = MifosTypography.labelSmallEmphasized, fontWeight = FontWeight.Bold, ) } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/loan/src/commonMain/kotlin/com/mifos/feature/loan/loanAccountProfile/LoanAccountProfileScreen.kt` around lines 286 - 296, The status chip uses ui.color for background but hardcodes text color to KptTheme.colorScheme.onPrimary in the Text inside the Box (LoanAccountProfileScreen.kt), which can yield poor contrast; instead compute a contrast-safe foreground: derive a textColor from ui.color (e.g., check ui.color luminance or use a contentColorFor-like helper) and pass that into the Text color parameter so the label (stringResource(ui.labelRes).uppercase()) will always use a high-contrast color against ui.color.feature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.kt (1)
277-284: Consider using theme color for placeholder text.The hardcoded
Color.Graywon't adapt to the theme. For consistent dark mode rendering, use a theme token that adjusts contrast appropriately.🎨 Proposed fix using theme color
if (noPaymentVisibility) { Text( text = stringResource(Res.string.feature_collection_sheet_no_payment_added), style = KptTheme.typography.bodyMedium, modifier = Modifier .align(Alignment.CenterHorizontally) .padding(vertical = KptTheme.spacing.md), - color = Color.Gray, + color = KptTheme.colorScheme.onSurfaceVariant, ) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.kt` around lines 277 - 284, The placeholder Text in PaymentDetailsScreen (the Text composable showing feature_collection_sheet_no_payment_added) uses hardcoded Color.Gray; change it to use the theme color token (e.g., KptTheme.colors.onSurface or KptTheme.colors.onBackground) with an appropriate alpha for a placeholder (e.g., copy(alpha = 0.6f)) so the color adapts to light/dark themes and matches KptTheme styling.feature/savings/src/commonMain/kotlin/com/mifos/feature/savings/savingsAccountSummary/SavingsAccountSummaryScreen.kt (2)
432-444: Consider migrating transaction amount colors to theme tokens.The hardcoded
Color.Black(line 442) won't be visible in dark mode. Additionally,Color.GreenandColor.Red(lines 434, 438) could use semantic theme colors for better consistency.Suggested replacements:
Color.Black→KptTheme.colorScheme.onSurfaceColor.Green→KptTheme.colorScheme.primaryor custom semantic tokenColor.Red→KptTheme.colorScheme.error♻️ Proposed refactor
color = when { transaction.transactionType?.deposit == true -> { - Color.Green + KptTheme.colorScheme.primary } transaction.transactionType?.withdrawal == true -> { - Color.Red + KptTheme.colorScheme.error } else -> { - Color.Black + KptTheme.colorScheme.onSurface } },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/savings/src/commonMain/kotlin/com/mifos/feature/savings/savingsAccountSummary/SavingsAccountSummaryScreen.kt` around lines 432 - 444, Replace the hardcoded colors used for transaction amounts in SavingsAccountSummaryScreen (the when block that checks transaction.transactionType?.deposit/withdrawal) with theme tokens: use KptTheme.colorScheme.primary for deposits, KptTheme.colorScheme.error for withdrawals, and KptTheme.colorScheme.onSurface for the default/else case so colors respect light/dark modes and app semantics.
255-255: Consider completing the dark mode migration for dividers and text colors.The file still uses hardcoded
DarkGrayfor dividers (lines 255, 263, 291) and text coloring (line 561). These won't adapt to dark mode and are inconsistent with the PR's theme color migration.Consider replacing with theme tokens:
- Dividers:
KptTheme.colorScheme.outlineorKptTheme.colorScheme.outlineVariant- Text colors:
KptTheme.colorScheme.onSurfaceVariant♻️ Example refactor for dividers
-HorizontalDivider(color = DarkGray) +HorizontalDivider(color = KptTheme.colorScheme.outline)Also applies to: 263-263, 291-291, 561-561
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@feature/savings/src/commonMain/kotlin/com/mifos/feature/savings/savingsAccountSummary/SavingsAccountSummaryScreen.kt` at line 255, Replace hardcoded DarkGray uses with theme tokens: update all HorizontalDivider(...) instances that pass color = DarkGray to use KptTheme.colorScheme.outline (or outlineVariant if a subtler divider is desired) and update any Text composable(s) or color assignments that use DarkGray (e.g., the text at the SavingsAccountSummaryScreen color usage) to use KptTheme.colorScheme.onSurfaceVariant so dividers and text follow the app's dark mode theme.core/ui/src/commonMain/kotlin/com/mifos/core/ui/components/MifosProgressIndicator.kt (1)
86-86: Consider usingscrimfor overlay tint semantics.For modal/loading overlays,
scrimusually provides more consistent dimming thansurfaceacross themes.🎨 Suggested tweak
- .background(KptTheme.colorScheme.surface.copy(alpha = 0.7f)) + .background(KptTheme.colorScheme.scrim.copy(alpha = 0.45f))🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@core/ui/src/commonMain/kotlin/com/mifos/core/ui/components/MifosProgressIndicator.kt` at line 86, In MifosProgressIndicator replace the background tint that uses KptTheme.colorScheme.surface.copy(alpha = 0.7f) with the theme scrim color to get proper overlay semantics (e.g., KptTheme.colorScheme.scrim or KptTheme.colorScheme.scrim.copy(alpha = 0.7f)); update the Modifier.background call inside the MifosProgressIndicator composable so it uses the scrim color instead of surface.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosNavigationRail.kt`:
- Around line 53-54: The rail is using the foreground token
KptTheme.colorScheme.onSurface as its background; update the MifosNavigationRail
(the parameters setting color and contentColor) to use
KptTheme.colorScheme.surface for the color (rail background) and set
contentColor to KptTheme.colorScheme.onSurface (instead of Color.Unspecified) so
the container uses the correct surface token and its content uses the foreground
token.
---
Outside diff comments:
In
`@feature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.kt`:
- Around line 226-229: The Text composable in PaymentDetailsScreen is using a
hardcoded Color.DarkGray.copy(alpha = .7f) which breaks dark-mode contrast;
update the color parameter to use a theme-aware color (e.g.,
LocalContentColor.current.copy(alpha = 0.7f) or
KptTheme.colorScheme.onSurface.copy(alpha = 0.7f)) so the product/account text
respects light/dark themes and accessibility; locate the Text call that sets
text = "${loanCollectionSheetItem?.productShortName}
(#${loanCollectionSheetItem?.accountId})" and replace the
Color.DarkGray.copy(...) expression with a theme color as described.
---
Nitpick comments:
In
`@core/ui/src/commonMain/kotlin/com/mifos/core/ui/components/MifosProgressIndicator.kt`:
- Line 86: In MifosProgressIndicator replace the background tint that uses
KptTheme.colorScheme.surface.copy(alpha = 0.7f) with the theme scrim color to
get proper overlay semantics (e.g., KptTheme.colorScheme.scrim or
KptTheme.colorScheme.scrim.copy(alpha = 0.7f)); update the Modifier.background
call inside the MifosProgressIndicator composable so it uses the scrim color
instead of surface.
In
`@feature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.kt`:
- Around line 277-284: The placeholder Text in PaymentDetailsScreen (the Text
composable showing feature_collection_sheet_no_payment_added) uses hardcoded
Color.Gray; change it to use the theme color token (e.g.,
KptTheme.colors.onSurface or KptTheme.colors.onBackground) with an appropriate
alpha for a placeholder (e.g., copy(alpha = 0.6f)) so the color adapts to
light/dark themes and matches KptTheme styling.
In
`@feature/loan/src/commonMain/kotlin/com/mifos/feature/loan/component/RepaymentPeriodCard.kt`:
- Around line 141-149: Replace hardcoded AppColors.customEnable usage in
RepaymentPeriodCard's Text composables with a theme-aware color: identify the
two occurrences where AppColors.customEnable is used for the "paid" state (the
label Text using MifosTypography.labelSmall and the amount Text using
MifosTypography.titleSmallEmphasized) and substitute them with an appropriate
KptTheme.colorScheme semantic token (or a custom theme extension for
success/positive states) so the colors follow dark mode; ensure both conditional
expressions (color = if (isPaid) ...) use the chosen theme token and update any
imports if you add a custom theme extension.
In
`@feature/loan/src/commonMain/kotlin/com/mifos/feature/loan/loanAccountProfile/LoanAccountProfileScreen.kt`:
- Around line 286-296: The status chip uses ui.color for background but
hardcodes text color to KptTheme.colorScheme.onPrimary in the Text inside the
Box (LoanAccountProfileScreen.kt), which can yield poor contrast; instead
compute a contrast-safe foreground: derive a textColor from ui.color (e.g.,
check ui.color luminance or use a contentColorFor-like helper) and pass that
into the Text color parameter so the label
(stringResource(ui.labelRes).uppercase()) will always use a high-contrast color
against ui.color.
In
`@feature/report/src/commonMain/kotlin/com/mifos/feature/report/runReport/RunReportScreen.kt`:
- Around line 281-286: Replace the hardcoded Blue used in the Box background
inside RunReportScreen (the Box with modifier.size(DesignToken.sizes.dp42) and
CircleShape) with a theme-aware color (e.g., KptTheme.colorScheme.primary or
another appropriate KptTheme.colorScheme.* value) so the icon background adapts
to dark mode; then remove the now-unused import referenced near the top of
RunReportScreen.kt (the import that became unused after replacing Blue). Ensure
you update only the Box background color reference and delete the unused import
statement.
In
`@feature/savings/src/commonMain/kotlin/com/mifos/feature/savings/savingsAccountSummary/SavingsAccountSummaryScreen.kt`:
- Around line 432-444: Replace the hardcoded colors used for transaction amounts
in SavingsAccountSummaryScreen (the when block that checks
transaction.transactionType?.deposit/withdrawal) with theme tokens: use
KptTheme.colorScheme.primary for deposits, KptTheme.colorScheme.error for
withdrawals, and KptTheme.colorScheme.onSurface for the default/else case so
colors respect light/dark modes and app semantics.
- Line 255: Replace hardcoded DarkGray uses with theme tokens: update all
HorizontalDivider(...) instances that pass color = DarkGray to use
KptTheme.colorScheme.outline (or outlineVariant if a subtler divider is desired)
and update any Text composable(s) or color assignments that use DarkGray (e.g.,
the text at the SavingsAccountSummaryScreen color usage) to use
KptTheme.colorScheme.onSurfaceVariant so dividers and text follow the app's dark
mode theme.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 54ebe44c-717c-4f88-b464-50a3a58b00b3
📒 Files selected for processing (23)
cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosBottomBar.ktcmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosNavigationRail.ktcmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosScaffold.ktcmp-navigation/src/commonMain/kotlin/cmp/navigation/splash/SplashScreen.ktcore/designsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosScaffold.ktcore/ui/src/commonMain/kotlin/com/mifos/core/ui/components/MifosListingComponent.ktcore/ui/src/commonMain/kotlin/com/mifos/core/ui/components/MifosProgressIndicator.ktcore/ui/src/commonMain/kotlin/com/mifos/core/ui/components/MifosStepper.ktfeature/about/src/commonMain/kotlin/com/mifos/feature/about/AboutScreen.ktfeature/client/src/commonMain/kotlin/com/mifos/feature/client/clientGeneral/ClientProfileGeneralScreen.ktfeature/client/src/commonMain/kotlin/com/mifos/feature/client/clientProfile/components/ProfileCard.ktfeature/client/src/commonMain/kotlin/com/mifos/feature/client/syncClientDialog/SyncClientsDialogScreen.ktfeature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/paymentDetails/PaymentDetailsScreen.ktfeature/collectionSheet/src/commonMain/kotlin/com/mifos/feature/individualCollectionSheet/savedIndividualCollectionSheet/SavedIndividualCollectionSheetCompose.ktfeature/data-table/src/commonMain/kotlin/com/mifos/feature/dataTable/dataTable/DataTableScreen.ktfeature/data-table/src/commonMain/kotlin/com/mifos/feature/dataTable/dataTableList/DataTableListScreen.ktfeature/data-table/src/commonMain/kotlin/com/mifos/feature/dataTable/dataTableRowDialog/DataTableRowDialogScreen.ktfeature/groups/src/commonMain/kotlin/com/mifos/feature/groups/syncGroupDialog/SyncGroupDialogScreen.ktfeature/loan/src/commonMain/kotlin/com/mifos/feature/loan/component/RepaymentPeriodCard.ktfeature/loan/src/commonMain/kotlin/com/mifos/feature/loan/loanAccountProfile/LoanAccountProfileScreen.ktfeature/report/src/commonMain/kotlin/com/mifos/feature/report/runReport/RunReportScreen.ktfeature/savings/src/commonMain/kotlin/com/mifos/feature/savings/savingsAccountSummary/SavingsAccountSummaryScreen.ktfeature/settings/src/commonMain/kotlin/com/mifos/feature/settings/syncSurvey/SyncSurveysDialog.kt
There was a problem hiding this comment.
🧹 Nitpick comments (1)
cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosNavigationRail.kt (1)
109-109: Consider usingKptThemetokens consistently throughout the component.The label color (line 109) and icon colors (lines 116-117) use
MaterialTheme.colorSchemewhile the Surface background usesKptTheme.colorScheme. For full consistency with the design system, consider migrating these toKptThemetokens as well in a follow-up.Also applies to: 115-118
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosNavigationRail.kt` at line 109, The component mixes MaterialTheme and KptTheme tokens: replace uses of MaterialTheme.colorScheme (e.g., the explicit "color = MaterialTheme.colorScheme.secondary" and the icon/label color uses around the NavigationRailItem icons/labels in MifosNavigationRail.kt) with the equivalent KptTheme color tokens to match the Surface which already uses KptTheme.colorScheme; update the color parameters for label and icon tint to use KptTheme (and adjust imports) so all colors in MifosNavigationRail are sourced from KptTheme consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosNavigationRail.kt`:
- Line 109: The component mixes MaterialTheme and KptTheme tokens: replace uses
of MaterialTheme.colorScheme (e.g., the explicit "color =
MaterialTheme.colorScheme.secondary" and the icon/label color uses around the
NavigationRailItem icons/labels in MifosNavigationRail.kt) with the equivalent
KptTheme color tokens to match the Surface which already uses
KptTheme.colorScheme; update the color parameters for label and icon tint to use
KptTheme (and adjust imports) so all colors in MifosNavigationRail are sourced
from KptTheme consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 02c9d5bc-1c66-4204-9896-7cd0b2052319
📒 Files selected for processing (1)
cmp-navigation/src/commonMain/kotlin/cmp/navigation/components/MifosNavigationRail.kt
Contributor
|
@amanna13 Have you tested the light mode to ensure the UI components are consistent after the changes? |
Member
Author
|
@biplab1 Yes I have done that. Light mode is working as expected. |
biplab1
approved these changes
Apr 3, 2026
biplab1
left a comment
biplab1
left a comment
Contributor
There was a problem hiding this comment.
Looks good to me. This can be merged.
Contributor
|
@niyajali If everything looks good, please feel free to go ahead and merge this. |
|
niyajali
approved these changes
Apr 3, 2026
Member
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes - Jira-#762
Screenshots
Before
After
Screen_recording_20260404_130922.mp4
Please make sure these boxes are checked before submitting your pull request - thanks!
Run the static analysis check
./gradlew checkorci-prepush.shto make sure you didn't break anythingIf you have multiple commits please combine them into one commit by squashing them.
Summary by CodeRabbit