github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-04-28 18:40:34 -05:00
Code Issues 1.3k Packages Projects Releases 54 Wiki Activity

Use desktop colors for mobile autocomplete modals (#2577)

Browse Source 
* Use desktop colors for mobile autocomplete modals

* Release notes

* Color updates

* Color updates

* Update close button

* Fix typecheck

* Rename to ModalCloseButton

* Update ModalTitle
This commit is contained in:
Joel Jeremy Marquez
2024-04-11 14:33:03 -07:00
committed by GitHub
parent f55bd860ba
commit 70e37c0119
18 changed files with 86 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/desktop-client/src/components/FatalError.tsx
View File

@@ -167,7 +167,7 @@ export function FatalError({ buttonText, error }: FatalErrorProps) {
const showSimpleRender = 'type' in error && error.type === 'app-init-failure';
return (
<Modal isCurrent={true} showClose={false} title="Fatal Error">
<Modal isCurrent={true} CloseButton={undefined} title="Fatal Error">
<View
style={{
maxWidth: 500,

4
packages/desktop-client/src/components/MobileWebMessage.tsx
View File

@@ -50,8 +50,8 @@ export function MobileWebMessage() {
bottom: 0,
left: 0,
right: 0,
backgroundColor: theme.mobileModalBackground,
color: theme.mobileModalText,
backgroundColor: theme.menuAutoCompleteBackground,
color: theme.menuAutoCompleteText,
padding: 10,
margin: 10,
borderRadius: 6,

3
packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
View File

@@ -212,6 +212,9 @@ function AccountItem({
backgroundColor: highlighted
? theme.menuAutoCompleteBackgroundHover
: 'transparent',
color: highlighted
? theme.menuAutoCompleteItemTextHover
: theme.menuAutoCompleteItemText,
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,

7
packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
View File

@@ -299,8 +299,7 @@ type CategoryItemProps = {
embedded?: boolean;
};
// eslint-disable-next-line import/no-unused-modules
export function CategoryItem({
function CategoryItem({
item,
className,
style,
@@ -312,7 +311,6 @@ export function CategoryItem({
const narrowStyle = isNarrowWidth
? {
...styles.mobileMenuItem,
color: theme.menuAutoCompleteText,
borderRadius: 0,
borderTop: `1px solid ${theme.pillBorder}`,
}
@@ -331,9 +329,6 @@ export function CategoryItem({
color: highlighted
? theme.menuAutoCompleteItemTextHover
: theme.menuAutoCompleteItemText,
':hover': {
color: theme.menuAutoCompleteItemTextHover,
},
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,

1
packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
View File

@@ -15,7 +15,6 @@ export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) {
const narrowStyle = isNarrowWidth
? {
...styles.largeText,
color: theme.menuItemTextHeader,
paddingTop: 10,
paddingBottom: 10,
}

4
packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
View File

@@ -484,7 +484,6 @@ function PayeeItem({
const narrowStyle = isNarrowWidth
? {
...styles.mobileMenuItem,
color: theme.menuAutoCompleteText,
borderRadius: 0,
borderTop: `1px solid ${theme.pillBorder}`,
}
@@ -522,9 +521,6 @@ function PayeeItem({
color: highlighted
? theme.menuAutoCompleteItemTextHover
: theme.menuAutoCompleteItemText,
':hover': {
color: theme.menuAutoCompleteItemTextHover,
},
borderRadius: embedded ? 4 : 0,
padding: 4,
paddingLeft: 20,

37
packages/desktop-client/src/components/common/Modal.tsx
View File

@@ -5,6 +5,9 @@ import React, {
useLayoutEffect,
type ReactNode,
useState,
type ComponentProps,
type ComponentType,
type ComponentPropsWithRef,
} from 'react';
import { useHotkeysContext } from 'react-hotkeys-hook';
import ReactModal from 'react-modal';
@@ -30,8 +33,9 @@ export type ModalProps = {
padding?: CSSProperties['padding'];
showHeader?: boolean;
leftHeaderContent?: ReactNode;
CloseButton?: ComponentType<ComponentPropsWithRef<typeof ModalCloseButton>>;
showTitle?: boolean;
showClose?: boolean;
editableTitle?: boolean;
showOverlay?: boolean;
loading?: boolean;
noAnimation?: boolean;
@@ -52,8 +56,8 @@ export const Modal = ({
padding = 20,
showHeader = true,
leftHeaderContent,
CloseButton: CloseButtonComponent = ModalCloseButton,
showTitle = true,
showClose = true,
showOverlay = true,
loading = false,
noAnimation = false,
@@ -200,16 +204,7 @@ export const Modal = ({
marginLeft: !isNarrowWidth ? 5 : undefined,
}}
>
{showClose && (
<Button
type="bare"
onClick={onClose}
style={{ padding: 10 }}
aria-label="Close"
>
<SvgDelete width={10} style={{ color: 'inherit' }} />
</Button>
)}
<CloseButtonComponent onClick={onClose} />
</View>
</View>
)}
@@ -462,3 +457,21 @@ export function ModalTitle({
</Text>
);
}
type ModalCloseButtonProps = {
onClick: ComponentProps<typeof Button>['onClick'];
style?: CSSProperties;
};
export function ModalCloseButton({ onClick, style }: ModalCloseButtonProps) {
return (
<Button
type="bare"
onClick={onClick}
style={{ padding: '10px 10px' }}
aria-label="Close"
>
<SvgDelete width={10} style={style} />
</Button>
);
}

2
packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx
View File

@@ -8,7 +8,7 @@ export function GoCardlessLink() {
window.close();
return (
<Modal isCurrent={true} showClose={false} title="Account sync">
<Modal isCurrent={true} CloseButton={undefined} title="Account sync">
{() => (
<View style={{ maxWidth: 500 }}>
<Paragraph>Please wait...</Paragraph>

2
packages/desktop-client/src/components/mobile/transactions/Option.jsx
View File

@@ -22,7 +22,7 @@ export function Option({ isLast, item, state }) {
background: isSelected
? theme.tableRowBackgroundHighlight
: theme.tableBackground,
color: isSelected ? theme.mobileModalText : null,
color: isSelected ? theme.tableText : null,
outline: isFocusVisible ? '2px solid orange' : 'none',
...(!isLast && { borderBottom: `1px solid ${theme.tableBorder}` }),
}}

22
packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
View File

@@ -3,7 +3,7 @@ import React, { type ComponentPropsWithoutRef } from 'react';
import { useResponsive } from '../../ResponsiveProvider';
import { theme } from '../../style';
import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
import { Modal } from '../common/Modal';
import { ModalCloseButton, Modal, ModalTitle } from '../common/Modal';
import { View } from '../common/View';
import { SectionLabel } from '../forms';
import { type CommonModalProps } from '../Modals';
@@ -31,7 +31,12 @@ export function AccountAutocompleteModal({
return (
<Modal
title="Account"
title={
<ModalTitle
title="Account"
getStyle={() => ({ color: theme.menuAutoCompleteText })}
/>
}
noAnimation={!isNarrowWidth}
showHeader={isNarrowWidth}
focusAfterClose={false}
@@ -43,11 +48,14 @@ export function AccountAutocompleteModal({
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
...(!isNarrowWidth && {
backgroundColor: theme.mobileModalBackground,
color: theme.mobileModalText,
}),
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
<ModalCloseButton
{...props}
style={{ color: theme.menuAutoCompleteText }}
/>
)}
>
{() => (
<View>
@@ -56,7 +64,7 @@ export function AccountAutocompleteModal({
title="Account"
style={{
alignSelf: 'center',
color: theme.mobileModalText,
color: theme.menuAutoCompleteText,
marginBottom: 10,
}}
/>

22
packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
View File

@@ -3,7 +3,7 @@ import React, { type ComponentPropsWithoutRef } from 'react';
import { useResponsive } from '../../ResponsiveProvider';
import { theme } from '../../style';
import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
import { Modal } from '../common/Modal';
import { ModalCloseButton, Modal, ModalTitle } from '../common/Modal';
import { View } from '../common/View';
import { SectionLabel } from '../forms';
import { type CommonModalProps } from '../Modals';
@@ -32,7 +32,12 @@ export function CategoryAutocompleteModal({
return (
<Modal
title="Category"
title={
<ModalTitle
title="Category"
getStyle={() => ({ color: theme.menuAutoCompleteText })}
/>
}
noAnimation={!isNarrowWidth}
showHeader={isNarrowWidth}
focusAfterClose={false}
@@ -44,11 +49,14 @@ export function CategoryAutocompleteModal({
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
...(!isNarrowWidth && {
backgroundColor: theme.mobileModalBackground,
color: theme.mobileModalText,
}),
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
<ModalCloseButton
{...props}
style={{ color: theme.menuAutoCompleteText }}
/>
)}
>
{() => (
<View>
@@ -57,7 +65,7 @@ export function CategoryAutocompleteModal({
title="Category"
style={{
alignSelf: 'center',
color: theme.mobileModalText,
color: theme.menuAutoCompleteText,
marginBottom: 10,
}}
/>

7
packages/desktop-client/src/components/modals/EditField.jsx
View File

@@ -278,10 +278,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
padding: '15px 10px',
borderRadius: '6px',
...(minWidth && { minWidth }),
...(!isNarrowWidth && {
backgroundColor: theme.mobileModalBackground,
color: theme.mobileModalText,
}),
backgroundColor: theme.menuAutoCompleteBackground,
}}
>
{() => (
@@ -291,7 +288,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
title={label}
style={{
alignSelf: 'center',
color: theme.mobileModalText,
color: theme.menuAutoCompleteText,
marginBottom: 10,
}}
/>

20
packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
View File

@@ -5,7 +5,7 @@ import { usePayees } from '../../hooks/usePayees';
import { useResponsive } from '../../ResponsiveProvider';
import { theme } from '../../style';
import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete';
import { Modal } from '../common/Modal';
import { ModalCloseButton, Modal, ModalTitle } from '../common/Modal';
import { type CommonModalProps } from '../Modals';
type PayeeAutocompleteModalProps = {
@@ -34,7 +34,12 @@ export function PayeeAutocompleteModal({
return (
<Modal
title="Payee"
title={
<ModalTitle
title="Payee"
getStyle={() => ({ color: theme.menuAutoCompleteText })}
/>
}
noAnimation={!isNarrowWidth}
showHeader={isNarrowWidth}
focusAfterClose={false}
@@ -46,11 +51,14 @@ export function PayeeAutocompleteModal({
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
...(!isNarrowWidth && {
backgroundColor: theme.mobileModalBackground,
color: theme.mobileModalText,
}),
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
<ModalCloseButton
{...props}
style={{ color: theme.menuAutoCompleteText }}
/>
)}
>
{() => (
<PayeeAutocomplete

2
packages/desktop-client/src/style/themes/dark.ts
View File

@@ -75,8 +75,6 @@ export const mobileNavItem = colorPalette.navy150;
export const mobileNavItemSelected = colorPalette.purple400;
export const mobileAccountShadow = cardShadow;
export const mobileAccountText = colorPalette.blue800;
export const mobileModalBackground = colorPalette.navy900;
export const mobileModalText = colorPalette.white;
// Mobile view themes (for the top bar)
export const mobileViewTheme = mobileHeaderBackground;

2
packages/desktop-client/src/style/themes/development.ts
View File

@@ -75,8 +75,6 @@ export const mobileNavItem = colorPalette.gray300;
export const mobileNavItemSelected = colorPalette.purple500;
export const mobileAccountShadow = colorPalette.navy300;
export const mobileAccountText = colorPalette.blue800;
export const mobileModalBackground = colorPalette.navy900;
export const mobileModalText = colorPalette.white;
// Mobile view themes (for the top bar)
export const mobileViewTheme = mobileHeaderBackground;

2
packages/desktop-client/src/style/themes/light.ts
View File

@@ -77,8 +77,6 @@ export const mobileNavItem = colorPalette.gray300;
export const mobileNavItemSelected = colorPalette.purple500;
export const mobileAccountShadow = colorPalette.navy300;
export const mobileAccountText = colorPalette.blue800;
export const mobileModalBackground = colorPalette.navy900;
export const mobileModalText = colorPalette.white;
// Mobile view themes (for the top bar)
export const mobileViewTheme = mobileHeaderBackground;

2
packages/desktop-client/src/style/themes/midnight.ts
View File

@@ -76,8 +76,6 @@ export const mobileNavItem = colorPalette.gray150;
export const mobileNavItemSelected = colorPalette.purple200;
export const mobileAccountShadow = cardShadow;
export const mobileAccountText = colorPalette.blue800;
export const mobileModalBackground = menuAutoCompleteBackground;
export const mobileModalText = colorPalette.white;
// Mobile view themes (for the top bar)
export const mobileViewTheme = mobileHeaderBackground;

6
upcoming-release-notes/2577.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Bugfix
authors: [joel-jeremy]
---
Use desktop colors for mobile autocomplete modals.