Merge pull request #9205 from Jarsen136/issue-9190

replace `is-flex-*` with tailwind equivalent
kodadot · Jan 31, 2024 · 5d30dec · 5d30dec
2 parents e02209b + 243deed
commit 5d30dec
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 26 deletions.
diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
@@ -84,12 +84,6 @@ useResizeObserver(wrapper, (entry) => {
 .gap {
   gap: 2.5rem;
 }
-.is-flex-basis-two-thirds {
-  flex-basis: 66.6%;
-}
-.is-flex-basis-auto {
-  flex-basis: auto;
-}
 
 //hack to make the chart responsive
 .max-width {

diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
@@ -27,7 +27,7 @@
             @mint="handleSubmitMint" />
         </div>
 
-        <div class="column pt-5 is-flex is-justify-content-center">
+        <div class="column pt-5 flex justify-center">
           <CollectionDropGenerativePreview
             :minted="userMintedCount"
             :content="drop.content"

diff --git a/components/collection/drop/HolderOfCollection.vue b/components/collection/drop/HolderOfCollection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="collection" class="is-flex is-align-items-center">
+  <div v-if="collection" class="flex items-center">
     <NeoIcon
       :icon="isHolder ? 'circle-check' : 'lock-keyhole'"
       icon-pack="fas"

diff --git a/components/gallery/GalleryItemHolderOf.vue b/components/gallery/GalleryItemHolderOf.vue
@@ -1,6 +1,6 @@
 <template>
   <InfoBox v-if="showWarning" variant="warning">
-    <div class="is-flex is-align-items-center">
+    <div class="flex items-center">
       <NeoIcon icon="triangle-exclamation" class="mr-2" />
       <span> {{ $t('drops.holderOfClaimed', [exclusiveDrop?.name]) }}</span>
     </div>

diff --git a/components/landing/HeroBanner.vue b/components/landing/HeroBanner.vue
@@ -36,7 +36,7 @@
       </h1>
       <template v-else>
         <h1
-          class="title is-size-1 is-size-2-mobile font-bold text-center flex is-flex-direction-column flex-wrap justify-center items-center mb-0">
+          class="title is-size-1 is-size-2-mobile font-bold text-center flex flex-col flex-wrap justify-center items-center mb-0">
           <div>
             {{ $t('search.landingTitle1') }}
             <span

diff --git a/components/migrate/steps/SignLoader3.vue b/components/migrate/steps/SignLoader3.vue
@@ -22,7 +22,7 @@
       </div>
     </div>
 
-    <div class="is-flex is-align-items-center mb-4">
+    <div class="flex items-center mb-4">
       <div class="mr-5">
         <NeoIcon v-bind="whichIcon()" class="fa-2x" />
       </div>
@@ -72,8 +72,8 @@ const { $consola } = useNuxtApp()
 const from = route.query.source as Prefix
 const fromAccountId = route.query.accountId?.toString()
 const fromCollectionId = route.query.collectionId?.toString()
-const nextCollectionId = computed(
-  () => route.query.nextCollectionId?.toString(),
+const nextCollectionId = computed(() =>
+  route.query.nextCollectionId?.toString(),
 )
 
 const itemCount = route.query.itemCount?.toString()

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
@@ -22,26 +22,24 @@
       <NeoDropdownItem
         v-for="collection in collections"
         :key="collection.id"
-        class="is-flex border-none is-justify-content-center is-align-items-center"
+        class="flex border-none justify-center items-center"
         aria-role="listitem"
         :value="collection.id">
         <NeoCheckbox
           :model-value="isSelected(collection)"
           class="pointer-events-none" />
         <div
-          class="is-flex is-align-items-center filter-container is-flex-grow-1 min-width-0">
+          class="flex items-center filter-container grow min-width-0">
           <img
             :src="sanitizeIpfsUrl(collection.meta.image)"
             class="image is-32x32 is-flex-shrink-0 border mr-2"
             :alt="collection.name || collection.id" />
-          <div
-            class="is-flex is-flex-direction-column is-flex-grow-1 min-width-0">
+          <div class="flex flex-col grow min-width-0">
             <div class="is-ellipsis">
               {{ collection.name || collection.id }}
             </div>
 
-            <div
-              class="is-flex is-justify-content-space-between text-xs text-k-grey">
+            <div class="flex justify-between text-xs text-k-grey">
               <div>{{ $t('search.owners') }}: {{ collection.owners }}</div>
             </div>
           </div>

diff --git a/components/teleport/EDWarningModal.vue b/components/teleport/EDWarningModal.vue
@@ -6,7 +6,7 @@
     content-class="mx-4 "
     :can-cancel="false">
     <div class="px-6 py-5 width-350">
-      <div class="is-flex mb-4 is-align-items-center">
+      <div class="flex mb-4 items-center">
         <NeoIcon
           icon="triangle-exclamation"
           pack="fasr"
@@ -15,7 +15,7 @@
         <span class="font-bold">{{ $t('teleport.fundLossRisk') }}</span>
       </div>
       <div
-        class="is-flex is-flex-direction-column px-4 bakground-warning-red border border-color-k-red">
+        class="flex flex-col px-4 bakground-warning-red border border-color-k-red">
         <span class="my-3">
           {{
             reason === 'source'
@@ -30,15 +30,14 @@
           }}
           <b>{{ $t('teleport.lossOfFunds') }}</b>
         </span>
-        <div class="is-flex py-4">
+        <div class="flex py-4">
           <NeoCheckbox
             v-model="checked"
             class="mr-3 text-xs"
             :label="$t('teleport.checkboxLabel')" />
         </div>
       </div>
-      <div
-        class="is-flex mt-5 is-align-items-center is-justify-content-space-between">
+      <div class="flex mt-5 items-center justify-between">
         <NeoButton
           variant="pill"
           :disabled="!checked"

diff --git a/components/teleport/FundsAtRiskWarning.vue b/components/teleport/FundsAtRiskWarning.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="has-text-danger is-flex is-align-items-center cursor-default">
+  <div class="has-text-danger flex items-center cursor-default">
     <NeoIcon
       icon="triangle-exclamation"
       pack="fasr"
@@ -12,7 +12,7 @@
       :auto-close="['outside', 'inside']">
       <u>{{ $t('teleport.why') }}</u>
       <template #content>
-        <div class="text-left py-2 is-flex is-flex-direction-column">
+        <div class="text-left py-2 flex flex-col">
           <span class="mb-3">
             {{
               reason === 'source'