Adjust fonts

actualbudget · Nov 23, 2023 · 17935f6 · 17935f6
1 parent 8eda5eb
commit 17935f6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 20 deletions.
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -152,6 +152,7 @@ function defaultRenderGroupHeader(props: AccountGroupHeaderProps): ReactNode {
 type AccountItemProps = {
   item: AccountEntity;
   className?: string;
+  style?: CSSProperties;
   highlighted?: boolean;
   embedded?: boolean;
 };

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -276,6 +276,7 @@ function defaultRenderSplitTransactionButton(
 type CategoryItemProps = {
   item: CategoryEntity & { group?: CategoryGroupEntity };
   className?: string;
+  style?: CSSProperties;
   highlighted?: boolean;
   embedded?: boolean;
 };

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -450,6 +450,7 @@ function defaultRenderGroupHeader(props: PayeeGroupHeaderProps): ReactNode {
 type PayeeItemProps = {
   item: PayeeEntity;
   className?: string;
+  style?: CSSProperties;
   highlighted?: boolean;
   embedded?: boolean;
 };

diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
@@ -56,11 +56,18 @@ export default function EditField({ modalProps, name, onSubmit }) {
     modalProps.onClose();
   }
 
+  const itemStyle = {
+    fontSize: 17,
+    fontWeight: 400,
+    paddingTop: 8,
+    paddingBottom: 8,
+  };
+
   const { isNarrowWidth } = useResponsive();
   let label, editor, minWidth;
   let inputStyle = {
     ':focus': { boxShadow: 0 },
-    ...(isNarrowWidth && { fontSize: 25 }),
+    ...(isNarrowWidth && itemStyle),
   };
   let autocompleteProps = {
     inputProps: { style: inputStyle },
@@ -106,7 +113,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
               {...props}
               style={{
                 ...styles.largeText,
-                color: theme.tableHeaderText,
+                color: theme.menuItemTextHeader,
                 paddingTop: 10,
                 paddingBottom: 10,
               }}
@@ -116,10 +123,8 @@ export default function EditField({ modalProps, name, onSubmit }) {
             <AccountItem
               {...props}
               style={{
-                ...styles.largeText,
-                fontWeight: 450,
-                paddingTop: 10,
-                paddingBottom: 10,
+                ...itemStyle,
+                color: theme.menuItemText,
                 borderRadius: 0,
                 borderTop: `1px solid ${theme.pillBorder}`,
               }}
@@ -155,7 +160,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
               {...props}
               style={{
                 ...styles.largeText,
-                color: theme.tableHeaderText,
+                color: theme.menuItemTextHeader,
                 paddingTop: 10,
                 paddingBottom: 10,
               }}
@@ -166,21 +171,18 @@ export default function EditField({ modalProps, name, onSubmit }) {
               {...props}
               Icon={CreatePayeeIcon}
               style={{
-                ...styles.largeText,
-                fontWeight: 450,
-                paddingTop: 5,
-                paddingBottom: 5,
+                ...itemStyle,
+                paddingTop: 4,
+                paddingBottom: 4,
               }}
             />
           )}
           renderPayeeItem={props => (
             <PayeeItem
               {...props}
               style={{
-                ...styles.largeText,
-                fontWeight: 450,
-                paddingTop: 10,
-                paddingBottom: 10,
+                ...itemStyle,
+                color: theme.menuItemText,
                 borderRadius: 0,
                 borderTop: `1px solid ${theme.pillBorder}`,
               }}
@@ -221,7 +223,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
               {...props}
               style={{
                 ...styles.largeText,
-                color: theme.tableHeaderText,
+                color: theme.menuItemTextHeader,
                 paddingTop: 10,
                 paddingBottom: 10,
               }}
@@ -231,10 +233,8 @@ export default function EditField({ modalProps, name, onSubmit }) {
             <CategoryItem
               {...props}
               style={{
-                ...styles.largeText,
-                fontWeight: 450,
-                paddingTop: 10,
-                paddingBottom: 10,
+                ...itemStyle,
+                color: theme.menuItemText,
                 borderRadius: 0,
                 borderTop: `1px solid ${theme.pillBorder}`,
               }}