From eeb3feb6efac38c2c5e8ae2e61d08da65eeeaeb3 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 14:32:32 +0300
Subject: [PATCH 01/10] change deploy btn size

---
 packages/playground/src/weblets/full_vm.vue       |  4 +++-
 packages/playground/src/weblets/micro_vm.vue      | 10 +++++++++-
 packages/playground/src/weblets/tf_algorand.vue   |  2 +-
 packages/playground/src/weblets/tf_caprover.vue   |  2 +-
 packages/playground/src/weblets/tf_casperlabs.vue |  2 +-
 packages/playground/src/weblets/tf_discourse.vue  |  2 +-
 packages/playground/src/weblets/tf_funkwhale.vue  |  2 +-
 packages/playground/src/weblets/tf_kubernetes.vue |  2 +-
 packages/playground/src/weblets/tf_mattermost.vue |  2 +-
 packages/playground/src/weblets/tf_node_pilot.vue |  2 +-
 packages/playground/src/weblets/tf_owncloud.vue   |  2 +-
 packages/playground/src/weblets/tf_peertube.vue   |  2 +-
 packages/playground/src/weblets/tf_presearch.vue  |  4 +++-
 packages/playground/src/weblets/tf_subsquid.vue   |  2 +-
 packages/playground/src/weblets/tf_taiga.vue      |  2 +-
 packages/playground/src/weblets/tf_umbrel.vue     |  2 +-
 packages/playground/src/weblets/tf_wordpress.vue  |  2 +-
 17 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index cd31d787ec..3de0571561 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -131,7 +131,9 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid || networkError"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid || networkError">
+        Deploy
+      </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index d4bdfc76b7..af218e7d72 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -153,7 +153,15 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" :disabled="tabs?.invalid || networkError" @click="deploy">Deploy</v-btn>
+      <v-btn
+        class="mr-1"
+        color="primary"
+        variant="tonal"
+        width="90.75px"
+        :disabled="tabs?.invalid || networkError"
+        @click="deploy"
+        >Deploy</v-btn
+      >
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index dc5d6ff3db..9ff1d7eb97 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -140,7 +140,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 7b309bfa4e..1bd51d013f 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -93,7 +93,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 491188663a..688f8ce8e5 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -50,7 +50,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index eaae41e84a..2aeeb194b3 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -77,7 +77,7 @@
       </template>
     </d-tabs>
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 32b1c3a877..7035c15bb2 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -93,7 +93,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index eebe5e1a4d..6695023519 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -72,7 +72,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn variant="tonal" color="primary" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn variant="tonal" color="primary" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index b76e3d1b6b..a15c7d0dc4 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -60,7 +60,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 3ae4130a76..2407c75277 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -63,7 +63,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index a9a840aae1..832e74af10 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -93,7 +93,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 18490fb00e..2d3e47ca7d 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -69,7 +69,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 2874a83842..71b6ee83a2 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -77,7 +77,9 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" :disabled="tabs?.invalid || networkError" @click="deploy"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" :disabled="tabs?.invalid || networkError" @click="deploy">
+        Deploy
+      </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 2b1f84ee2e..6d6a753c72 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -63,7 +63,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 82eefea8d2..5972ae0a1e 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -103,7 +103,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 9a403a78bd..6ece3a038e 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -81,7 +81,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index e7df1c526f..cb40fd8555 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -94,7 +94,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>

From 01e45504805d26b0f904809390423c96a2f4c119 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 14:43:12 +0300
Subject: [PATCH 02/10] add disks page  description

---
 packages/playground/src/weblets/full_vm.vue  | 1 +
 packages/playground/src/weblets/micro_vm.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 3de0571561..b7078cce1c 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -99,6 +99,7 @@
       </template>
 
       <template #disks>
+        <div class="text-subtitle-1 text-medium-emphasis">Add disks to your deployment</div>
         <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index af218e7d72..ad1055ff20 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -119,6 +119,7 @@
       </template>
 
       <template #disks>
+        <div class="text-subtitle-1 text-medium-emphasis">Add disks to your deployment</div>
         <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator

