diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index ad50910ce8b95e896542f1636bd7e221d4487833..2dc1b21da882ad4d176964ffd336a5ec6d8f5d9e 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/packages/desktop-client/src/components/ManageRules.js
@@ -33,8 +33,8 @@ import { colors } from '../style';
import Button from './common/Button';
import ExternalLink from './common/ExternalLink';
-import Input from './common/Input';
import LinkButton from './common/LinkButton';
+import Search from './common/Search';
import Stack from './common/Stack';
import Text from './common/Text';
import View from './common/View';
@@ -694,7 +694,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
return (
<SelectedProvider instance={selectedInst}>
- <View style={{ overflow: 'hidden' }}>
+ <View>
<View
style={{
flexDirection: 'row',
@@ -722,23 +722,10 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
</Text>
</View>
<View style={{ flex: 1 }} />
- <Input
+ <Search
placeholder="Filter rules..."
value={filter}
- onChange={e => {
- setFilter(e.target.value);
- }}
- style={{
- width: 350,
- borderColor: isModal ? null : 'transparent',
- backgroundColor: isModal ? null : colors.n11,
- ':focus': isModal
- ? null
- : {
- backgroundColor: 'white',
- '::placeholder': { color: colors.n8 },
- },
- }}
+ onChange={setFilter}
/>
</View>
<View style={{ flex: 1 }}>
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index d3f8ef124eceb3a804141b64bf95f2aaf7ae358e..9afbb14f00dc5c4daa3b96488effe9a9b619ac70 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -7,17 +7,15 @@ import ArrowsExpand3 from '../../icons/v2/ArrowsExpand3';
import ArrowsShrink3 from '../../icons/v2/ArrowsShrink3';
import DownloadThickBottom from '../../icons/v2/DownloadThickBottom';
import Pencil1 from '../../icons/v2/Pencil1';
-import SvgRemove from '../../icons/v2/Remove';
-import SearchAlternate from '../../icons/v2/SearchAlternate';
import { styles, colors } from '../../style';
import AnimatedRefresh from '../AnimatedRefresh';
import Button from '../common/Button';
import InitialFocus from '../common/InitialFocus';
import Input from '../common/Input';
-import InputWithContent from '../common/InputWithContent';
import Menu from '../common/Menu';
import MenuButton from '../common/MenuButton';
import MenuTooltip from '../common/MenuTooltip';
+import Search from '../common/Search';
import Stack from '../common/Stack';
import View from '../common/View';
import { FilterButton } from '../filters/FiltersMenu';
@@ -234,55 +232,15 @@ export function AccountHeader({
<Add width={10} height={10} style={{ marginRight: 3 }} /> Add New
</Button>
)}
- <View>
+ <View style={{ flexShrink: 0 }}>
<FilterButton onApply={onApplyFilter} />
</View>
- <InputWithContent
- leftContent={
- <SearchAlternate
- style={{
- width: 13,
- height: 13,
- flexShrink: 0,
- color: search ? colors.p7 : 'inherit',
- margin: 5,
- marginRight: 0,
- }}
- />
- }
- rightContent={
- search && (
- <Button
- type="bare"
- style={{ padding: 8 }}
- onClick={() => onSearch('')}
- title="Clear search term"
- >
- <SvgRemove style={{ width: 8, height: 8 }} />
- </Button>
- )
- }
- inputRef={searchInput}
- value={search}
+ <View style={{ flex: 1 }} />
+ <Search
placeholder="Search"
- onKeyDown={e => {
- if (e.key === 'Escape') onSearch('');
- }}
- getStyle={focused => [
- {
- backgroundColor: 'transparent',
- borderWidth: 0,
- boxShadow: 'none',
- transition: 'color .15s',
- '& input::placeholder': {
- color: colors.n1,
- transition: 'color .25s',
- },
- },
- focused && { boxShadow: '0 0 0 2px ' + colors.b5 },
- !focused && search !== '' && { color: colors.p4 },
- ]}
- onChange={e => onSearch(e.target.value)}
+ value={search}
+ onChange={onSearch}
+ inputRef={searchInput}
/>
{workingHard ? (
<View>
@@ -306,7 +264,7 @@ export function AccountHeader({
<Button
type="bare"
disabled={search !== '' || filters.length > 0}
- style={{ padding: 6 }}
+ style={{ padding: 6, marginLeft: 10 }}
onClick={onToggleSplits}
title={
splitsExpanded.state.mode === 'collapse'
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index ec93ff259b14a0191e414e42fa7a1c2cbf4ac5cf..08e9fcf33a1987afc517311e002837cbd51b0689 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
import { css } from 'glamor';
import { useProperFocus } from '../../hooks/useProperFocus';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
import { type HTMLPropsWithStyle } from '../../types/utils';
export const defaultInputStyle = {
@@ -40,11 +40,14 @@ const Input = ({
{...css(
defaultInputStyle,
{
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ flexShrink: 0,
':focus': {
- border: '1px solid ' + colors.b5,
- boxShadow: '0 1px 1px ' + colors.b7,
+ border: '1px solid ' + theme.formInputBorderSelected,
+ boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
},
- '::placeholder': { color: colors.n7 },
+ '::placeholder': { color: theme.formInputTextPlaceholder },
},
styles.smallText,
style,
diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
index ebb5fbbfb588a18fc7e31a6bcc8ac2c8805a2c15..43419d7b772090718cacd6c9d7296b61bb7d1c2c 100644
--- a/packages/desktop-client/src/components/common/InputWithContent.tsx
+++ b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -2,7 +2,7 @@ import { type ComponentProps, type ReactNode, useState } from 'react';
import { type CSSProperties } from 'glamor';
-import { colors } from '../../style';
+import { theme } from '../../style';
import Input, { defaultInputStyle } from './Input';
import View from './View';
@@ -11,6 +11,7 @@ type InputWithContentProps = ComponentProps<typeof Input> & {
leftContent: ReactNode;
rightContent: ReactNode;
inputStyle?: CSSProperties;
+ focusStyle?: CSSProperties;
style?: CSSProperties;
getStyle?: (focused: boolean) => CSSProperties;
};
@@ -18,6 +19,7 @@ export default function InputWithContent({
leftContent,
rightContent,
inputStyle,
+ focusStyle,
style,
getStyle,
...props
@@ -30,15 +32,14 @@ export default function InputWithContent({
defaultInputStyle,
{
padding: 0,
- flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
- focused && {
- border: '1px solid ' + colors.b5,
- boxShadow: '0 1px 1px ' + colors.b7,
- },
style,
+ focused &&
+ (focusStyle ?? {
+ boxShadow: '0 0 0 1px ' + theme.formInputShadowSelected,
+ }),
getStyle && getStyle(focused),
]}
>
diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
index c1b6bf8324687990736eeb88cad8df3d6755302a..d07f5e515fd8627391aa6f31d5ae1d5adfe5ac3c 100644
--- a/packages/desktop-client/src/components/common/Search.tsx
+++ b/packages/desktop-client/src/components/common/Search.tsx
@@ -1,8 +1,11 @@
import { type ChangeEvent, type Ref } from 'react';
-import { colors } from '../../style';
+import SvgRemove from '../../icons/v2/Remove';
+import SearchAlternate from '../../icons/v2/SearchAlternate';
+import { theme } from '../../style';
-import Input from './Input';
+import Button from './Button';
+import InputWithContent from './InputWithContent';
type SearchProps = {
inputRef: Ref<HTMLInputElement>;
@@ -19,25 +22,68 @@ export default function Search({
onChange,
placeholder,
isInModal,
- width = 350,
+ width = 250,
}: SearchProps) {
return (
- <Input
+ <InputWithContent
inputRef={inputRef}
- placeholder={placeholder}
- value={value}
- onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
style={{
width,
+ flex: '',
borderColor: isInModal ? null : 'transparent',
- backgroundColor: isInModal ? null : colors.n11,
+ backgroundColor: isInModal ? null : theme.formInputBackground,
+ }}
+ focusStyle={
+ isInModal
+ ? null
+ : {
+ boxShadow: '0 0 0 1px ' + theme.formInputShadowSelected,
+ backgroundColor: theme.formInputBackgroundSelected,
+ }
+ }
+ leftContent={
+ <SearchAlternate
+ style={{
+ width: 13,
+ height: 13,
+ flexShrink: 0,
+ color: value ? theme.altMenuItemTextSelected : 'inherit',
+ margin: 5,
+ marginRight: 0,
+ }}
+ />
+ }
+ rightContent={
+ value && (
+ <Button
+ type="bare"
+ style={{ padding: 8 }}
+ onClick={() => onChange('')}
+ title="Clear search term"
+ >
+ <SvgRemove style={{ width: 8, height: 8 }} />
+ </Button>
+ )
+ }
+ inputStyle={{
+ '::placeholder': {
+ color: theme.formInputTextPlaceholder,
+ transition: 'color .25s',
+ },
':focus': isInModal
? null
: {
- backgroundColor: 'white',
- '::placeholder': { color: colors.n8 },
+ '::placeholder': {
+ color: theme.formInputTextPlaceholderSelected,
+ },
},
}}
+ value={value}
+ placeholder={placeholder}
+ onKeyDown={e => {
+ if (e.key === 'Escape') onChange('');
+ }}
+ onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
/>
);
}
diff --git a/packages/desktop-client/src/components/payees/index.js b/packages/desktop-client/src/components/payees/index.js
index 7e4cac4cfb737156b6fcd1dd66b823cb8fd88058..6b34b408be7bc09a499dc2523be88b9f02b5d440 100644
--- a/packages/desktop-client/src/components/payees/index.js
+++ b/packages/desktop-client/src/components/payees/index.js
@@ -26,8 +26,8 @@ import Merge from '../../icons/v0/Merge';
import ArrowThinRight from '../../icons/v1/ArrowThinRight';
import { colors } from '../../style';
import Button from '../common/Button';
-import Input from '../common/Input';
import Menu from '../common/Menu';
+import Search from '../common/Search';
import Text from '../common/Text';
import View from '../common/View';
import {
@@ -479,10 +479,10 @@ export const ManagePayees = forwardRef(
style={{
flexDirection: 'row',
alignItems: 'center',
- padding: '0 10px 5px',
+ padding: '0 0 15px',
}}
>
- <View>
+ <View style={{ flexShrink: 0 }}>
<Button
type="bare"
style={{ marginRight: 10 }}
@@ -506,7 +506,11 @@ export const ManagePayees = forwardRef(
/>
)}
</View>
- <View>
+ <View
+ style={{
+ flexShrink: 0,
+ }}
+ >
{(orphanedOnly ||
(orphanedPayees && orphanedPayees.length > 0)) && (
<Button
@@ -530,23 +534,10 @@ export const ManagePayees = forwardRef(
)}
</View>
<View style={{ flex: 1 }} />
- <Input
- id="filter-input"
+ <Search
placeholder="Filter payees..."
value={filter}
- onChange={e => {
- applyFilter(e.target.value);
- tableNavigator.onEdit(null);
- }}
- style={{
- width: 350,
- borderColor: 'transparent',
- backgroundColor: colors.n11,
- ':focus': {
- backgroundColor: 'white',
- '::placeholder': { color: colors.n8 },
- },
- }}
+ onChange={applyFilter}
/>
</View>
diff --git a/packages/desktop-client/src/components/schedules/index.js b/packages/desktop-client/src/components/schedules/index.js
index 45d2d5887ef794578349f25fd6f191fffc214cf0..05f6a2198910c21fc08ccf3d45c2456a4ddaa07c 100644
--- a/packages/desktop-client/src/components/schedules/index.js
+++ b/packages/desktop-client/src/components/schedules/index.js
@@ -72,7 +72,7 @@ export default function Schedules() {
<View
style={{
- marginTop: 20,
+ marginTop: 15,
flexBasis: (ROW_HEIGHT - 1) * (Math.max(schedules.length, 1) + 1),
overflow: 'hidden',
}}
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index f24f1b6ca0ae72793ec2e6e9bc747466163b1b4d..b8d7a458782e0d3b6f9071762028d890440dd802 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -865,7 +865,7 @@ export function SelectedItemsButton({ name, keyHandlers, items, onSelect }) {
}
return (
- <View>
+ <View style={{ marginLeft: 10, flexShrink: 0 }}>
<KeyHandlers keys={keyHandlers || {}} />
<Button
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 40b7e3edf3f98f68f947631658ba4ef6b903886a..9a27a6690c6ad4251d1fe48db8ebd8b74050b81d 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -60,7 +60,7 @@ export const altMenuItemBackground = colorPalette.navy700;
export const altMenuItemBackgroundHover = colorPalette.navy600;
export const altMenuItemText = colorPalette.navy150;
export const altMenuItemTextHover = colorPalette.navy150;
-export const altMenuItemTextSelected = colorPalette.navy150;
+export const altMenuItemTextSelected = colorPalette.purple400;
export const altMenuItemTextHeader = colorPalette.purple500;
export const altMenuBorder = colorPalette.navy200;
export const altMenuBorderHover = colorPalette.purple400;
@@ -119,7 +119,7 @@ export const errorText = colorPalette.red200;
export const errorAccent = colorPalette.red500;
export const formLabelText = colorPalette.purple150;
export const formInputBackground = colorPalette.navy800;
-export const formInputBackgroundSelected = colorPalette.purple400;
+export const formInputBackgroundSelected = colorPalette.navy700;
export const formInputBackgroundSelection = colorPalette.purple400;
export const formInputBorder = colorPalette.navy600;
export const formInputTextReadOnlySelection = colorPalette.navy800;
@@ -127,8 +127,9 @@ export const formInputBorderSelected = colorPalette.purple400;
export const formInputText = colorPalette.navy150;
export const formInputTextSelected = colorPalette.black;
export const formInputTextPlaceholder = colorPalette.navy150;
+export const formInputTextPlaceholderSelected = colorPalette.navy100;
export const formInputTextSelection = colorPalette.navy800;
-export const formInputShadowSelected = colorPalette.purple400;
+export const formInputShadowSelected = colorPalette.purple200;
export const formInputTextHighlight = colorPalette.purple400;
export const pillBackground = colorPalette.navy600;
export const pillText = colorPalette.navy200;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 03fd08480db33bd93f9db67639022701d85c21a5..b800f2956d2674acf408ae3b64c3c31910452634 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -119,7 +119,7 @@ export const errorText = colorPalette.red500;
export const errorAccent = colorPalette.red200;
export const formLabelText = colorPalette.blue500;
export const formInputBackground = colorPalette.navy50;
-export const formInputBackgroundSelected = colorPalette.purple500;
+export const formInputBackgroundSelected = colorPalette.white;
export const formInputBackgroundSelection = colorPalette.purple500;
export const formInputBorder = colorPalette.navy300;
export const formInputTextReadOnlySelection = colorPalette.navy50;
@@ -127,8 +127,9 @@ export const formInputBorderSelected = colorPalette.purple500;
export const formInputText = colorPalette.navy700;
export const formInputTextSelected = colorPalette.navy50;
export const formInputTextPlaceholder = colorPalette.navy300;
+export const formInputTextPlaceholderSelected = colorPalette.navy200;
export const formInputTextSelection = colorPalette.navy100;
-export const formInputShadowSelected = colorPalette.purple500;
+export const formInputShadowSelected = colorPalette.purple300;
export const formInputTextHighlight = colorPalette.purple500;
export const pillBackground = colorPalette.navy150;
export const pillText = colorPalette.navy800;
diff --git a/upcoming-release-notes/1408.md b/upcoming-release-notes/1408.md
new file mode 100644
index 0000000000000000000000000000000000000000..b7a65925189cc9b6401cb3fc4e9e2c2989bd728e
--- /dev/null
+++ b/upcoming-release-notes/1408.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Improving Search Bar for all pages.