From 2ff1e67e8aa242ac07657b74d5d089e0851b5c70 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Thu, 7 Sep 2023 06:55:47 +0100
Subject: [PATCH] :bug: (mobile) fix sync button design (#1665)
* :bug: (mobile) fix sync button design
* Release notes
---
.../src/components/Titlebar.tsx | 48 ++++++++-----------
.../components/budget/MobileBudgetTable.js | 1 +
upcoming-release-notes/1665.md | 6 +++
3 files changed, 28 insertions(+), 27 deletions(-)
create mode 100644 upcoming-release-notes/1665.md
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 4483900ee..fab82dbe3 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -9,8 +9,6 @@ import React, {
import { useSelector } from 'react-redux';
import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
-import { css, media } from 'glamor';
-
import * as Platform from 'loot-core/src/client/platform';
import * as queries from 'loot-core/src/client/queries';
import { listen } from 'loot-core/src/platform/client/fetch';
@@ -24,7 +22,6 @@ import SvgEyeSlashed from '../icons/v2/EyeSlashed';
import NavigationMenu from '../icons/v2/NavigationMenu';
import { useResponsive } from '../ResponsiveProvider';
import { colors, type CSSProperties } from '../style';
-import tokens from '../tokens';
import AccountSyncCheck from './accounts/AccountSyncCheck';
import AnimatedRefresh from './AnimatedRefresh';
@@ -107,8 +104,9 @@ function PrivacyButton() {
type SyncButtonProps = {
style?: CSSProperties;
+ isMobile?: boolean;
};
-export function SyncButton({ style }: SyncButtonProps) {
+export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
let cloudFileId = useSelector(state => state.prefs.local.cloudFileId);
let { sync } = useActions();
@@ -156,33 +154,29 @@ export function SyncButton({ style }: SyncButtonProps) {
syncState === 'local'
? colors.n9
: style.color;
- const activeStyle = css(
- // mobile
- media(`(max-width: ${tokens.breakpoint_small})`, {
- color: mobileColor,
- }),
- );
+ const desktopColor =
+ syncState === 'error'
+ ? colors.r4
+ : syncState === 'disabled' ||
+ syncState === 'offline' ||
+ syncState === 'local'
+ ? colors.n6
+ : null;
+
+ const activeStyle = isMobile
+ ? {
+ color: mobileColor,
+ }
+ : {};
return (
<Button
type="bare"
- style={css(
- style,
- {
- WebkitAppRegion: 'none',
- color: mobileColor,
- },
- media(`(min-width: ${tokens.breakpoint_small})`, {
- color:
- syncState === 'error'
- ? colors.r4
- : syncState === 'disabled' ||
- syncState === 'offline' ||
- syncState === 'local'
- ? colors.n6
- : null,
- }),
- )}
+ style={{
+ ...style,
+ WebkitAppRegion: 'none',
+ color: isMobile ? mobileColor : desktopColor,
+ }}
hoveredStyle={activeStyle}
activeStyle={activeStyle}
onClick={sync}
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 44eced7c2..b8f8045da 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -1051,6 +1051,7 @@ function BudgetHeader({
{serverURL && (
<SyncButton
+ isMobile
style={{
color: 'white',
position: 'absolute',
diff --git a/upcoming-release-notes/1665.md b/upcoming-release-notes/1665.md
new file mode 100644
index 000000000..160194f5d
--- /dev/null
+++ b/upcoming-release-notes/1665.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Mobile: fix sync button design
--
GitLab