From 83d2a97beb4aa8d8273bbeb9b7199fc562688ef5 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Thu, 20 Jun 2024 17:15:11 +0300
Subject: [PATCH 1/5] update title card

---
 packages/playground/src/calculator/pricing_calculator.vue | 8 ++++----
 packages/playground/src/components/view_layout.vue        | 5 ++---
 packages/playground/src/views/minting_view.vue            | 6 +++++-
 packages/playground/src/views/solutions_view.vue          | 4 ++++
 packages/playground/src/views/vms_view.vue                | 4 ++++
 packages/playground/src/weblets/tf_contracts_list.vue     | 5 ++++-
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/playground/src/calculator/pricing_calculator.vue b/packages/playground/src/calculator/pricing_calculator.vue
index 3d1c3d2314..0412167c8a 100644
--- a/packages/playground/src/calculator/pricing_calculator.vue
+++ b/packages/playground/src/calculator/pricing_calculator.vue
@@ -1,10 +1,10 @@
 <template>
   <ViewLayout>
     <VCard>
-      <VCardTitle class="bg-primary text-center">
-        <VIcon icon="mdi-calculator" />
-        Pricing Calculator
-      </VCardTitle>
+      <v-card color="primary" class="d-flex justify-center items-center pa-3 text-center">
+        <v-icon size="30" class="pr-3">mdi-calculator</v-icon>
+        <v-card-title class="pa-0">Pricing Calculator</v-card-title>
+      </v-card>
       <VCardText>
         <VContainer fluid>
           <VAlert type="info" class="mb-10">
diff --git a/packages/playground/src/components/view_layout.vue b/packages/playground/src/components/view_layout.vue
index 56907d370d..f94ba6928b 100644
--- a/packages/playground/src/components/view_layout.vue
+++ b/packages/playground/src/components/view_layout.vue
@@ -1,11 +1,10 @@
 <template>
   <div
-    class="border px-4 pb-4 rounded position-relative mt-10"
-    :class="{ 'pt-10': hasInfo, 'pt-6': !hasInfo }"
+    class="border px-4 pb-4 rounded position-relative"
+    :class="{ 'pt-8 mt-5': hasInfo, 'pt-3 mt-1': !hasInfo }"
     ref="viewLayoutContainer"
   >
     <div
-      class="mb-6"
       :style="{ opacity: $vuetify.theme.name === 'dark' ? 'var(--v-medium-emphasis-opacity)' : '' }"
       v-if="$slots.description"
     />
diff --git a/packages/playground/src/views/minting_view.vue b/packages/playground/src/views/minting_view.vue
index 2600404047..666076f9e6 100644
--- a/packages/playground/src/views/minting_view.vue
+++ b/packages/playground/src/views/minting_view.vue
@@ -1,6 +1,10 @@
 <template>
   <view-layout>
-    <h2 class="mb-4 text-capitalize">Grid Minting Explorer</h2>
+    <v-card color="primary" class="d-flex justify-center items-center my-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
+      <v-card-title class="pa-0">TF Minting Reports</v-card-title>
+    </v-card>
+    <!-- <h3 class="mb-4 text-capitalize">Grid Minting Explorer</h3> -->
     <v-alert variant="tonal" type="warning" class="mb-4 pa-2">
       <p>All data subject to change</p>
     </v-alert>
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index a11b1295f2..02d9ca92b8 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -1,5 +1,9 @@
 <template>
   <view-layout>
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center mb-4">
+      <v-icon size="30" class="pr-3">mdi-lightbulb-on-outline</v-icon>
+      <v-card-title class="pa-0">Applications</v-card-title>
+    </v-card>
     <v-text-field label="Search Applications" v-model="searchItem" class="mb-5" clearable></v-text-field>
     <v-row>
       <v-col sm="12" md="6" lg="4" v-for="card in filteredCards" :key="card.title">
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index a60cce9865..916a448ce0 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -1,5 +1,9 @@
 <template>
   <view-layout>
+    <v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-television</v-icon>
+      <v-card-title class="pa-0">Virtual Machines</v-card-title>
+    </v-card>
     <v-row>
       <v-col v-for="card in cards" :key="card.title">
         <router-link :to="card.route">
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index bc84bc93b1..4636975b57 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -9,9 +9,12 @@
   </v-alert>
 
   <!-- Contracts List Card -->
