Merge pull request #2796 from threefoldtech/development_vuetify_defaults

Apply vuetify default configuration for components
threefoldtech · Jun 5, 2024 · b20a455 · b20a455
2 parents 484c332 + 02c193d
commit b20a455
Show file tree

Hide file tree

Showing 71 changed files with 405 additions and 539 deletions.
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -128,7 +128,9 @@
               </TfSwapPrice>
             </div>
           </v-spacer>
-          <v-btn class="capitalize" :style="{ pointerEvents: 'none' }" variant="text"> {{ network }}net </v-btn>
+          <v-btn class="capitalize" color="anchor" :style="{ pointerEvents: 'none' }" variant="text">
+            {{ network }}net
+          </v-btn>
           <v-divider vertical class="mx-2" />
           <AppTheme />
           <v-divider vertical class="mx-2" />

diff --git a/packages/playground/src/components/TfSwapPrice.vue b/packages/playground/src/components/TfSwapPrice.vue
@@ -9,7 +9,7 @@
             class="mx-1 order-1"
             @click="priceTask.error ? priceTask.run() : toggleSwap()"
             :loading="priceTask.loading"
-            :color="priceTask.error ? 'error' : undefined"
+            :color="priceTask.error ? 'error' : 'anchor'"
             v-bind="props"
           />
         </template>

diff --git a/packages/playground/src/components/app_info.vue b/packages/playground/src/components/app_info.vue
@@ -1,7 +1,7 @@
 <template>
   <v-tooltip location="left" :text="tooltip">
     <template #activator="{ props }">
-      <v-btn v-bind="props" icon="mdi-information-outline" @click="setOpenInfo(true)" />
+      <v-btn v-bind="props" variant="tonal" color="anchor" icon="mdi-information-outline" @click="setOpenInfo(true)" />
     </template>
   </v-tooltip>
 
@@ -24,7 +24,7 @@
 
       <v-divider class="mb-2" />
       <v-card-actions class="d-flex justify-end">
-        <v-btn color="anchor" variant="outlined" @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/app_theme.vue b/packages/playground/src/components/app_theme.vue
@@ -1,7 +1,12 @@
 <template>
   <v-tooltip location="bottom" :text="light ? 'Switch to dark mode' : 'Switch to light mode'">
     <template #activator="{ props }">
-      <v-btn v-bind="props" @click="light = !light" :icon="light ? 'mdi-moon-waning-crescent' : 'mdi-brightness-4'" />
+      <v-btn
+        v-bind="props"
+        color="anchor"
+        @click="light = !light"
+        :icon="light ? 'mdi-moon-waning-crescent' : 'mdi-brightness-4'"
+      />
     </template>
   </v-tooltip>
 </template>

diff --git a/packages/playground/src/components/connect_wallet_landing.vue b/packages/playground/src/components/connect_wallet_landing.vue
@@ -56,7 +56,7 @@
         </div>
 
         <div class="d-flex justify-center mt-5">
-          <v-btn color="primary" target="_blank" :href="statsUrl"> Explore ThreeFold Grid Capacity </v-btn>
+          <v-btn variant="elevated" target="_blank" :href="statsUrl"> Explore ThreeFold Grid Capacity </v-btn>
         </div>
       </div>
       <div class="text-center">
@@ -67,9 +67,7 @@
           Metaverse and more.
         </p>
         <div class="d-flex justify-center align-center flex-wrap my-4">
-          <v-btn color="primary" variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL">
-            Learn about the grid
-          </v-btn>
+          <v-btn variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL"> Learn about the grid </v-btn>
         </div>
       </div>
     </v-container>

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -113,13 +113,11 @@
         v-if="Object.keys(props.lockedContracts).length > 0"
         :disabled="!selectedLockedContracts"
         color="warning"
-        variant="outlined"
         @click="openUnlockDialog"
         >Unlock</v-btn
       >
 
       <v-btn
-        variant="outlined"
         color="anchor"
         prepend-icon="mdi-export-variant"
         :disabled="isExporting || !contracts || contracts.length === 0 || deleting"
@@ -129,7 +127,6 @@
       </v-btn>
 
       <v-btn
-        variant="outlined"
         color="error"
         :disabled="!selectedContracts.length || deleting"
         :loading="deleting"
