From c174d023f6b59e7c77f6f417b04ec52d9d1c3cbf Mon Sep 17 00:00:00 2001
From: fanbook-wangdage <124357765+fanbook-wangdage@users.noreply.github.com>
Date: Thu, 7 Aug 2025 23:38:05 +0800
Subject: [PATCH 1/2] Tweak button spacing and fix color issue on App upgrade
 comparison pages

---
 .../views/app-store/installed/upgrade/diff/index.vue   | 10 ++++++++++
 .../src/views/app-store/installed/upgrade/index.vue    |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/app-store/installed/upgrade/diff/index.vue b/frontend/src/views/app-store/installed/upgrade/diff/index.vue
index 3f1a3f64063f..e7f53281244c 100644
--- a/frontend/src/views/app-store/installed/upgrade/diff/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/diff/index.vue
@@ -89,4 +89,14 @@ defineExpose({
     width: 100%;
     height: calc(100vh - 350px);
 }
+.el-button--success:hover {
+    background-color: #4e8e2f !important;
+    border-color: #4e8e2f !important;
+    color: #fff !important;
+}
+.el-button--success:active {
+    background-color: #85ce61 !important;
+    border-color: #85ce61 !important;
+    color: #fff !important;
+}
 </style>
diff --git a/frontend/src/views/app-store/installed/upgrade/index.vue b/frontend/src/views/app-store/installed/upgrade/index.vue
index f84f928fdb70..a4d773caad86 100644
--- a/frontend/src/views/app-store/installed/upgrade/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/index.vue
@@ -57,7 +57,9 @@
             <div v-if="operateReq.operate === 'upgrade'">
                 <el-text type="warning">{{ $t('app.upgradeWarn') }}</el-text>
                 <br />
-                <el-button @click="openDiff()" type="primary">{{ $t('app.showDiff') }}</el-button>
+                <el-button @click="openDiff()" type="primary" style="margin-top: 12px">
+                    {{ $t('app.showDiff') }}
+                </el-button>
                 <div>
                     <el-checkbox v-model="useNewCompose" :label="$t('app.useCustom')" size="large" />
                 </div>

From 2114d8b7665bbd799b24bbc5c74a6770b2c29b3c Mon Sep 17 00:00:00 2001
From: fanbook-wangdage <124357765+fanbook-wangdage@users.noreply.github.com>
Date: Sat, 9 Aug 2025 13:35:26 +0800
Subject: [PATCH 2/2] update button styles and replace inline margin with
 utility class

---
 .../app-store/installed/upgrade/diff/index.vue     | 14 ++------------
 .../views/app-store/installed/upgrade/index.vue    |  2 +-
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/app-store/installed/upgrade/diff/index.vue b/frontend/src/views/app-store/installed/upgrade/diff/index.vue
index e7f53281244c..607fcab40019 100644
--- a/frontend/src/views/app-store/installed/upgrade/diff/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/diff/index.vue
@@ -7,10 +7,10 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="success" @click="confirm(true)">
+                <el-button type="primary" @click="confirm(true)">
                     {{ $t('app.useNew') }}
                 </el-button>
-                <el-button type="primary" @click="confirm(false)">
+                <el-button @click="confirm(false)">
                     {{ $t('app.useDefault') }}
                 </el-button>
             </span>
@@ -89,14 +89,4 @@ defineExpose({
     width: 100%;
     height: calc(100vh - 350px);
 }
-.el-button--success:hover {
-    background-color: #4e8e2f !important;
-    border-color: #4e8e2f !important;
-    color: #fff !important;
-}
-.el-button--success:active {
-    background-color: #85ce61 !important;
-    border-color: #85ce61 !important;
-    color: #fff !important;
-}
 </style>
diff --git a/frontend/src/views/app-store/installed/upgrade/index.vue b/frontend/src/views/app-store/installed/upgrade/index.vue
index a4d773caad86..e67f5e94c468 100644
--- a/frontend/src/views/app-store/installed/upgrade/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/index.vue
@@ -57,7 +57,7 @@
             <div v-if="operateReq.operate === 'upgrade'">
                 <el-text type="warning">{{ $t('app.upgradeWarn') }}</el-text>
                 <br />
-                <el-button @click="openDiff()" type="primary" style="margin-top: 12px">
+                <el-button @click="openDiff()" type="primary" class="mt-2">
                     {{ $t('app.showDiff') }}
                 </el-button>
                 <div>