Make title card at all pages to be consistent

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-currency-usd</v-icon>
+        <v-card-title class="pa-0">Pricing Calculator</v-card-title>
+      </v-card>
       <VCardText>
         <VContainer fluid>
           <VAlert type="info" class="mb-10">

packages/playground/src/components/view_layout.vue

@@ -1,29 +1,10 @@
 <template>
-  <div
-    class="border px-4 pb-4 rounded position-relative mt-10"
-    :class="{ 'pt-10': hasInfo, 'pt-6': !hasInfo }"
-    ref="viewLayoutContainer"
-  >
+  <div class="border px-4 pb-4 rounded position-relative pt-3 mt-1" ref="viewLayoutContainer">
     <div
-      class="mb-6"
       :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 />
@@ -43,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();

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>

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>

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>

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>

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>

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">

packages/playground/src/views/minting_view.vue

@@ -1,9 +1,10 @@
 <template>
   <view-layout>
-    <h2 class="mb-4 text-capitalize">Grid Minting Explorer</h2>
-    <v-alert variant="tonal" type="warning" class="mb-4 pa-2">
-      <p>All data subject to change</p>
-    </v-alert>
+    <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>
+    <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

packages/playground/src/views/nodes.vue

@@ -1,11 +1,14 @@
 <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>
+      <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">

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">

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 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>
     <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">

packages/playground/src/views/sshkey_view.vue

@@ -1,109 +1,102 @@
 <template>
-  <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="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"
-  />
+  <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-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>

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">