refactor: refs #7186 fixed style and tab

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -32,6 +32,13 @@ const invoiceInFormRef = ref();
 const expensesRef = ref();
 const newExpenseRef = ref();
 
+const $props = defineProps({
+    actionIcon: {
+        type: String,
+        default: 'add',
+    },
+});
+
 const columns = computed(() => [
     {
         name: 'expense',
@@ -94,6 +101,11 @@ const columns = computed(() => [
         field: (row) => row.foreignValue,
         align: 'left',
     },
+    {
+        get() {
+            return $props.actionIcon;
+        },
+    }
 ]);
 
 const filter = {
@@ -207,17 +219,19 @@ async function addExpense() {
                                     @click.stop="value = null"
                                     class="cursor-pointer"
                                 />
-                                <QBtn
-                                    padding="xs"
-                                    round
-                                    flat
-                                    icon="add_circle"
-                                    @click.stop="newExpenseRef.show()"
+                                <QIcon
+                                    @click.stop.prevent="newExpenseRef.show()"
+                                    :name="actionIcon"
+                                    :size="actionIcon === 'add' ? 'xs' : 'sm'"
+                                    :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
+                                    :style="{
+                                        'font-variation-settings': `'FILL' ${1}`,
+                                    }"
                                 >
                                     <QTooltip>
                                         {{ t('Create expense') }}
                                     </QTooltip>
-                                </QBtn>
+                                </QIcon>
                             </template>
                         </VnSelectFilter>
                     </QTd>
@@ -470,6 +484,16 @@ async function addExpense() {
 .q-item {
     min-height: 0;
 }
+.default-icon {
+    cursor: pointer;
+    color: $primary;
+    border-radius: 50px;
+
+    &.--add-icon {
+        color: var(--vn-text-color);
+        background-color: $primary;
+    }
+}
 </style>
 <i18n>
 es: