From 2ff1e67e8aa242ac07657b74d5d089e0851b5c70 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Thu, 7 Sep 2023 06:55:47 +0100 Subject: [PATCH 1/5] :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 4483900ee80..fab82dbe3ab 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 (