🐛 (mobile) hide sync button if sync is not active (#1546)

Author: MatissJanis

packages/desktop-client/src/components/Titlebar.tsx

@@ -149,21 +149,29 @@ export function SyncButton({ style }: SyncButtonProps) {
     return unlisten;
   }, []);
 
+  const mobileColor =
+    syncState === 'error'
+      ? colors.r7
+      : syncState === 'disabled' ||
+        syncState === 'offline' ||
+        syncState === 'local'
+      ? colors.n9
+      : style.color;
+  const activeStyle = css(
+    // mobile
+    media(`(max-width: ${tokens.breakpoint_small})`, {
+      color: mobileColor,
+    }),
+  );
+
   return (
     <Button
       type="bare"
       style={css(
         style,
         {
           WebkitAppRegion: 'none',
-          color:
-            syncState === 'error'
-              ? colors.r7
-              : syncState === 'disabled' ||
-                syncState === 'offline' ||
-                syncState === 'local'
-              ? colors.n9
-              : null,
+          color: mobileColor,
         },
         media(`(min-width: ${tokens.breakpoint_small})`, {
           color:
@@ -176,6 +184,8 @@ export function SyncButton({ style }: SyncButtonProps) {
               : null,
         }),
       )}
+      hoveredStyle={activeStyle}
+      activeStyle={activeStyle}
       onClick={sync}
     >
       {syncState === 'error' ? (

packages/desktop-client/src/components/budget/MobileBudgetTable.js

@@ -22,6 +22,7 @@ import Card from '../common/Card';
 import Label from '../common/Label';
 import Text from '../common/Text';
 import View from '../common/View';
+import { useServerURL } from '../ServerContext';
 import CellValue from '../spreadsheet/CellValue';
 import format from '../spreadsheet/format';
 import NamespaceContext from '../spreadsheet/NamespaceContext';
@@ -1016,6 +1017,8 @@ function BudgetHeader({
   onPrevMonth,
   onNextMonth,
 }) {
+  let serverURL = useServerURL();
+
   // let [menuOpen, setMenuOpen] = useState(false);
 
   // let onMenuSelect = type => {
@@ -1113,18 +1116,20 @@ function BudgetHeader({
             />
           </Button>
 
-          <SyncButton
-            style={{
-              color: 'white',
-              position: 'absolute',
-              top: 0,
-              bottom: 0,
-              right: 0,
-              backgroundColor: 'transparent',
-              paddingLeft: 12,
-              paddingRight: 12,
-            }}
-          />
+          {serverURL && (
+            <SyncButton
+              style={{
+                color: 'white',
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                right: 0,
+                backgroundColor: 'transparent',
+                paddingLeft: 12,
+                paddingRight: 12,
+              }}
+            />
+          )}
           {/* <Button
             type="bare"
             onClick={() => setMenuOpen(true)}

upcoming-release-notes/1546.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Mobile: hide sync button when sync is not active