+  <v-card color="primary" class="d-flex justify-center items-center my-3 pa-3 text-center">
+    <v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
+    <v-card-title class="pa-0">Contracts List</v-card-title>
+  </v-card>
   <v-card variant="text" class="mb-4">
     <section class="d-flex align-center">
-      <v-card-title class="font-weight-bold d-flex align-center title ma-0 pa-0"> Contracts List </v-card-title>
       <v-spacer />
       <v-btn
         v-if="lockedContracts?.totalAmountLocked && !isLoading"

From 5861fe6eba24903d89cd59acf50f5acbce618916 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 23 Jun 2024 15:07:45 +0300
Subject: [PATCH 2/5] header added

---
 .../src/calculator/pricing_calculator.vue     |   2 +-
 .../playground/src/dashboard/bridge_view.vue  |   2 +-
 .../playground/src/dashboard/dao_view.vue     |   2 +-
 .../src/dashboard/simulator_view.vue          |   2 +-
 .../src/dashboard/transfer_view.vue           |   2 +-
 .../playground/src/dashboard/twin_view.vue    |   2 +-
 packages/playground/src/views/farms.vue       |   4 +
 .../playground/src/views/minting_view.vue     |   7 +-
 packages/playground/src/views/nodes.vue       |  13 +-
 .../src/views/orchestrators_view.vue          |   4 +
 .../playground/src/views/solutions_view.vue   |   2 +-
 packages/playground/src/views/sshkey_view.vue | 196 +++++++++---------
 .../src/weblets/tf_contracts_list.vue         |   6 +-
 13 files changed, 132 insertions(+), 112 deletions(-)

diff --git a/packages/playground/src/calculator/pricing_calculator.vue b/packages/playground/src/calculator/pricing_calculator.vue
index 0412167c8a..85556fefb0 100644
--- a/packages/playground/src/calculator/pricing_calculator.vue
+++ b/packages/playground/src/calculator/pricing_calculator.vue
@@ -2,7 +2,7 @@
   <ViewLayout>
     <VCard>
       <v-card color="primary" class="d-flex justify-center items-center pa-3 text-center">
-        <v-icon size="30" class="pr-3">mdi-calculator</v-icon>
+        <v-icon size="30" class="pr-3">mdi-currency-usd</v-icon>
         <v-card-title class="pa-0">Pricing Calculator</v-card-title>
       </v-card>
       <VCardText>
diff --git a/packages/playground/src/dashboard/bridge_view.vue b/packages/playground/src/dashboard/bridge_view.vue
index 04d2d83f67..ac095a58d5 100644
--- a/packages/playground/src/dashboard/bridge_view.vue
+++ b/packages/playground/src/dashboard/bridge_view.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border px-4 pb-4 rounded position-relative mt-2">
+  <div class="border px-4 pb-4 rounded position-relative">
     <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-swap-horizontal</v-icon>
       <v-card-title class="pa-0">Transfer TFT Across Chains</v-card-title>
diff --git a/packages/playground/src/dashboard/dao_view.vue b/packages/playground/src/dashboard/dao_view.vue
index 1813d778b7..b05e527d9f 100644
--- a/packages/playground/src/dashboard/dao_view.vue
+++ b/packages/playground/src/dashboard/dao_view.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border px-4 pb-4 rounded position-relative mt-2">
+  <div class="border px-4 pb-4 rounded position-relative">
     <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-note-check-outline</v-icon>
       <v-card-title class="pa-0">DAO</v-card-title>
diff --git a/packages/playground/src/dashboard/simulator_view.vue b/packages/playground/src/dashboard/simulator_view.vue
index a9b84f581f..88f5bc40d2 100644
--- a/packages/playground/src/dashboard/simulator_view.vue
+++ b/packages/playground/src/dashboard/simulator_view.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border px-4 pb-4 rounded position-relative mt-2">
+  <div class="border px-4 pb-4 rounded position-relative">
     <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-chart-line</v-icon>
       <v-card-title class="pa-0">Farming Calculator</v-card-title>
