From 78861e0a0af0fa1693c1f9b7719a32f6d02d5bdc Mon Sep 17 00:00:00 2001
From: zaelgohary <zainabelgohary19@gmail.com>
Date: Thu, 15 Jun 2023 11:35:52 +0300
Subject: [PATCH] Edit action in contract list to be eye icon

---
 .../playground/src/weblets/tf_contracts_list.vue     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index cc3fa5f50b..4c8f288a63 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -53,9 +53,9 @@
       </template>
 
       <template #[`item.actions`]="{ item }">
-        <v-btn
-          color="secondary"
-          variant="tonal"
+        <IconActionBtn
+          tooltip="Show Details"
+          icon="mdi-eye-outline"
           @click="
             item.value.type !== 'name'
               ? onShowDetails(item.value.contractId)
@@ -63,9 +63,7 @@
           "
           :disabled="(loading && loadingContractId !== item.value.contractId) || deleting"
           :loading="loadingContractId == item.value.contractId"
-        >
-          Show Details
-        </v-btn>
+        />
       </template>
     </ListTable>
 
@@ -130,6 +128,7 @@
 import { ContractStates } from "@threefold/grid_client";
 import { ref } from "vue";
 
+import IconActionBtn from "../components/icon_action_btn.vue";
 import { useProfileManager } from "../stores";
 import type { VDataTableHeader } from "../types";
 import { getUserContracts, type NormalizedContract } from "../utils/contracts";
@@ -248,6 +247,7 @@ export default {
   name: "TfContractsList",
   components: {
     ListTable,
+    IconActionBtn,
   },
 };
 </script>