@@ -167,10 +164,7 @@
         >
 
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn variant="outlined" color="anchor" class="mr-2 px-3" @click="contractStateDialog = false">
-            Close
-          </v-btn>
+          <v-btn color="anchor" class="mr-2 px-3" @click="contractStateDialog = false"> Close </v-btn>
           <v-tooltip
             :text="
               freeBalance < getAmountLocked
@@ -184,7 +178,6 @@
                 <v-btn
                   v-if="!isNodeInRentContracts"
                   :disabled="freeBalance < getAmountLocked"
-                  variant="outlined"
                   color="warning"
                   class="mr-2 px-3"
                   @click="unlockContract([selectedItem.contract_id])"
@@ -202,27 +195,27 @@
 
   <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
       >
 
       <v-alert class="mx-4" type="warning" variant="tonal">Deleting contracts may take a while to complete.</v-alert>
       <v-card-text>
-        <v-chip class="ma-1" color="primary" label v-for="c in selectedContracts" :key="c.contract_id">
+        <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-btn color="anchor" variant="outlined" @click="deletingDialog = false"> Cancel </v-btn>
-        <v-btn color="error" variant="outlined" @click="onDelete"> Delete </v-btn>
+      <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>
     </v-card>
   </v-dialog>
 
-  <v-dialog width="500" v-model="unlockDialog">
+  <v-dialog width="800" v-model="unlockDialog">
     <v-card>
       <v-card-title class="bg-primary">
         Unlock the following Contract<span v-if="selectedContracts.length > 1">s</span>
@@ -243,16 +236,15 @@
           </div>
           <div v-else-if="selectedLockedAmount > 0">
             You need to fund your account with
-            <span class="font-weight-bold">{{ Math.ceil(selectedLockedAmount - freeBalance) }} TFTs</span> to resume
-            your contracts
+            <span class="font-weight-bold">{{ Math.ceil(selectedLockedAmount - freeBalance) }} TFTs</span>
+            to resume your contracts
           </div>
         </v-alert>
-        <v-chip class="ma-1" color="primary" label v-for="c in selectedContracts" :key="c.contract_id">
+        <v-chip class="ma-1" label v-for="c in selectedContracts" :key="c.contract_id">
           {{ c.contract_id }}
         </v-chip>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="anchor" variant="outlined" @click="unlockDialog = false"> Cancel </v-btn>
+          <v-btn color="anchor" @click="unlockDialog = false"> Cancel </v-btn>
           <v-tooltip
             :text="
               freeBalance < selectedLockedAmount
@@ -266,7 +258,6 @@
                 <v-btn
                   :disabled="selectedLockedAmount > freeBalance"
                   color="warning"
-                  variant="outlined"
                   class="ml-2"
                   :loading="unlockContractLoading"
                   @click="

diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
@@ -1,12 +1,12 @@
 <template>
   <v-row justify="center">
-    <v-dialog model-value @update:model-value="$emit('close')" scrollable width="70%">
+    <v-dialog model-value @update:model-value="$emit('close')" scrollable>
       <v-card>
         <v-card-title class="d-flex flex-column" v-if="!onlyJson">
           <div class="d-flex justify-center">
             <v-btn-toggle divided v-model="showType" mandatory>
-              <v-btn variant="outlined"> details </v-btn>
-              <v-btn variant="outlined"> JSON</v-btn>
+              <v-btn> details </v-btn>
+              <v-btn> JSON</v-btn>
             </v-btn-toggle>
           </div>
 
@@ -111,10 +111,9 @@
           </pre>
           </template>
         </v-card-text>
-        <v-card-actions class="my-1">
-          <v-spacer />
-          <v-btn color="anchor" variant="outlined" @click="$emit('close')">Close</v-btn>
-          <v-btn color="secondary" variant="outlined" @click="copy">Copy</v-btn>
+        <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>
       </v-card>
     </v-dialog>

diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
@@ -1,11 +1,6 @@
 <template>
   <v-container>
-    <v-dialog
-      transition="dialog-bottom-transition"
-      max-width="1000"
-      v-model="depositDialog"
-      @update:model-value="closeDialog"
-    >
+    <v-dialog transition="dialog-bottom-transition" v-model="depositDialog" @update:model-value="closeDialog">
       <v-card>
         <VCardTitle class="bg-primary">Deposit TFT</VCardTitle>
         <v-card-text>
@@ -67,14 +62,14 @@
                   </div>
                 </div>
               </v-col>
-              <v-divider horizontal></v-divider>
             </v-row>
           </v-container>