diff --git a/packages/playground/src/dashboard/transfer_view.vue b/packages/playground/src/dashboard/transfer_view.vue
index b59c7e4db8..8049d8432d 100644
--- a/packages/playground/src/dashboard/transfer_view.vue
+++ b/packages/playground/src/dashboard/transfer_view.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border px-4 pb-4 rounded position-relative mt-2">
+  <div class="border px-4 pb-4 rounded position-relative">
     <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-account-arrow-right-outline</v-icon>
       <v-card-title class="pa-0">Transfer TFTs on the TFChain</v-card-title>
diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
index c8be5b4807..8f7337e51e 100644
--- a/packages/playground/src/dashboard/twin_view.vue
+++ b/packages/playground/src/dashboard/twin_view.vue
@@ -25,7 +25,7 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <div class="border px-4 pb-4 rounded position-relative mt-2">
+    <div class="border px-4 pb-4 rounded position-relative">
       <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
         <v-icon size="30" class="pr-3">mdi-account-supervisor-outline</v-icon>
         <v-card-title class="pa-0">Twin Details</v-card-title>
diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index 99c03364e6..0d9a41bd72 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -1,5 +1,9 @@
 <template>
   <view-layout>
+    <v-card color="primary" class="d-flex justify-center items-center pa-3 mb-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-lan-connect</v-icon>
+      <v-card-title class="pa-0">Farm Finder</v-card-title>
+    </v-card>
     <TfFiltersLayout>
       <template #filters>
         <TfFiltersContainer @apply="loadFarms(true)" class="mb-4" :loading="loading">
diff --git a/packages/playground/src/views/minting_view.vue b/packages/playground/src/views/minting_view.vue
index 666076f9e6..e9fed29312 100644
--- a/packages/playground/src/views/minting_view.vue
+++ b/packages/playground/src/views/minting_view.vue
@@ -1,13 +1,10 @@
 <template>
   <view-layout>
-    <v-card color="primary" class="d-flex justify-center items-center my-3 pa-3 text-center">
+    <v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
       <v-card-title class="pa-0">TF Minting Reports</v-card-title>
     </v-card>
-    <!-- <h3 class="mb-4 text-capitalize">Grid Minting Explorer</h3> -->
-    <v-alert variant="tonal" type="warning" class="mb-4 pa-2">
-      <p>All data subject to change</p>
-    </v-alert>
+    <v-alert variant="tonal" type="warning" class="mb-4"> All data subject to change </v-alert>
     <v-form class="d-inline-flex w-100">
       <FormValidator v-model="isValidForm">
         <InputValidator
diff --git a/packages/playground/src/views/nodes.vue b/packages/playground/src/views/nodes.vue
index a8a3662685..103fe37b5e 100644
--- a/packages/playground/src/views/nodes.vue
+++ b/packages/playground/src/views/nodes.vue
@@ -1,11 +1,20 @@
 <template>
-  <div class="hint">
+  <!-- <div class="hint">
     <v-alert class="mb-4" type="info" variant="tonal">
       Node status is updated every 90 minutes. For a realtime status, click on the node's card.
     </v-alert>
-  </div>
+  </div> -->
 
   <view-layout>
+    <v-card color="primary" class="d-flex justify-center items-center pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-access-point</v-icon>
+      <v-card-title class="pa-0">Node Finder</v-card-title>
+    </v-card>
+    <div class="hint mt-3">
+      <v-alert class="mb-4" type="info" variant="tonal">
+        Node status is updated every 90 minutes. For a realtime status, click on the node's card.
+      </v-alert>
+    </div>
     <TfFiltersLayout>
       <template #filters>
         <TfFiltersContainer class="mb-4" @apply="loadNodes(true)" :loading="loading">
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index f62e96691a..525bda1f88 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -1,5 +1,9 @@
 <template>
   <view-layout>
+    <v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-group</v-icon>
+      <v-card-title class="pa-0">Orchestrators</v-card-title>
+    </v-card>
     <v-row>
       <v-col v-for="card in cards" :key="card.title">
         <router-link :to="card.route">
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 02d9ca92b8..fa6b72ddcd 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -1,6 +1,6 @@
 <template>
   <view-layout>
-    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center mb-4">
+    <v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-lightbulb-on-outline</v-icon>
       <v-card-title class="pa-0">Applications</v-card-title>
     </v-card>
