From a78346715ac9f56da81f6d9e21e95f02d1edb4d0 Mon Sep 17 00:00:00 2001
From: Yi Yang <Leopoldthecoder@users.noreply.github.com>
Date: Thu, 23 Nov 2023 18:09:27 +0800
Subject: [PATCH] fix(forms): misc style fix (#942)

---
 packages/core/forms/package.json              |  1 +
 .../forms/src/generator/FormGenerator.vue     |  1 -
 .../advanced/FieldArrayCardContainer.vue      | 17 ++++++++-----
 .../fields/advanced/FieldArrayItem.vue        | 10 +++-----
 .../generator/fields/advanced/FieldMetric.vue | 25 +++++++++++--------
 .../fields/advanced/FieldObjectAdvanced.vue   | 11 --------
 .../components/entity-filter/EntityFilter.vue |  1 +
 pnpm-lock.yaml                                |  3 +++
 8 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
index ad10b18e0b..25b8aa5bbe 100644
--- a/packages/core/forms/package.json
+++ b/packages/core/forms/package.json
@@ -49,6 +49,7 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
+    "@kong/icons": "^1.8.0",
     "fecha": "^4.2.3",
     "lodash": "^4.17.21"
   },
diff --git a/packages/core/forms/src/generator/FormGenerator.vue b/packages/core/forms/src/generator/FormGenerator.vue
index 548a4afb69..8a1347b2b7 100644
--- a/packages/core/forms/src/generator/FormGenerator.vue
+++ b/packages/core/forms/src/generator/FormGenerator.vue
@@ -329,7 +329,6 @@ export default {
 
       &:hover {
         background-color: #e6e6e6;
-        border-color: #adadad;
         color: #333;
       }
 
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldArrayCardContainer.vue b/packages/core/forms/src/generator/fields/advanced/FieldArrayCardContainer.vue
index 92b354dc7b..0cf7c7c7d3 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldArrayCardContainer.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldArrayCardContainer.vue
@@ -7,22 +7,22 @@
     </KCard>
 
     <KButton
+      appearance="tertiary"
+      class="array-card-remove-button"
       @click="$emit('remove-item')"
     >
-      <template #icon>
-        <KIcon
-          icon="trash"
-          size="18"
-        />
-      </template>
+      <TrashIcon />
     </KButton>
   </div>
 </template>
 
 <script>
+import { TrashIcon } from '@kong/icons'
 export default {
   name: 'FieldArrayCardContainer',
 
+  components: { TrashIcon },
+
   props: {
     model: {
       type: Object,
@@ -50,10 +50,15 @@ export default {
 
 <style lang="scss" scoped>
 .array-card-container {
+  align-items: center;
   display: flex;
 
   .card {
     margin-bottom: 8px;
   }
+
+  .array-card-remove-button {
+    margin-left: 12px;
+  }
 }
 </style>
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldArrayItem.vue b/packages/core/forms/src/generator/fields/advanced/FieldArrayItem.vue
index a162ebb77a..f0b480f084 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldArrayItem.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldArrayItem.vue
@@ -7,19 +7,17 @@
       type="button"
       @click="$emit('remove-item')"
     >
-      <template #icon>
-        <KIcon
-          icon="trash"
-          size="18"
-        />
-      </template>
+      <TrashIcon />
     </KButton>
   </div>
 </template>
 
 <script>
+import { TrashIcon } from '@kong/icons'
+
 export default {
   name: 'FieldArrayItem',
+  components: { TrashIcon },
   props: {
     model: {
       type: String,
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue b/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue
index 9809172b6d..8e36d79a23 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue
@@ -8,7 +8,7 @@
       @click="contentVisible = !contentVisible"
     >
       {{ model.name ? model.name : 'New Item' }}
-      <i class="material-icons">add</i>
+      <AddIcon class="metric-add-icon" />
     </div>
     <transition name="slide-fade">
       <div
@@ -16,22 +16,25 @@
         class="content"
       >
         <slot />
-        <i
-          class="material-icons"
+        <KButton
+          appearance="tertiary"
+          class="metric-remove-button"
           @click="$emit('remove-item')"
         >
-          delete
-        </i>
+          <TrashIcon />
+        </KButton>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
+import { AddIcon, TrashIcon } from '@kong/icons'
 import abstractField from '../abstractField'
 
 export default {
   name: 'FieldMetric',
+  components: { AddIcon, TrashIcon },
   mixins: [abstractField],
   emits: ['remove-item'],
 
@@ -76,7 +79,7 @@ export default {
     width: 100%;
     &:hover { background-color: #f5f5f5; }
   }
-  i {
+  .metric-add-icon {
     margin-left: auto;
     transition: all .7s;
     user-select: none;
@@ -87,10 +90,8 @@ export default {
     height: auto;
     overflow: hidden;
     transition: all .5s;
-    i:hover {
-      color: #c9302c;
-    }
-    .material-icons {
+
+    .metric-remove-button {
       float: right;
       margin-bottom: 16px;
       margin-right: 16px;
@@ -99,6 +100,8 @@ export default {
       padding: 16px;
     }
   }
-  &.active .title i { transform: rotate(135deg); }
+  &.active .title .metric-add-icon {
+    transform: rotate(45deg);
+  }
 }
 </style>
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
index c276fca34c..0e42eb6348 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldObjectAdvanced.vue
@@ -211,17 +211,6 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-.vue-form-generator .field-wrap {
-  .k-button {
-    &,
-    &:hover {
-      background: none;
-      border: none;
-    }
-  }
-}
-</style>
 
 <style lang="scss" scoped>
 .object-advanced-wrapper {
diff --git a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
index 2330b0c0d6..69d9a21dda 100644
--- a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
+++ b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
@@ -98,6 +98,7 @@
         <template #actionButton>
           <div class="filter-clear-button-container">
             <KButton
+              appearance="tertiary"
               size="small"
               @click="clearFields"
             >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d10020d966..ee76e7850c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -439,6 +439,9 @@ importers:
 
   packages/core/forms:
     dependencies:
+      '@kong/icons':
+        specifier: ^1.8.0
+        version: 1.8.0(vue@3.3.4)
       fecha:
         specifier: ^4.2.3
         version: 4.2.3