From 3bbaa17f6767b2f1a5ae5613885952000b2a955c Mon Sep 17 00:00:00 2001 From: Alessio Speranza <33428827+alessiospera@users.noreply.github.com> Date: Wed, 19 Aug 2026 12:09:28 +0200 Subject: [PATCH] Fix theme prop gaps causing white-on-white filters, restyle the edit modal, and widen insert-values on desktop The shared FilterRow/FilterInlineRow components weren't receiving the theme prop they need to color their own note/date inputs and nested selects, rendering as unreadable white-on-white boxes in dark mode wherever filter panels are used (Outflows, Incomes, Shared Expenses). The transaction-edit modal's fields still carried the old inline-edit blue-border styling, which no longer made sense once they moved into a modal - switched to the app's standard neutral field style and dropped the now-redundant cancel button next to the modal's own close (X) button. insert-values was also capped at 1100px wide, forcing the transaction table to horizontally scroll even with plenty of unused space on a desktop window - widened to 1400px and let the table fill its container instead of capping at 1200px on its own. --- CHANGELOG.md | 22 +++++ .../transactionList/TransactionListStyles.tsx | 17 ---- src/sections/IncomeSection.tsx | 29 +++--- src/sections/InsertValues.tsx | 7 +- src/sections/OutflowSection.tsx | 89 +++++++------------ src/sections/SharedExpensesPanel.tsx | 8 +- src/styles/MyStyled.tsx | 5 +- 7 files changed, 78 insertions(+), 99 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 44e50483..e49657ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,28 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and - Shared expenses are now grouped by month (collapsible, newest first) with a filter panel (note search, status, date range), instead of one long flat list. + - Follow-up polish from live-testing the modal and mobile scroll fixes + above: + - The shared `FilterRow`/`FilterInlineRow` components (used by every + Outflows/Incomes/Shared-Expenses filter panel) weren't receiving the + `theme` prop they need to color their own note/date ``s and any + nested ` - + {translations.general.date || 'Data'} - + p.theme.mode === 'dark' ? 'rgba(59,130,246,0.4)' : 'rgba(59,130,246,0.3)'}; - border-radius: 6px; - font-size: 0.82rem; - background: ${p => p.theme.mode === 'dark' ? 'rgba(255,255,255,0.06)' : '#f8fafc'}; - color: ${p => p.theme.textColor}; - box-sizing: border-box; - outline: none; - cursor: pointer; - font-family: inherit; - - option { - background: ${p => p.theme.mode === 'dark' ? '#1e293b' : '#ffffff'}; - color: ${p => p.theme.mode === 'dark' ? '#e2e8f0' : '#1e293b'}; - } -`; - const TotalRow = styled.tr` font-weight: 700; td { text-align: center; } @@ -990,17 +969,17 @@ export default function OutflowSection({ {editValues.sharedEnabled && ( <>
- setEditValues(prev => ({...prev, sharedMethod: e.target.value}))}> - + {editValues.sharedMethod === 'people' ? ( - setEditValues(prev => ({...prev, sharedPeopleCount: e.target.value}))} aria-label={translations.insert.outflowSection.sharedExpense?.peopleLabel} /> ) : ( - setEditValues(prev => ({...prev, sharedOwnShare: e.target.value}))} aria-label={translations.insert.sharedTransactionLink.ownShare} /> )} @@ -1058,8 +1037,8 @@ export default function OutflowSection({ {(translations.insert.outflowSection.splitRemainderHint || '{amount} left over, paid from:') .replace('{amount}', `${formatNumber(fromEUR(remainderAmount))}${currencySymbol}`)} - setEditValues(prev => ({ ...prev, splitFallbackLabel: e.target.value }))} > @@ -1067,7 +1046,7 @@ export default function OutflowSection({ {Object.keys(balanceOptions || {}) .filter((label) => label !== editValues.balanceSourceLabel) .map((label) => )} - + ); }; @@ -1075,18 +1054,20 @@ export default function OutflowSection({ const renderPurposeSelect = () => { const purposeTranslations = translations.transactionPurpose; return ( - setEditValues(prev => ({...prev, purpose: event.target.value}))} disabled={isSaving || editValues.sharedEnabled} aria-label={purposeTranslations.label} - title={purposeTranslations.label} + fullWidth + size="small" + sx={selectSx} + MenuProps={getMuiSelectMenuProps(theme)} > {['expense', 'investment', 'transfer', 'debt', 'tax', 'other'].map((purpose) => ( - + {purposeTranslations[purpose]} ))} - + ); }; @@ -1133,17 +1114,20 @@ export default function OutflowSection({ {translations.general.typology} - setEditValues(prev => ({ ...prev, typologyKey: Number(e.target.value) }))} + fullWidth + size="small" + sx={selectSx} + MenuProps={getMuiSelectMenuProps(theme)} > {sortTagsByLanguage(paymentTags, language, 'payment').filter(item => item.label !== 'none').map((item) => ( - + ))} - + {translations.insert.outflowSection.tableColumns?.paymentMethod || translations.general.selectAnOption} @@ -1166,7 +1150,7 @@ export default function OutflowSection({ {translations.insert.outflowSection.tableColumns?.value || translations.general.amount}
- {translations.insert.outflowSection.tableColumns?.note || 'Note'} - {translations.insert.outflowSection.tableColumns?.date || translations.general.date} - - - - - {translations.insert.outflowSection.cancelEdit} - + {translations.insert.outflowSection.editButton} @@ -2243,7 +2218,7 @@ export default function OutflowSection({ - + {translations.insert.outflowSection.tableColumns.category} - + {translations.insert.outflowSection.tableColumns.typology} - + {translations.insert.outflowSection.tableColumns.note} - + {translations.general.date || 'Data'} - + - + {t.searchLabel || translations?.general?.note || 'Note'} - + {t.statusFilterLabel || 'Status'} {t.statusSettled || 'Recovered'} - + {translations?.general?.date || 'Date'} - + props.theme.textColor}; margin: 0 auto; font-size: 0.88rem;