diff --git a/packages/playground/src/views/sshkey_view.vue b/packages/playground/src/views/sshkey_view.vue
index a8b9fd7f4f..95d73c597e 100644
--- a/packages/playground/src/views/sshkey_view.vue
+++ b/packages/playground/src/views/sshkey_view.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-card class="pa-6 mb-4">
+  <view-layout>
+    <v-card color="primary" class="d-flex justify-center items-center pa-3 mb-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-key-plus</v-icon>
+      <v-card-title class="pa-0">SSH keys</v-card-title>
+    </v-card>
+    <!-- <v-card class="pa-6 mb-4">
     <div>
       <h3 class="text-light">
         <v-icon> mdi-cog-sync </v-icon>
@@ -10,100 +15,101 @@
         machines. Simplify key distribution and effectively manage access to nodes.
       </p>
     </div>
-  </v-card>
-
-  <v-alert type="info"> Multiple keys support is coming up soon </v-alert>
-
-  <v-card class="mb-3 pa-3" color="transparent">
-    <v-col class="d-flex justify-end">
-      <v-btn
-        class="mr-2"
-        @click="() => openDialog(SSHCreationMethod.Import)"
-        prepend-icon="mdi-key-plus"
-        color="secondary"
-        :disabled="loading || deleting || generatingSSH || savingKey || activating"
-      >
-        Import
-      </v-btn>
-
-      <v-btn
-        @click="exportAllKeys"
-        class="mr-2"
-        prepend-icon="mdi-export"
-        color="secondary"
-        :disabled="
-          !allKeys ||
-          allKeys.length === 0 ||
-          loading ||
-          deleting ||
-          generatingSSH ||
-          savingKey ||
-          isExporting ||
-          activating
-        "
-        :loading="isExporting"
-      >
-        Export all
-      </v-btn>
-
-      <v-btn
-        class="mr-2"
-        variant="elevated"
-        :disabled="loading || deleting || generatingSSH || savingKey || activating"
-        @click="openDialog(SSHCreationMethod.Generate)"
-        prepend-icon="mdi-key-plus"
-      >
-        Generate
-      </v-btn>
-    </v-col>
-  </v-card>
-
-  <ssh-table
-    @delete="deleteKey"
-    @view="viewSelectedKey"
-    @export="exportSelectedKeys"
-    @update:activation="updateActivation"
-    :ssh-keys="allKeys"
-    :loading="loading"
-    :loading-message="tableLoadingMessage"
-    :deleting="deleting"
-  />
-
-  <!-- Dialogs -->
-  <!-- Generate -->
-  <ssh-form-dialog
-    v-if="dialogType === SSHCreationMethod.Generate"
-    :open="dialogType === SSHCreationMethod.Generate"
-    :all-keys="allKeys"
-    :dialog-type="dialogType"
-    :generating="generatingSSH"
-    :saving-key="savingKey"
-    @save="addKey($event)"
-    @close="closeDialog"
-    @generate="generateSSHKeys($event)"
-  />
-
-  <!-- Import -->
-  <ssh-form-dialog
-    v-if="dialogType === SSHCreationMethod.Import"
-    :open="dialogType === SSHCreationMethod.Import"
-    :all-keys="allKeys"
-    :dialog-type="dialogType"
-    :generating="generatingSSH"
-    :saving-key="savingKey"
-    @save="addKey($event)"
-    @close="closeDialog"
-    @generate="generateSSHKeys($event)"
-  />
-
-  <!-- View -->
-  <ssh-data-dialog
-    :open="isViewKey"
-    :all-keys="allKeys"
-    :selected-key="selectedKey"
-    @close="isViewKey = false"
-    @update="updateKeys"
-  />
+  </v-card> -->
+
+    <v-alert type="info"> Multiple keys support is coming up soon </v-alert>
+
+    <v-card class="mt-3 mb-1" color="transparent">
+      <v-col class="px-0 d-flex justify-end">
+        <v-btn
+          class="mr-2"
+          @click="() => openDialog(SSHCreationMethod.Import)"
+          prepend-icon="mdi-key-plus"
+          color="secondary"
+          :disabled="loading || deleting || generatingSSH || savingKey || activating"
+        >
+          Import
+        </v-btn>
+
+        <v-btn
+          @click="exportAllKeys"
+          class="mr-2"
+          prepend-icon="mdi-export"
+          color="secondary"
+          :disabled="
+            !allKeys ||
+            allKeys.length === 0 ||
+            loading ||
+            deleting ||
+            generatingSSH ||
+            savingKey ||
+            isExporting ||
+            activating
+          "
+          :loading="isExporting"
+        >
+          Export all
+        </v-btn>
+
+        <v-btn
+          class=""
+          variant="elevated"
+          :disabled="loading || deleting || generatingSSH || savingKey || activating"
+          @click="openDialog(SSHCreationMethod.Generate)"
+          prepend-icon="mdi-key-plus"
+        >
+          Generate
+        </v-btn>
+      </v-col>
+    </v-card>
+
+    <ssh-table
+      @delete="deleteKey"
+      @view="viewSelectedKey"
+      @export="exportSelectedKeys"
+      @update:activation="updateActivation"
+      :ssh-keys="allKeys"
+      :loading="loading"
+      :loading-message="tableLoadingMessage"
+      :deleting="deleting"
+    />
+
+    <!-- Dialogs -->
+    <!-- Generate -->
+    <ssh-form-dialog
+      v-if="dialogType === SSHCreationMethod.Generate"
+      :open="dialogType === SSHCreationMethod.Generate"
+      :all-keys="allKeys"
+      :dialog-type="dialogType"
+      :generating="generatingSSH"
+      :saving-key="savingKey"
+      @save="addKey($event)"
+      @close="closeDialog"
+      @generate="generateSSHKeys($event)"
+    />
+
+    <!-- Import -->
+    <ssh-form-dialog
+      v-if="dialogType === SSHCreationMethod.Import"
+      :open="dialogType === SSHCreationMethod.Import"
+      :all-keys="allKeys"
+      :dialog-type="dialogType"
+      :generating="generatingSSH"
+      :saving-key="savingKey"
+      @save="addKey($event)"
+      @close="closeDialog"
+      @generate="generateSSHKeys($event)"
+    />
+
+    <!-- View -->
+    <ssh-data-dialog
+      :open="isViewKey"
+      :all-keys="allKeys"
+      :selected-key="selectedKey"
+      @close="isViewKey = false"
+      @update="updateKeys"
+    />
+  </view-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 4636975b57..284d2a5062 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -9,11 +9,11 @@
   </v-alert>
 
   <!-- Contracts List Card -->
