fix(core): adjust app updater button style (#8289)

https://github.com/user-attachments/assets/6d6d9ff5-f3aa-466b-94f1-ce152b856cac

packages/frontend/core/src/components/app-sidebar/app-updater-button/index.css.ts

@@ -87,6 +87,7 @@ export const installLabel = style({
 export const installLabelNormal = style([
   installLabel,
   {
+    justifyContent: 'flex-start',
     selectors: {
       [`${root}:hover &, ${root}[data-updating=true] &`]: {
         display: 'none',

packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx

@@ -3,7 +3,12 @@ import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-e
 import { popupWindow } from '@affine/core/utils';
 import { Unreachable } from '@affine/env/constant';
 import { useI18n } from '@affine/i18n';
-import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons/rc';
+import {
+  CloseIcon,
+  DownloadIcon,
+  NewIcon,
+  ResetIcon,
+} from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { useCallback, useMemo } from 'react';
 
@@ -43,11 +48,21 @@ interface ButtonContentProps {
 function DownloadUpdate({ updateAvailable }: ButtonContentProps) {
   const t = useI18n();
   return (
-    <div className={styles.installLabel}>
+    <div className={styles.updateAvailableWrapper}>
-      <span className={styles.ellipsisTextOverflow}>
+      <div className={styles.installLabelNormal}>
-        {t['com.affine.appUpdater.downloadUpdate']()}
+        <DownloadIcon className={styles.icon} />
-      </span>
+        <span className={styles.ellipsisTextOverflow}>
-      <span className={styles.versionLabel}>{updateAvailable?.version}</span>
+          {t['com.affine.appUpdater.downloadUpdate']()}
+        </span>
+        <span className={styles.versionLabel}>{updateAvailable?.version}</span>
+      </div>
+
+      <div className={styles.installLabelHover}>
+        <DownloadIcon className={styles.icon} />
+        <span className={styles.ellipsisTextOverflow}>
+          {t['com.affine.appUpdater.downloadUpdate']()}
+        </span>
+      </div>
     </div>
   );
 }
@@ -57,6 +72,7 @@ function UpdateReady({ updateAvailable, appQuitting }: ButtonContentProps) {
   return (
     <div className={styles.updateAvailableWrapper}>
       <div className={styles.installLabelNormal}>
+        <ResetIcon className={styles.icon} />
         <span className={styles.ellipsisTextOverflow}>
           {t['com.affine.appUpdater.updateAvailable']()}
         </span>
@@ -102,6 +118,7 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
   return (
     <>
       <div className={styles.installLabelNormal}>
+        <DownloadIcon className={styles.icon} />
         <span className={styles.ellipsisTextOverflow}>
           {t['com.affine.appUpdater.updateAvailable']()}
         </span>
@@ -109,6 +126,7 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
       </div>
 
       <div className={styles.installLabelHover}>
+        <DownloadIcon className={styles.icon} />
         <span className={styles.ellipsisTextOverflow}>
           {t['com.affine.appUpdater.openDownloadPage']()}
         </span>