Add and apply default vuetify values to the components

threefoldtech · Jun 4, 2024 · 8fb5548 · 8fb5548
1 parent c30c991
commit 8fb5548
Show file tree

Hide file tree

Showing 30 changed files with 204 additions and 278 deletions.
diff --git a/packages/playground/src/components/app_info.vue b/packages/playground/src/components/app_info.vue
@@ -24,7 +24,7 @@
 
       <v-divider class="mb-2" />
       <v-card-actions class="d-flex justify-end">
-        <v-btn color="anchor" @click="setOpenInfo(false)">Close</v-btn>
+        <v-btn color="anchor" class="mr-2 my-1" @click="setOpenInfo(false)">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -163,7 +163,6 @@
         >
 
         <v-card-actions>
-          <v-spacer></v-spacer>
           <v-btn color="anchor" class="mr-2 px-3" @click="contractStateDialog = false"> Close </v-btn>
           <v-tooltip
             :text="
@@ -195,7 +194,7 @@
 
   <v-dialog width="800" v-model="deletingDialog">
     <v-card>
-      <v-card-title class="text-h5 mt-2"> Delete the following contracts? </v-card-title>
+      <v-card-title class="bg-primary"> Delete the following contracts? </v-card-title>
       <v-alert class="ma-4" type="warning" variant="tonal"
         >It is advisable to remove the contract from its solution page, especially when multiple contracts may be linked
         to the same instance.</v-alert
@@ -206,9 +205,9 @@
         <v-chip class="ma-1" label v-for="c in selectedContracts" :key="c.contract_id">
           {{ c.contract_id }}
         </v-chip>
+        <v-divider class="mt-3" />
       </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
+      <v-card-actions class="justify-end mb-1 mr-2">
         <v-btn color="anchor" @click="deletingDialog = false"> Cancel </v-btn>
         <v-btn color="error" @click="onDelete"> Delete </v-btn>
       </v-card-actions>
@@ -244,7 +243,6 @@
           {{ c.contract_id }}
         </v-chip>
         <v-card-actions>
-          <v-spacer></v-spacer>
           <v-btn color="anchor" @click="unlockDialog = false"> Cancel </v-btn>
           <v-tooltip
             :text="

diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
@@ -111,8 +111,7 @@
           </pre>
           </template>
         </v-card-text>
-        <v-card-actions class="my-1">
-          <v-spacer />
+        <v-card-actions class="justify-end my-1 mr-2">
           <v-btn color="anchor" @click="$emit('close')">Close</v-btn>
           <v-btn color="secondary" @click="copy">Copy</v-btn>
         </v-card-actions>

diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
@@ -62,14 +62,14 @@
                   </div>
                 </div>
               </v-col>
-              <v-divider horizontal></v-divider>
             </v-row>
           </v-container>
-          <v-card-actions class="justify-end">
-            <v-btn color="anchor" class="mr-2 px-3" @click="closeDialog"> Close </v-btn>
-            <v-btn color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
-          </v-card-actions>
+          <v-divider />
         </v-card-text>
+        <v-card-actions class="justify-end my-1 mr-2">
+          <v-btn color="anchor" @click="closeDialog"> Close </v-btn>
+          <v-btn color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
+        </v-card-actions>
       </v-card>
     </v-dialog>
   </v-container>

diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
@@ -1,21 +1,12 @@
 <template>
   <v-tooltip location="bottom" close-delay="1000" color="primary">
     <template #activator="{ props }">
-      <v-btn
-        id="tftBtn"
-        variant="elevated"
-        @click="addTFT"
-        class="px-lg-6 px-md-2 px-sm-0 mx-sm-0"
-        :loading="loadingAddTFT"
-        v-bind="props"
-      >
-        GET TFT
-      </v-btn>
+      <v-btn id="tftBtn" variant="elevated" @click="addTFT" :loading="loadingAddTFT" v-bind="props"> GET TFT </v-btn>
     </template>
     <div>
       Get TFT on Stellar using BTC or Credit card, then you can bridge it to your tfchain account using the Bridge in
       the dashboard section.
-      <v-btn icon color="anchor" small @click.stop :href="manual.buy_sell_tft" target="_blank"
+      <v-btn icon small @click.stop :href="manual.buy_sell_tft" target="_blank"
         ><v-icon>mdi-information-outline</v-icon></v-btn
       >
     </div>