-  <v-card color="primary" class="d-flex justify-center items-center my-3 pa-3 text-center">
+  <v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
     <v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
     <v-card-title class="pa-0">Contracts List</v-card-title>
   </v-card>
-  <v-card variant="text" class="mb-4">
+  <v-card variant="text" class="my-3">
     <section class="d-flex align-center">
       <v-spacer />
       <v-btn
@@ -40,7 +40,7 @@
   </v-card>
 
   <!-- Total Cost Card -->
-  <v-card :loading="totalCost === undefined" variant="tonal" class="mb-3 mt-5 bg-blue-primary-lighten-3">
+  <v-card :loading="totalCost === undefined" variant="tonal" class="mb-3 bg-blue-primary-lighten-3">
     <template #title>
       <v-row>
         <v-col class="d-flex justify-start">

From 2b3f1f5df07866b4a05b28370f0c7a0091cb8f2d Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 23 Jun 2024 15:22:20 +0300
Subject: [PATCH 3/5] header added

---
 .../playground/src/components/view_layout.vue | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/playground/src/components/view_layout.vue b/packages/playground/src/components/view_layout.vue
index f94ba6928b..ebdc78a592 100644
--- a/packages/playground/src/components/view_layout.vue
+++ b/packages/playground/src/components/view_layout.vue
@@ -1,28 +1,10 @@
 <template>
-  <div
-    class="border px-4 pb-4 rounded position-relative"
-    :class="{ 'pt-8 mt-5': hasInfo, 'pt-3 mt-1': !hasInfo }"
-    ref="viewLayoutContainer"
-  >
+  <div class="border px-4 pb-4 rounded position-relative pt-3 mt-1" ref="viewLayoutContainer">
     <div
       :style="{ opacity: $vuetify.theme.name === 'dark' ? 'var(--v-medium-emphasis-opacity)' : '' }"
       v-if="$slots.description"
     />
 