-          <v-card-actions class="justify-end">
-            <v-btn variant="outlined" color="anchor" class="mr-2 px-3" @click="closeDialog"> Close </v-btn>
-            <v-btn variant="outlined" 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/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
@@ -5,14 +5,7 @@
       <v-spacer />
       <v-tooltip text="Add">
         <template #activator="{ props }">
-          <v-btn
-            icon="mdi-plus"
-            variant="outlined"
-            color="secondary"
-            @click="$emit('add')"
-            v-bind="props"
-            :disabled="disabled"
-          />
+          <v-btn icon="mdi-plus" color="secondary" @click="$emit('add')" v-bind="props" :disabled="disabled" />
         </template>
       </v-tooltip>
     </div>

diff --git a/packages/playground/src/components/filter.vue b/packages/playground/src/components/filter.vue
@@ -55,7 +55,6 @@
             <v-btn
               :disabled="!isValidForm || loading || !(formHasValues || Object.keys(route.query).length > 0)"
               @click="resetFilters"
-              variant="outlined"
               color="anchor"
               text="Clear"
             />

diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
@@ -1,18 +1,7 @@
 <template>
   <v-tooltip location="bottom" close-delay="1000" color="primary">
     <template #activator="{ props }">
-      <v-btn
-        id="tftBtn"
-        width="2000"
-        color="white"
-        @click="addTFT"
-        class="px-lg-6 px-md-2 px-sm-0 mx-sm-0"
-        style="color: white; max-width: 140px; width: auto; background-color: var(--primary)"
-        :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
@@ -71,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
@@ -17,7 +17,7 @@
         </template>
       </v-tooltip>
 
-      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" max-width="500px">
+      <v-dialog transition="dialog-bottom-transition" v-model="showDialog">
         <v-card>
           <v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
           <v-divider color="#FFCC00" />
@@ -49,8 +49,8 @@
               </template>
             </li>
           </v-card-text>
-          <v-card-actions class="justify-end">
-            <v-btn @click="showDialog = false" variant="outlined" color="anchor">Close</v-btn>
+          <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>
       </v-dialog>
@@ -120,9 +120,7 @@
       </template>
 
       <template #[`item.actions`]="{ item }">
-        <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
-          Deleting...
-        </v-chip>
+        <v-chip color="error" v-if="deleting && ($props.modelValue || []).includes(item.value)"> Deleting... </v-chip>
         <v-btn-group variant="tonal" v-else>
           <slot name="actions" :item="item"></slot>
         </v-btn-group>

diff --git a/packages/playground/src/components/logged_in_landing.vue b/packages/playground/src/components/logged_in_landing.vue
@@ -74,9 +74,7 @@
               </p>
 
               <div class="d-flex justify-center align-center flex-wrap my-4">
-                <v-btn color="primary" variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL">
-                  Learn about the grid
-                </v-btn>
+                <v-btn variant="elevated" class="mr-2" target="_blank" :href="MANUAL_URL"> Learn about the grid </v-btn>
               </div>
             </div>
           </v-card>

diff --git a/packages/playground/src/components/logger.vue b/packages/playground/src/components/logger.vue
@@ -80,10 +80,9 @@
     <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-btn variant="outlined" @click="clearDialog = false" text="Cancel" />
-        <v-btn variant="outlined" color="error" @click="clearLogs.run()" text="clear" />
+      <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>
     </v-card>
   </v-dialog>

diff --git a/packages/playground/src/components/main_footer.vue b/packages/playground/src/components/main_footer.vue
@@ -21,13 +21,13 @@
               href="https://github.com/threefoldtech/tfgrid-sdk-ts"
               target="_blank"
               :style="{ color: 'rgb(var(--v-footer-color-link)) !important' }"
-              ><v-btn class="" icon="mdi-github" variant="text"></v-btn
+              ><v-btn color="anchor" icon="mdi-github" variant="text"></v-btn
             ></a>
             <a
               href="mailto:[email protected]"
               target="_blank"
               :style="{ color: 'rgb(var(--v-footer-color)) !important' }"
-              ><v-btn class="" icon="mdi-email-outline" variant="text"></v-btn
+              ><v-btn color="anchor" icon="mdi-email-outline" variant="text"></v-btn
             ></a>
           </div>
         </v-col>

diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -66,13 +66,12 @@
           </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" variant="outlined" @click="deployedDialog = false">Close</v-btn>
+        <v-btn color="anchor" @click="deployedDialog = false">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>