Change Titlebar.tsx 'Sync' to Syncing icon only (#7005)

* Update Titlebar.tsx sync name to Server Sync

* Update Titlebar.tsx

* Create 7005.md

Change title Bar 'Sync' to 'Server Sync'.

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

Co-authored-by: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>

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

Co-authored-by: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>

* Update Titlebar.tsx

* Update Titlebar.tsx

* Update Titlebar.tsx

* [autofix.ci] apply automated fixes

* Update 7005.md

* Disable Server Sync button when offline in Titlebar component

* fix lint

* Add aria-disabled attribute to Server Sync button in Titlebar component

* Update titlebar sync icon and improve accessibility

Add disabled state and aria disabled label for offline mode.

---------

Co-authored-by: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: youngcw <calebyoung94@gmail.com>

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

@@ -106,11 +106,11 @@ function PrivacyButton({ style }: PrivacyButtonProps) {
   );
 }
 
-type SyncButtonProps = {
+type ServerSyncButtonProps = {
   style?: CSSProperties;
   isMobile?: boolean;
 };
-function SyncButton({ style, isMobile = false }: SyncButtonProps) {
+function ServerSyncButton({ style, isMobile = false }: ServerSyncButtonProps) {
   const { t } = useTranslation();
   const [cloudFileId] = useMetadataPref('cloudFileId');
   const dispatch = useDispatch();
@@ -166,7 +166,7 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       : syncState === 'disabled' ||
           syncState === 'offline' ||
           syncState === 'local'
-        ? theme.tableTextLight
+        ? theme.buttonBareDisabledText
         : 'inherit';
 
   const activeStyle = isMobile
@@ -213,7 +213,7 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
   return (
     <Button
       variant="bare"
-      aria-label={t('Sync')}
+      aria-label={t('Server Sync')}
       className={css({
         ...(isMobile
           ? {
@@ -230,6 +230,8 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
         '&[data-pressed]': activeStyle,
       })}
       onPress={onSync}
+      isDisabled={syncState === 'offline'}
+      aria-disabled={syncState === 'offline'}
     >
       {isMobile ? (
         syncState === 'error' ? (
@@ -243,11 +245,7 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
         <AnimatedRefresh animating={syncing} />
       )}
       <Text style={isMobile ? { ...mobileTextStyle } : { marginLeft: 3 }}>
-        {syncState === 'disabled'
-          ? t('Disabled')
-          : syncState === 'offline'
-            ? t('Offline')
-            : t('Sync')}
+        {syncState === 'disabled' ? t('Disabled') : null}
       </Text>
     </Button>
   );
@@ -346,7 +344,7 @@ export function Titlebar({ style }: TitlebarProps) {
         <UncategorizedButton />
         {isDevelopmentEnvironment() && !isTestEnv && <ThemeSelector />}
         <PrivacyButton />
-        {serverURL ? <SyncButton /> : null}
+        {serverURL ? <ServerSyncButton /> : null}
         <LoggedInUser />
         <HelpMenu />
       </SpaceBetween>