From 486059a4b0a4c962e22955c57ab555660061ab5e Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 15:50:24 +0300
Subject: [PATCH 03/10] Revert "rephrase picking node logs (#543)"

This reverts commit 0faca505f08cf5782cdaca845654085841392a0c.
---
 packages/playground/src/utils/deploy_vm.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/utils/deploy_vm.ts b/packages/playground/src/utils/deploy_vm.ts
index a32cc76be9..afaaf9541e 100644
--- a/packages/playground/src/utils/deploy_vm.ts
+++ b/packages/playground/src/utils/deploy_vm.ts
@@ -17,7 +17,7 @@ import { getWireguardConfig } from "./load_deployment";
 import { NodePicker } from "./node_picker";
 
 export async function deployVM(grid: GridClient, options: DeployVMOptions) {
-  events.emit("logs", "Finding a suitable node to deploy on.");
+  events.emit("logs", "Picking nodes to deploy.");
   const nodePicker = new NodePicker();
   const vms = new MachinesModel();
   vms.name = options.name;

From 4aaff75d4d40bfad3427896bdccf83151c72396c Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 15:52:17 +0300
Subject: [PATCH 04/10] Revert "change deploy btn size"

This reverts commit eeb3feb6efac38c2c5e8ae2e61d08da65eeeaeb3.
---
 packages/playground/src/weblets/full_vm.vue       |  4 +---
 packages/playground/src/weblets/micro_vm.vue      | 10 +---------
 packages/playground/src/weblets/tf_algorand.vue   |  2 +-
 packages/playground/src/weblets/tf_caprover.vue   |  2 +-
 packages/playground/src/weblets/tf_casperlabs.vue |  2 +-
 packages/playground/src/weblets/tf_discourse.vue  |  2 +-
 packages/playground/src/weblets/tf_funkwhale.vue  |  2 +-
 packages/playground/src/weblets/tf_kubernetes.vue |  2 +-
 packages/playground/src/weblets/tf_mattermost.vue |  2 +-
 packages/playground/src/weblets/tf_node_pilot.vue |  2 +-
 packages/playground/src/weblets/tf_owncloud.vue   |  2 +-
 packages/playground/src/weblets/tf_peertube.vue   |  2 +-
 packages/playground/src/weblets/tf_presearch.vue  |  4 +---
 packages/playground/src/weblets/tf_subsquid.vue   |  2 +-
 packages/playground/src/weblets/tf_taiga.vue      |  2 +-
 packages/playground/src/weblets/tf_umbrel.vue     |  2 +-
 packages/playground/src/weblets/tf_wordpress.vue  |  2 +-
 17 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index b7078cce1c..c8b18aeb0b 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -132,9 +132,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid || networkError">
-        Deploy
-      </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid || networkError"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index ad1055ff20..45b34af9f1 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -154,15 +154,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn
-        class="mr-1"
-        color="primary"
-        variant="tonal"
-        width="90.75px"
-        :disabled="tabs?.invalid || networkError"
-        @click="deploy"
-        >Deploy</v-btn
-      >
+      <v-btn color="primary" variant="tonal" :disabled="tabs?.invalid || networkError" @click="deploy">Deploy</v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 9ff1d7eb97..dc5d6ff3db 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -140,7 +140,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 1bd51d013f..7b309bfa4e 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -93,7 +93,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 688f8ce8e5..491188663a 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -50,7 +50,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 2aeeb194b3..eaae41e84a 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -77,7 +77,7 @@
       </template>
     </d-tabs>
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 7035c15bb2..32b1c3a877 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -93,7 +93,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index 6695023519..eebe5e1a4d 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -72,7 +72,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn variant="tonal" color="primary" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn variant="tonal" color="primary" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index a15c7d0dc4..b76e3d1b6b 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -60,7 +60,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 2407c75277..3ae4130a76 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -63,7 +63,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 832e74af10..a9a840aae1 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -93,7 +93,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 2d3e47ca7d..18490fb00e 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -69,7 +69,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 71b6ee83a2..2874a83842 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -77,9 +77,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" :disabled="tabs?.invalid || networkError" @click="deploy">
-        Deploy
-      </v-btn>
+      <v-btn color="primary" variant="tonal" :disabled="tabs?.invalid || networkError" @click="deploy"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 6d6a753c72..2b1f84ee2e 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -63,7 +63,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 5972ae0a1e..82eefea8d2 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -103,7 +103,7 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 6ece3a038e..9a403a78bd 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -81,7 +81,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index cb40fd8555..e7df1c526f 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -94,7 +94,7 @@
     </form-validator>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" width="90.75px" @click="deploy" :disabled="!valid"> Deploy </v-btn>
+      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="!valid"> Deploy </v-btn>
     </template>
   </weblet-layout>
 </template>

From da3bbe633382798a4d640698c0d1d76b29f5fa9a Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 15:53:38 +0300
Subject: [PATCH 05/10] Revert "Revert "rephrase picking node logs (#543)""

This reverts commit 486059a4b0a4c962e22955c57ab555660061ab5e.
---
 packages/playground/src/utils/deploy_vm.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/utils/deploy_vm.ts b/packages/playground/src/utils/deploy_vm.ts
index afaaf9541e..a32cc76be9 100644
--- a/packages/playground/src/utils/deploy_vm.ts
+++ b/packages/playground/src/utils/deploy_vm.ts
@@ -17,7 +17,7 @@ import { getWireguardConfig } from "./load_deployment";
 import { NodePicker } from "./node_picker";
 
 export async function deployVM(grid: GridClient, options: DeployVMOptions) {
-  events.emit("logs", "Picking nodes to deploy.");
+  events.emit("logs", "Finding a suitable node to deploy on.");
   const nodePicker = new NodePicker();
   const vms = new MachinesModel();
   vms.name = options.name;

From 2929662a53e7b5d3d6a5409b194ec969b1deded4 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 16:01:07 +0300
Subject: [PATCH 06/10] Revert "add disks page  description"

This reverts commit 01e45504805d26b0f904809390423c96a2f4c119.
---
 packages/playground/src/weblets/full_vm.vue  | 1 -
 packages/playground/src/weblets/micro_vm.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index c8b18aeb0b..cd31d787ec 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -99,7 +99,6 @@
       </template>
 
       <template #disks>
-        <div class="text-subtitle-1 text-medium-emphasis">Add disks to your deployment</div>
         <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 45b34af9f1..d4bdfc76b7 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -119,7 +119,6 @@
       </template>
 
       <template #disks>
-        <div class="text-subtitle-1 text-medium-emphasis">Add disks to your deployment</div>
         <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator

From 5832a5ec4f1528d4047b9dda8ff7b63e29bb8770 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 16:42:07 +0300
Subject: [PATCH 07/10] change expandable ui

---
 .../src/components/expandable_layout.vue      | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
index 0ef6567e07..25371f63e6 100644
--- a/packages/playground/src/components/expandable_layout.vue
+++ b/packages/playground/src/components/expandable_layout.vue
@@ -1,9 +1,15 @@
 <template>
   <section>
-    <div class="d-flex mb-6">
+    <div class="d-flex my-6">
+      <h4 class="font-weight-bold" v-if="title">{{ title }}</h4>
       <v-spacer />
-      <v-btn prepend-icon="mdi-plus" color="primary" @click="$emit('add')"> add </v-btn>
+      <v-tooltip text="Add">
+        <template #activator="{ props }">
+          <v-btn icon="mdi-plus" variant="tonal" color="primary" @click="$emit('add')" v-bind="props" />
+        </template>
+      </v-tooltip>
     </div>
+    <v-divider :class="{ 'mb-2': true, 'mt-2': true }" />
     <div v-for="(item, index) in modelValue" :key="item">
       <div class="d-flex">
         <div class="flex-grow-1 mr-4">
@@ -11,7 +17,17 @@
         </div>
         <div class="d-flex">
           <v-spacer />
-          <v-btn color="error" icon="mdi-delete-outline" @click="remove(index)" v-if="!required.includes(index)" />
+          <v-tooltip text="Remove">
+            <template #activator="{ props }">
+              <v-btn
+                color="error"
+                icon="mdi-delete-outline"
+                @click="remove(index)"
+                v-if="!required.includes(index)"
+                v-bind="props"
+              />
+            </template>
+          </v-tooltip>
         </div>
       </div>
       <v-divider class="mb-4" v-if="index + 1 < modelValue.length" />
@@ -31,6 +47,7 @@ const props = defineProps({
     type: Array as PropType<number[]>,
     default: () => [],
   },
+  title: String,
 });
 const emits = defineEmits<{
   (event: "update:modelValue", value: any[]): void;

From 27d67358c6faea87f54749638df80f071663174c Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 16:47:41 +0300
Subject: [PATCH 08/10] add title to disks page

---
 packages/playground/src/weblets/full_vm.vue  | 2 +-
 packages/playground/src/weblets/micro_vm.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index cd31d787ec..93d9daf49a 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -99,7 +99,7 @@
       </template>
 
       <template #disks>
-        <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
+        <ExpandableLayout v-model="disks" @add="addDisk" title="Add disks to your deployment" #="{ index }">
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
             :value="disks[index].name"
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index d4bdfc76b7..25a07ccc56 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -119,7 +119,7 @@
       </template>
 
       <template #disks>
-        <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
+        <ExpandableLayout v-model="disks" @add="addDisk" title="Add disks to your deployment" #="{ index }">
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
             :value="disks[index].name"

From 0512f0f631fde2d535010c66fb821e88f171a8e1 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 12 Jun 2023 16:52:18 +0300
Subject: [PATCH 09/10] change spaces

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

diff --git a/packages/playground/src/components/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
index 25371f63e6..5265c4763c 100644
--- a/packages/playground/src/components/expandable_layout.vue
+++ b/packages/playground/src/components/expandable_layout.vue
@@ -9,7 +9,7 @@
         </template>
       </v-tooltip>
     </div>
-    <v-divider :class="{ 'mb-2': true, 'mt-2': true }" />
+    <v-divider class="my-2" />
     <div v-for="(item, index) in modelValue" :key="item">
       <div class="d-flex">
         <div class="flex-grow-1 mr-4">

From 642886d47df1de40a648147f5afc96b32dd084ad Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 14 Jun 2023 15:17:24 +0300
Subject: [PATCH 10/10] change description layout

---
 packages/playground/src/components/expandable_layout.vue | 2 +-
 packages/playground/src/weblets/full_vm.vue              | 7 ++++++-
 packages/playground/src/weblets/micro_vm.vue             | 7 ++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
index 5265c4763c..a656fdae08 100644
--- a/packages/playground/src/components/expandable_layout.vue
+++ b/packages/playground/src/components/expandable_layout.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
     <div class="d-flex my-6">
-      <h4 class="font-weight-bold" v-if="title">{{ title }}</h4>
+      <v-card-subtitle class="text-subtitle-1 mt-3" v-if="title">{{ title }}</v-card-subtitle>
       <v-spacer />
       <v-tooltip text="Add">
         <template #activator="{ props }">
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 93d9daf49a..16ace3b6fa 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -99,7 +99,12 @@
       </template>
 
       <template #disks>
-        <ExpandableLayout v-model="disks" @add="addDisk" title="Add disks to your deployment" #="{ index }">
+        <ExpandableLayout
+          v-model="disks"
+          @add="addDisk"
+          title="Add additional disk space to your full virtual machine"
+          #="{ index }"
+        >
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
             :value="disks[index].name"
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 25a07ccc56..8f51979b2c 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -119,7 +119,12 @@
       </template>
 
       <template #disks>
-        <ExpandableLayout v-model="disks" @add="addDisk" title="Add disks to your deployment" #="{ index }">
+        <ExpandableLayout
+          v-model="disks"
+          @add="addDisk"
+          title="Add additional disk space to your micro virtual machine"
+          #="{ index }"
+        >
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
             :value="disks[index].name"