From cdff98b109e149943dd17bb26a11b65dbc3a5088 Mon Sep 17 00:00:00 2001
From: Trevor Farlow <trevdor@users.noreply.github.com>
Date: Fri, 1 Sep 2023 10:58:01 -0600
Subject: [PATCH] :bug: Mobile: fix Accounts page theme color (#1604)
* Make all mobile view themes respect Actual color themes
---
.../src/components/accounts/MobileAccount.js | 2 +-
.../src/components/accounts/MobileAccounts.js | 2 +-
.../src/components/budget/MobileBudget.js | 4 ++--
.../src/components/manager/ConfigServer.tsx | 4 ++--
.../desktop-client/src/components/settings/index.tsx | 4 ++--
.../src/components/transactions/MobileTransaction.js | 2 +-
.../desktop-client/src/hooks/useSetThemeColor.ts | 12 +++++++++++-
packages/desktop-client/src/style/themes/dark.ts | 8 ++++++++
packages/desktop-client/src/style/themes/light.ts | 8 ++++++++
upcoming-release-notes/1604.md | 6 ++++++
10 files changed, 42 insertions(+), 10 deletions(-)
create mode 100644 upcoming-release-notes/1604.md
diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
index 875c74a4a..b7d05dc84 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccount.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -167,7 +167,7 @@ export default function Account(props) {
useEffect(updateSearchQuery, [searchText, currentQuery, state.dateFormat]);
- useSetThemeColor(theme.altMenuItemTextHover);
+ useSetThemeColor(theme.mobileAccountViewTheme);
if (!accounts || !accounts.length) {
return null;
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index 83770cfc9..73be0521f 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -275,7 +275,7 @@ export default function Accounts() {
navigate(`/transaction/${transaction}`);
};
- useSetThemeColor(theme.altMenuBackground);
+ useSetThemeColor(theme.mobileAccountsViewTheme);
return (
<View style={{ flex: 1 }}>
diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
index 52b2912be..0486a5b32 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.js
+++ b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -13,7 +13,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import { useActions } from '../../hooks/useActions';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors } from '../../style';
+import { theme } from '../../style';
import View from '../common/View';
import SyncRefresh from '../SyncRefresh';
@@ -303,7 +303,7 @@ export default function BudgetWrapper() {
let actions = useActions();
let spreadsheet = useSpreadsheet();
- useSetThemeColor(colors.p5);
+ useSetThemeColor(theme.mobileBudgetViewTheme);
return (
<Budget
categoryGroups={categoryGroups}
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx
index 7dbda7758..8934024d2 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.tsx
+++ b/packages/desktop-client/src/components/manager/ConfigServer.tsx
@@ -8,7 +8,7 @@ import {
import { useActions } from '../../hooks/useActions';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
-import { colors } from '../../style';
+import { colors, theme } from '../../style';
import Button, { ButtonWithLoading } from '../common/Button';
import { BigInput } from '../common/Input';
import Text from '../common/Text';
@@ -18,7 +18,7 @@ import { useServerURL, useSetServerURL } from '../ServerContext';
import { Title } from './subscribe/common';
export default function ConfigServer() {
- useSetThemeColor(colors.p5);
+ useSetThemeColor(theme.mobileConfigServerViewTheme);
let { createBudget, signOut, loggedIn } = useActions();
let navigate = useNavigate();
let [url, setUrl] = useState('');
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index cfd38ca00..5771954a5 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -11,7 +11,7 @@ import useFeatureFlag from '../../hooks/useFeatureFlag';
import useLatestVersion, { useIsOutdated } from '../../hooks/useLatestVersion';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { useResponsive } from '../../ResponsiveProvider';
-import { colors } from '../../style';
+import { colors, theme } from '../../style';
import tokens from '../../tokens';
import Button from '../common/Button';
import ExternalLink from '../common/ExternalLink';
@@ -133,7 +133,7 @@ export default function Settings() {
const { isNarrowWidth } = useResponsive();
const themesFlag = useFeatureFlag('themes');
- useSetThemeColor(colors.n11);
+ useSetThemeColor(theme.mobileSettingsViewTheme);
return (
<View
style={{
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 7dcf4007a..d1eefb348 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -698,7 +698,7 @@ function TransactionEditUnconnected(props) {
let adding = false;
let deleted = false;
- useSetThemeColor(colors.p5);
+ useSetThemeColor(theme.mobileTransactionViewTheme);
useEffect(() => {
// May as well update categories / accounts when transaction ID changes
diff --git a/packages/desktop-client/src/hooks/useSetThemeColor.ts b/packages/desktop-client/src/hooks/useSetThemeColor.ts
index 15509fa7a..117181ddc 100644
--- a/packages/desktop-client/src/hooks/useSetThemeColor.ts
+++ b/packages/desktop-client/src/hooks/useSetThemeColor.ts
@@ -1,8 +1,10 @@
import { useEffect } from 'react';
+const VAR_STRING_REGEX = /^var\((--.*)\)$/;
+
export function useSetThemeColor(color: string) {
useEffect(() => {
- setThemeColor(color);
+ setThemeColor(getPropertyValueFromVarString(color));
}, [color]);
}
@@ -11,3 +13,11 @@ function setThemeColor(color: string) {
const themeTag = [...metaTags].find(tag => tag.name === 'theme-color');
themeTag.setAttribute('content', color);
}
+
+function getPropertyValueFromVarString(varString: string) {
+ return VAR_STRING_REGEX.test(varString)
+ ? window
+ .getComputedStyle(document.documentElement)
+ .getPropertyValue(varString.match(VAR_STRING_REGEX)[1])
+ : varString;
+}
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 964a67da1..e2691ec83 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -83,6 +83,14 @@ export const mobileNavItemSelected = colorPalette.purple400;
export const mobileAccountShadow = cardShadow;
export const mobileAccountText = colorPalette.blue800;
+// Mobile view themes (for the top bar)
+export const mobileAccountViewTheme = colorPalette.navy50;
+export const mobileAccountsViewTheme = colorPalette.blue800;
+export const mobileBudgetViewTheme = colorPalette.purple500;
+export const mobileConfigServerViewTheme = colorPalette.purple500;
+export const mobileSettingsViewTheme = colorPalette.navy50;
+export const mobileTransactionViewTheme = colorPalette.purple500;
+
// Button
export const buttonMenuText = colorPalette.navy100;
export const buttonMenuTextHover = colorPalette.navy50;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index af72c18fe..aded0c447 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -83,6 +83,14 @@ export const mobileNavItemSelected = colorPalette.purple500;
export const mobileAccountShadow = colorPalette.navy300;
export const mobileAccountText = colorPalette.blue800;
+// Mobile view themes (for the top bar)
+export const mobileAccountViewTheme = colorPalette.navy50;
+export const mobileAccountsViewTheme = colorPalette.blue800;
+export const mobileBudgetViewTheme = colorPalette.purple500;
+export const mobileConfigServerViewTheme = colorPalette.purple500;
+export const mobileSettingsViewTheme = colorPalette.navy50;
+export const mobileTransactionViewTheme = colorPalette.purple500;
+
// Button
export const buttonMenuText = colorPalette.navy100;
export const buttonMenuTextHover = colorPalette.navy50;
diff --git a/upcoming-release-notes/1604.md b/upcoming-release-notes/1604.md
new file mode 100644
index 000000000..f9736dda9
--- /dev/null
+++ b/upcoming-release-notes/1604.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [trevdor]
+---
+
+Mobile: fix regression of Accounts page theme
--
GitLab