Merge pull request #614 from threefoldtech/development_contract_list_…

…action

Edit action in contract list to be eye icon

packages/playground/src/weblets/tf_contracts_list.vue

@@ -53,19 +53,17 @@
       </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)
               : layout.openDialog(item.value, false, true)
           "
           :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>