-    <div
-      class="position-absolute pa-1 rounded-circle border"
-      :style="{
-        top: 0,
-        right: '16px',
-        transform: 'translateY(-50%)',
-        zIndex: 99,
-        backgroundColor: 'rgb(var(--v-theme-background))',
-      }"
-      v-if="hasInfo"
-    >
-      <AppInfo />
-    </div>
-
     <template v-if="requireSSH && !ssh">
       <VAlert variant="tonal" type="error" :text="title + ' requires public ssh key.'" class="mb-4" />
       <SshkeyView />
@@ -42,11 +24,9 @@ import { useRoute } from "vue-router";
 import { useProfileManager } from "@/stores";
 import SshkeyView from "@/views/sshkey_view.vue";
 
-import AppInfo from "./app_info.vue";
-
 export default {
   name: "ViewLayout",
-  components: { AppInfo, SshkeyView },
+  components: { SshkeyView },
   setup() {
     const route = useRoute();
     const profileManager = useProfileManager();

From f757dbf03cdfccf6c3373f1dff58ab44e2fb7e2e Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@incubaid.com>
Date: Mon, 24 Jun 2024 09:18:48 +0300
Subject: [PATCH 4/5] update panel size

---
 packages/playground/src/weblets/tf_contracts_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 284d2a5062..5f5ba69110 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -135,7 +135,7 @@
   <!-- Contracts Tables -->
   <v-expansion-panels v-model="panel" multiple>
     <v-expansion-panel class="mb-4" :elevation="3" v-for="(table, idx) of contractsTables" :key="idx">
-      <v-expansion-panel-title color="primary" style="height: 50px !important; min-height: 15px !important">
+      <v-expansion-panel-title color="primary" style="height: 40px !important; min-height: 15px !important">
         <v-icon size="24" class="pr-3">{{ table.icon }}</v-icon>
         <v-card-title class="pa-0 text-subtitle-1">
           <strong>{{ table.title }}</strong>

From 7fa8d9904a5771a7eb230f5c5a77fb70062b531e Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@incubaid.com>
Date: Mon, 24 Jun 2024 10:42:29 +0300
Subject: [PATCH 5/5] remove comment

---
 packages/playground/src/views/nodes.vue       |  6 ------
 packages/playground/src/views/sshkey_view.vue | 13 -------------
 2 files changed, 19 deletions(-)

diff --git a/packages/playground/src/views/nodes.vue b/packages/playground/src/views/nodes.vue
index 103fe37b5e..33d1c48852 100644
--- a/packages/playground/src/views/nodes.vue
+++ b/packages/playground/src/views/nodes.vue
@@ -1,10 +1,4 @@
 <template>
-  <!-- <div class="hint">
-    <v-alert class="mb-4" type="info" variant="tonal">
-      Node status is updated every 90 minutes. For a realtime status, click on the node's card.
-    </v-alert>
-  </div> -->
-
   <view-layout>
     <v-card color="primary" class="d-flex justify-center items-center pa-3 text-center">
       <v-icon size="30" class="pr-3">mdi-access-point</v-icon>
diff --git a/packages/playground/src/views/sshkey_view.vue b/packages/playground/src/views/sshkey_view.vue
index 95d73c597e..eec31f44fa 100644
--- a/packages/playground/src/views/sshkey_view.vue
+++ b/packages/playground/src/views/sshkey_view.vue
@@ -4,19 +4,6 @@
       <v-icon size="30" class="pr-3">mdi-key-plus</v-icon>
       <v-card-title class="pa-0">SSH keys</v-card-title>
     </v-card>
-    <!-- <v-card class="pa-6 mb-4">
-    <div>
-      <h3 class="text-light">
-        <v-icon> mdi-cog-sync </v-icon>
-        Manage SSH Keys
-      </h3>
-      <p class="mt-2">
-        Manage SSH keys easily, switch between them, and activate or deactivate keys as needed for accessing deployed
-        machines. Simplify key distribution and effectively manage access to nodes.
-      </p>
-    </div>
-  </v-card> -->
-
     <v-alert type="info"> Multiple keys support is coming up soon </v-alert>
 
     <v-card class="mt-3 mb-1" color="transparent">