From d62f572f935279ea3a96e7b6616999d81ed80280 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Tue, 5 Dec 2023 11:17:18 -0800 Subject: [PATCH 1/7] Mobile payees and rules pages --- .../src/components/FinancesApp.tsx | 2 ++ .../src/components/ManageRules.tsx | 16 +++++++++++-- .../src/components/ManageRulesPage.tsx | 14 ++++++++++- .../src/components/common/Search.tsx | 11 +++++---- .../src/components/mobile/MobileNavTabs.tsx | 8 +++---- .../src/components/payees/ManagePayees.jsx | 23 +++++++++++-------- .../components/payees/ManagePayeesPage.jsx | 13 ++++++++++- .../src/components/schedules/ScheduleLink.tsx | 4 +++- 8 files changed, 69 insertions(+), 22 deletions(-) diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx index 60ca0d8fbe5..215f6eefbea 100644 --- a/packages/desktop-client/src/components/FinancesApp.tsx +++ b/packages/desktop-client/src/components/FinancesApp.tsx @@ -247,6 +247,8 @@ function FinancesAppWithoutContext() { } /> } /> } /> + } /> + } /> diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx index 6dbcea27150..13c0d4043c5 100644 --- a/packages/desktop-client/src/components/ManageRules.tsx +++ b/packages/desktop-client/src/components/ManageRules.tsx @@ -18,6 +18,7 @@ import { type RuleEntity } from 'loot-core/src/types/models'; import { useCategories } from '../hooks/useCategories'; import { useSelected, SelectedProvider } from '../hooks/useSelected'; +import { useResponsive } from '../ResponsiveProvider'; import { theme } from '../style'; import { Button } from './common/Button'; @@ -241,6 +242,12 @@ function ManageRulesContent({ setHoveredRule(id); }, []); + const { isNarrowWidth } = useResponsive(); + + if (allRules === null) { + return null; + } + return ( @@ -250,6 +257,8 @@ function ManageRulesContent({ alignItems: 'center', padding: isModal ? '0 13px 15px' : '0 0 15px', flexShrink: 0, + justifyContent: 'space-between', + flexWrap: 'wrap', }} > @@ -270,11 +279,14 @@ function ManageRulesContent({ - diff --git a/packages/desktop-client/src/components/ManageRulesPage.tsx b/packages/desktop-client/src/components/ManageRulesPage.tsx index ad57e2bd2d9..6c943d9e828 100644 --- a/packages/desktop-client/src/components/ManageRulesPage.tsx +++ b/packages/desktop-client/src/components/ManageRulesPage.tsx @@ -1,11 +1,23 @@ import React from 'react'; +import { useResponsive } from '../ResponsiveProvider'; +import { theme } from '../style'; + import { ManageRules } from './ManageRules'; import { Page } from './Page'; export function ManageRulesPage() { + const { isNarrowWidth } = useResponsive(); return ( - + ); diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx index f0a9667d5a1..8653f2330b5 100644 --- a/packages/desktop-client/src/components/common/Search.tsx +++ b/packages/desktop-client/src/components/common/Search.tsx @@ -1,7 +1,7 @@ import { type ChangeEvent, type Ref } from 'react'; import { SvgRemove, SvgSearchAlternate } from '../../icons/v2'; -import { theme } from '../../style'; +import { type CSSProperties, theme } from '../../style'; import { Button } from './Button'; import { InputWithContent } from './InputWithContent'; @@ -12,25 +12,28 @@ type SearchProps = { onChange: (value: string) => unknown; placeholder: string; isInModal?: boolean; - width?: number; + style?: CSSProperties; }; +const DEFAULT_WIDTH = 250; + export function Search({ inputRef, value, onChange, placeholder, isInModal = false, - width = 250, + style, }: SearchProps) { return ( @@ -229,9 +230,16 @@ export const ManagePayees = forwardRef( flexDirection: 'row', alignItems: 'center', padding: '0 0 15px', + justifyContent: 'space-between', + flexWrap: 'wrap-reverse', }} > - +