From 544cdd3d56f31098403360de5119bfbd9cd1c85c Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Sep 2024 08:19:57 +0000
Subject: [PATCH] fix(core): adjust app updater button style (#8289)

https://github.com/user-attachments/assets/6d6d9ff5-f3aa-466b-94f1-ce152b856cac
---
 .../app-updater-button/index.css.ts           |  1 +
 .../app-sidebar/app-updater-button/index.tsx  | 30 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.css.ts b/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.css.ts
index eca5bdf1cd..a897697058 100644
--- a/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.css.ts
+++ b/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',
diff --git a/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx b/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx
index a307ca6e8e..a3e129cbe0 100644
--- a/packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx
+++ b/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}>
-      <span className={styles.ellipsisTextOverflow}>
-        {t['com.affine.appUpdater.downloadUpdate']()}
-      </span>
-      <span className={styles.versionLabel}>{updateAvailable?.version}</span>
+    <div className={styles.updateAvailableWrapper}>
+      <div className={styles.installLabelNormal}>
+        <DownloadIcon className={styles.icon} />
+        <span className={styles.ellipsisTextOverflow}>
+          {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>