Merge pull request #162 from a110605/fix_upgrade_modal

Fix upgrade cluster model styles

pkg/harvester/components/HarvesterUpgradeHeader.vue

@@ -190,6 +190,7 @@ export default {
       v-clean-tooltip="{
         placement: 'bottom-left',
       }"
+      popper-class="upgrade-header-dropdown"
       class="hand"
     >
       <slot name="button-content">
@@ -272,7 +273,7 @@ export default {
 
           <p
             v-if="overallMessage"
-            class="text-warning mb-20"
+            class="text-error mb-20"
           >
             {{ overallMessage }}
           </p>
@@ -338,6 +339,12 @@ export default {
   </div>
 </template>
 
+<style lang="scss">
+.upgrade-header-dropdown .v-popper__arrow-container {
+  display: none;
+}
+</style>
+
 <style lang="scss" scoped>
 a {
   float: right;

pkg/harvester/components/HarvesterUpgradeProgressBarList.vue

@@ -12,7 +12,7 @@ export default {
       default: ''
     },
 
-    precent: {
+    percent: {
       type:    Number,
       default: 0
     },
@@ -39,16 +39,18 @@ export default {
 
 <template>
   <div class="bar-list">
-    <h4>{{ title }} <span class="float-r text-info">{{ precent }}%</span></h4>
+    <h4>{{ title }} <span class="float-r text-info">{{ percent }}%</span></h4>
     <div>
       <div>
         <Collapse v-model:open="open">
           <template #title>
             <div class="total-bar">
-              <span class="bar"><PercentageBar
-                :model-value="precent"
+              <span class="bar">
+                <PercentageBar
+                  :model-value="percent"
                   preferred-direction="MORE"
-              /></span>
+                />
+              </span>
               <span
                 class="on-off"
                 @click="handleSwitch"
@@ -56,7 +58,6 @@ export default {
             </div>
           </template>
 
-          <template>
           <div class="custom-content">
             <div
               v-for="(item, i) in list"
@@ -77,7 +78,6 @@ export default {
               </p>
             </div>
           </div>
-          </template>
         </Collapse>
       </div>
     </div>
@@ -93,7 +93,7 @@ export default {
   .total-bar {
     display: flex;
     user-select: none;
-    .bar {
+    > .bar {
       width: 85%;
     }
     .on-off {
@@ -102,7 +102,6 @@ export default {
     }
   }
   .custom-content {
-    .item {
     margin-bottom: 14px;
     p {
       margin-bottom: 4px;
@@ -120,7 +119,5 @@ export default {
       color: var(--error);
     }
   }
-  }
 }
-
 </style>