diff --git a/packages/desktop-client/src/components/budget/MobileTable.js b/packages/desktop-client/src/components/budget/MobileTable.tsx similarity index 69% rename from packages/desktop-client/src/components/budget/MobileTable.js rename to packages/desktop-client/src/components/budget/MobileTable.tsx index 2123cfe155c..0f300a6e9d7 100644 --- a/packages/desktop-client/src/components/budget/MobileTable.js +++ b/packages/desktop-client/src/components/budget/MobileTable.tsx @@ -1,11 +1,16 @@ -import React from 'react'; +import React, { type ReactNode, type CSSProperties } from 'react'; import { colors } from '../../style'; import View from '../common/View'; export const ROW_HEIGHT = 50; -export const ListItem = ({ children, style, ...props }) => { +type ListItemProps = { + children?: ReactNode; + style: CSSProperties; +}; + +export const ListItem = ({ children, style, ...props }: ListItemProps) => { return ( @@ -548,13 +548,13 @@ export default function ScheduleDetails({ modalProps, actions, id }) { {state.upcomingDates && ( - + Upcoming dates {state.upcomingDates.map(date => ( @@ -625,7 +625,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) { style={{ width: 350, textAlign: 'right', - color: colors.n4, + color: theme.pageTextLight, marginTop: 10, fontSize: 13, lineHeight: '1.4em', @@ -640,7 +640,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) { {state.isCustom && ( {adding ? ( - + These transactions match this schedule: - + Select transactions to link on save @@ -675,7 +675,9 @@ export default function ScheduleDetails({ modalProps, actions, id }) { type="bare" style={{ color: - state.transactionsMode === 'linked' ? colors.b4 : colors.n7, + state.transactionsMode === 'linked' + ? theme.pageTextLink + : theme.pageTextSubdued, marginRight: 10, fontSize: 14, }} @@ -688,8 +690,8 @@ export default function ScheduleDetails({ modalProps, actions, id }) { style={{ color: state.transactionsMode === 'matched' - ? colors.b4 - : colors.n7, + ? theme.pageTextLink + : theme.pageTextSubdued, fontSize: 14, }} onClick={() => onSwitchTransactions('matched')} @@ -721,28 +723,19 @@ export default function ScheduleDetails({ modalProps, actions, id }) { ( - - {state.error ? ( - - Could not search: {state.error} - - ) : ( - 'No transactions found' - )} - - )) + } transactions={state.transactions} fields={['date', 'payee', 'amount']} style={{ - border: '1px solid ' + colors.border, + border: '1px solid ' + theme.tableBorder, borderRadius: 4, overflow: 'hidden', marginTop: 5, + maxHeight: 200, }} /> @@ -754,7 +747,9 @@ export default function ScheduleDetails({ modalProps, actions, id }) { align="center" style={{ marginTop: 20 }} > - {state.error && {state.error}} + {state.error && ( + {state.error} + )} @@ -765,3 +760,25 @@ export default function ScheduleDetails({ modalProps, actions, id }) { ); } + +function NoTransactionsMessage(props) { + return ( + + {props.error ? ( + + Could not search: {props.error} + + ) : props.transactionsMode === 'matched' ? ( + 'No matching transactions' + ) : ( + 'No linked transactions' + )} + + ); +} diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx index 9bbb2f2243d..cfc1b64b23d 100644 --- a/packages/desktop-client/src/components/table.tsx +++ b/packages/desktop-client/src/components/table.tsx @@ -1111,7 +1111,12 @@ export const Table = forwardRef( {...(Array.isArray(headers) ? { headers } : { children: headers })} /> )} - + {isEmpty ? ( getEmptyContent(renderEmpty) ) : ( diff --git a/upcoming-release-notes/1571.md b/upcoming-release-notes/1571.md new file mode 100644 index 00000000000..741210b5e37 --- /dev/null +++ b/upcoming-release-notes/1571.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [trevdor] +--- + +Fix collapsed linked transactions table in Schedule editor modal diff --git a/upcoming-release-notes/1578.md b/upcoming-release-notes/1578.md new file mode 100644 index 00000000000..e528a3596d1 --- /dev/null +++ b/upcoming-release-notes/1578.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [Jod929] +--- + +Refactor MobileTable to tsx. \ No newline at end of file