update title card

threefoldtech · Jun 20, 2024 · 83d2a97 · 83d2a97
1 parent cf5fbac
commit 83d2a97
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"