@@ -69,7 +60,7 @@ export default {
 <style>
 #tftBtn {
   display: inline-block;
-  min-width: 10px !important;
+  font-weight: bold;
 }
 
 :root {

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
@@ -49,7 +49,7 @@
               </template>
             </li>
           </v-card-text>
-          <v-card-actions class="justify-end">
+          <v-card-actions class="justify-end my-1 mr-2">
             <v-btn @click="showDialog = false" color="anchor">Close</v-btn>
           </v-card-actions>
         </v-card>

diff --git a/packages/playground/src/components/logger.vue b/packages/playground/src/components/logger.vue
@@ -80,8 +80,7 @@
     <v-card>
       <VCardTitle v-text="'Clear Logs'" />
       <VCardText v-text="'This will delete all of your logs. Be careful this operation is irreversible!'" />
-      <v-card-actions>
-        <v-spacer />
+      <v-card-actions class="justify-end mb-1 mr-2">
         <v-btn color="anchor" @click="clearDialog = false" text="Cancel" />
         <v-btn color="error" @click="clearLogs.run()" text="clear" />
       </v-card-actions>

diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -66,10 +66,9 @@
           </li>
           <li>Click <strong>Join cluster</strong> button.</li>
         </ol>
+        <v-divider />
       </v-card-text>
 
-      <v-divider />
-
       <v-card-actions>
         <v-spacer />
         <v-btn color="anchor" @click="deployedDialog = false">Close</v-btn>

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -187,14 +187,13 @@
       <v-card>
         <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
         <v-card-text class="d-flex flex-wrap">
-          <v-chip label class="mr-1 mb-1" v-for="gw in gatewaysToDelete" :key="gw.name">
+          <v-chip label class="mr-1 mb-5" v-for="gw in gatewaysToDelete" :key="gw.name">
             {{ gw.name }}
           </v-chip>
+          <v-divider />
         </v-card-text>
 
-        <v-divider />
-
-        <v-card-actions class="d-flex justify-end">
+        <v-card-actions class="justify-end mb-1 mr-2">
           <v-btn color="anchor" @click="requestDelete = false">Cancel</v-btn>
           <v-btn
             color="error"

diff --git a/packages/playground/src/components/manage_worker_dialog.vue b/packages/playground/src/components/manage_worker_dialog.vue
@@ -50,7 +50,6 @@
         </v-chip>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
         <v-btn color="anchor" @click="deletingDialog = false"> Cancel </v-btn>
         <v-btn color="error" @click="onDelete"> Remove </v-btn>
       </v-card-actions>

diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -10,19 +10,16 @@
         <v-alert v-if="selectedKeys.length === 0" type="warning" class="mt-2">
           Attention: It appears that no SSH keys have been selected. In order to access your deployment, you must send
           at least one SSH key. You can manage your SSH keys from the
-          <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link> and add more as
-          needed.
+          <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link>
+          and add more as needed.
         </v-alert>
+        <VDivider class="mt-3" />
       </v-card-text>
 
-      <VDivider />
-
-      <v-card-actions>
-        <VSpacer />
+      <v-card-actions class="justify-end mb-1 mr-2">
         <v-btn
           color="secondary"
           @click="openManageDialog = true"
-          class="mr-2 my-1"
           :disabled="sshKeysManagement.list() && sshKeysManagement.list().length === 0"
         >
           Manage SSH keys
@@ -33,53 +30,49 @@
 
   <v-dialog v-model="openManageDialog" max-width="800">
     <v-card>
-      <v-toolbar color="primary" class="custom-toolbar">
-        <p class="mb-5">
-          <v-icon>mdi-cog-sync</v-icon>
-          Manage SSH keys
-        </p>
-      </v-toolbar>
+      <v-card-title class="bg-primary">
+        <v-icon>mdi-cog-sync</v-icon>
+        Manage SSH keys
+      </v-card-title>
 
       <v-card-text>
         <v-alert type="info" class="mb-5">
           The keys you've chosen will be forwarded to your deployment. To make changes, simply tap on the key you wish
           to cancel or add.
         </v-alert>
 
-        <v-row>
-          <v-tooltip
-            v-for="_key of sshKeysManagement.list()"
-            :key="_key.id"
-            :text="isKeySelected(_key) ? 'Selected' : 'Not selected'"
-            location="bottom"
-          >
-            <template #activator="{ props }">
-              <v-chip
-                class="pa-5 ml-5 mt-5"
-                :variant="isKeySelected(_key) ? 'flat' : 'outlined'"
-                :color="
-                  isKeySelected(_key) ? 'primary' : theme.name.value === AppThemeSelection.light ? 'primary' : 'white'
-                "
-                v-bind="props"
-                @click="selectKey(_key)"
-              >
-                <div class="d-flex justify-center">
-                  <v-icon>mdi-key-variant</v-icon>
-                </div>
-                <div class="d-flex justify-center">
-                  <p class="ml-2">
-                    {{ capitalize(_key.name) }}
-                  </p>
-                </div>
-              </v-chip>
-            </template>
-          </v-tooltip>
-        </v-row>
+        <v-tooltip
+          v-for="_key of sshKeysManagement.list()"
+          :key="_key.id"
+          :text="isKeySelected(_key) ? 'Selected' : 'Not selected'"
+          location="bottom"
+        >
+          <template #activator="{ props }">
+            <v-chip
+              class="pa-5 ml-5 mt-5"
+              :variant="isKeySelected(_key) ? 'flat' : 'outlined'"
+              :color="
+                isKeySelected(_key) ? 'primary' : theme.name.value === AppThemeSelection.light ? 'primary' : 'white'
+              "
+              v-bind="props"
+              @click="selectKey(_key)"
+            >
+              <div class="d-flex justify-center">
+                <v-icon>mdi-key-variant</v-icon>
+              </div>
+              <div class="d-flex justify-center">
+                <p class="ml-2">
+                  {{ capitalize(_key.name) }}
+                </p>
+              </div>
+            </v-chip>
+          </template>
+        </v-tooltip>
+        <v-divider class="mt-3" />
       </v-card-text>
 
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn class="mt-2 mb-2 mr-2" color="anchor" text="Close" @click="openManageDialog = false" />
+      <v-card-actions class="justify-end mb-1 mr-2">
+        <v-btn color="anchor" text="Close" @click="openManageDialog = false" />
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -116,7 +109,13 @@ export default defineComponent({
 
   setup(_, { emit }) {
     const inputElement = ref<HTMLElement>();
-    const defaultKeyData = { createdAt: "", id: 0, publicKey: "", name: "", isActive: false };
+    const defaultKeyData = {
+      createdAt: "",
+      id: 0,
+      publicKey: "",
+      name: "",
+      isActive: false,
+    };
     const openManageDialog = ref<boolean>(false);
     const selectedKey = ref<SSHKeyData>(defaultKeyData);
     const selectedKeys = ref<SSHKeyData[]>([]);

diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -45,17 +45,15 @@
 
           <v-tooltip text="Created at">
             <template #activator="{ props }">
-              <v-chip v-bind="props" class="ml-2">{{ selectedKey.createdAt }}</v-chip>
+              <v-chip v-bind="props" class="ma-2">{{ selectedKey.createdAt }}</v-chip>
             </template>
           </v-tooltip>
+          <v-divider />
         </v-card-text>
 
-        <v-card-actions class="mb-3 custom-actions">
-          <v-spacer></v-spacer>
-          <div class="mt-2">
-            <v-btn color="white" text="Close" @click="$emit('close')"></v-btn>
-            <v-btn text="Save" @click="updateKey" :loading="loading"></v-btn>
-          </div>
+        <v-card-actions class="justify-end mb-1 mr-2">
+          <v-btn color="anchor" text="Close" @click="$emit('close')"></v-btn>
+          <v-btn text="Save" @click="updateKey" :loading="loading"></v-btn>
         </v-card-actions>
       </v-card>
     </template>
@@ -151,12 +149,4 @@ export default defineComponent({
 .ssh-key .v-field__input {
   height: 230px !important;
 }
-.custom-actions {
-  border-top: 1px solid rgb(101 99 99);
-  display: flex;
-  justify-content: center;
-  margin-right: 15px;
-  margin-left: 15px;
-  margin-top: 15px;
-}
 </style>
diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -32,11 +32,12 @@
 
             <v-alert width="95%" class="mb-4" type="info">
               {{ $props.dialogType === SSHCreationMethod.Generate ? "Generating" : "Importing" }}
-              a new SSH key will cost you up to {{ sshKeysManagement.updateCost }} TFT
+              a new SSH key will cost you up to
+              {{ sshKeysManagement.updateCost }} TFT
             </v-alert>
 
             <div v-if="$props.dialogType === SSHCreationMethod.Generate" class="create">
-              <v-alert width="95%" type="info" class="mt-4">
+              <v-alert width="95%" type="info" class="my-4">
                 We will not keep your private key information. Be sure to save the private key downloaded after
                 creation.
               </v-alert>
@@ -63,32 +64,29 @@
                 </CopyInputWrapper>
               </input-tooltip>
             </div>
+            <v-divider />
           </v-card-text>
 
-          <v-card-actions class="custom-actions">
-            <v-spacer></v-spacer>
-            <div class="mt-3">
-              <v-btn color="white" text="Close" @click="$emit('close')"></v-btn>
-
-              <v-btn
-                v-if="$props.dialogType === SSHCreationMethod.Generate"
-                @click="generateSSHKey"
-                :loading="generating"
-                :disabled="!isValidForm || generating || !!generatedSshKey"
-                color="secondary"
-              >
-                Generate and Save
-              </v-btn>
-              <v-btn
-                v-if="$props.dialogType === SSHCreationMethod.Import"
-                :loading="$props.savingKey"
-                :disabled="!isValidForm"
-                color="secondary"
-                variant="outlined"
-                text="Save"
-                @click="createNewSSHKey"
-              ></v-btn>
-            </div>
+          <v-card-actions class="justify-end mb-1 mr-2">
+            <v-btn color="anchor" text="Close" @click="$emit('close')"></v-btn>
+
+            <v-btn
+              v-if="$props.dialogType === SSHCreationMethod.Generate"
+              @click="generateSSHKey"
+              :loading="generating"
+              :disabled="!isValidForm || generating || !!generatedSshKey"
+              color="secondary"
+            >
+              Generate and Save
+            </v-btn>
+            <v-btn
+              v-if="$props.dialogType === SSHCreationMethod.Import"
+              :loading="$props.savingKey"
+              :disabled="!isValidForm"
+              color="secondary"
+              text="Save"
+              @click="createNewSSHKey"
+            ></v-btn>
           </v-card-actions>
         </v-card>
       </v-form>