Merge pull request #9906 from iMac7/9242-modal-width

Modal width to tailwind
kodadot · Mar 29, 2024 · 7c8c26c · 7c8c26c
2 parents 824240c + 0661fa7
commit 7c8c26c
Show file tree

Hide file tree

Showing 11 changed files with 11 additions and 59 deletions.
diff --git a/assets/styles/components/_connect-wallet.scss b/assets/styles/components/_connect-wallet.scss
@@ -30,6 +30,7 @@
  width: 100%;
 
  @include mobile {
+ inset: 0;
  border-left: none !important;
  max-width: 100vw;
  height: calc(100% - $navbar-mobile-min-height) ;

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
@@ -2,7 +2,7 @@
  <NeoModal
  :value="modelValue"
  :can-cancel="['outside', 'escape']"
- content-class="add-funds-modal"
+ content-class="add-funds-modal !w-[unset]"
  @close="onClose">
  <ModalBody
  :title="$t('mint.unlockable.addFundsModal.title')"
@@ -124,10 +124,4 @@ const handleModalClose = (completed: boolean) => {
  height: initial;
  }
 }
-
-@include mobile() {
- .modal-width {
- width: unset;
- }
-}
 </style>
diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue
@@ -3,7 +3,7 @@
  :value="isModalActive"
  :can-cancel="isClaimingDropStep ? false : ['outside', 'escape']"
  class="top"
- content-class="modal-width"
+ content-class="!w-[unset]"
  @close="onClose">
  <ModalBody :title="title" @close="onClose">
  <EmailSignup

diff --git a/components/collection/drop/modal/newsletter/EmailSignup.vue b/components/collection/drop/modal/newsletter/EmailSignup.vue
@@ -105,10 +105,6 @@ const confirm = () => {
 @import '@/assets/styles/abstracts/variables';
 @import '@/assets/styles/abstracts/animations';
 
-.modal-width {
- width: 25rem;
-}
-
 .shine:not(:hover):not(:disabled) {
  @include shineEffect(var(--k-accent-light-3), lightgrey, false);
 

diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -4,7 +4,7 @@
  :can-cancel="['outside', 'escape']"
  class="z-[1000]"
  @close="onClose">
- <div class="modal-width">
+ <div class="sm:w-[25rem]">
  <header class="py-5 pl-6 pr-5 flex justify-between items-center border-b">
  <span class="modal-card-title text-base font-bold">
  {{ $t('autoTeleport.signTransactions') }}
@@ -268,10 +268,6 @@ watch(autoteleportFinalized, () => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.modal-width {
- width: 25rem;
-}
-
 .btn-height {
  height: 3.5rem;
 }
@@ -280,10 +276,4 @@ watch(autoteleportFinalized, () => {
  max-height: 80vh;
  overflow-y: auto;
 }
-
-@include mobile() {
- .modal-width {
- width: unset;
- }
-}
 </style>
diff --git a/components/common/autoTeleport/AutoTeleportWelcomeModal.vue b/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
@@ -4,7 +4,7 @@
  :can-cancel="['outside', 'escape']"
  class="z-[1000]"
  @close="onClose">
- <div class="modal-width">
+ <div class="sm:w-[40rem]">
  <header class="py-5 pl-6 pr-5 flex justify-between items-center">
  <span class="capitalize text-[1.6rem] font-bold">
  {{ $t('autoTeleport.welcomeToAutoTeleport') }}
@@ -91,14 +91,6 @@ const onClose = () => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.modal-width {
- width: 40rem;
-
- @include mobile {
- width: unset;
- }
-}
-
 .btn-height {
  height: 3.5rem;
 }

diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
@@ -3,7 +3,7 @@
  :value="isModalActive"
  :can-cancel="['outside', 'escape']"
  class="z-[1000]"
- content-class="modal-width"
+ content-class="!w-[unset]"
  @close="onClose">
  <ModalBody
  :title="$t('confirmPurchase.action')"

diff --git a/components/common/itemTransfer/ItemTransferModal.vue b/components/common/itemTransfer/ItemTransferModal.vue
@@ -7,7 +7,7 @@
  @try-again="transfer" />
 
  <NeoModal :value="isModalActive" @close="onClose">
- <div class="modal-width">
+ <div class="lg:w-[25rem]">
  <header
  class="border-b border-grey flex items-center justify-between px-6">
  <p class="py-5 text-base font-bold">
@@ -218,15 +218,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.modal-width {
- width: 25rem;
-}
-
-@include touch() {
- .modal-width {
- width: unset;
- }
-}
 .btn-height {
  height: 3.5rem;
 }

diff --git a/components/create/Confirm/MintConfirmModal.vue b/components/create/Confirm/MintConfirmModal.vue
@@ -4,7 +4,7 @@
  :can-cancel="['outside', 'escape']"
  class="z-[1000]"
  max-height="calc(100vh - 180px)"
- content-class="modal-width"
+ content-class="!w-[unset]"
  @close="onClose">
  <ModalBody
  :title="$t('mint.nft.modal.action')"

diff --git a/components/shared/modals/ModalBody.vue b/components/shared/modals/ModalBody.vue
@@ -1,5 +1,7 @@
 <template>
- <div class="modal-width">
+ <div
+ class="w-[unset]"
+ :class="[`sm:w-[${modalWidth}]`, `max-w-[${modalMaxHeight}]`]">
  <header class="px-6 py-4 flex justify-between border-b items-center">
  <NeoSkeleton
  v-if="loading"
@@ -124,15 +126,6 @@ $x-padding: 2rem;
 $t-padding: 1.5rem;
 $b-padding: 1.25rem;
 
-.modal-width {
- width: v-bind(modalWidth);
- max-width: v-bind(modalMaxHeight);
-
- @include mobile {
- width: unset;
- }
-}
-
 .limit-height {
  &__scrollabe {
  max-height: v-bind(modalMaxHeight);

diff --git a/libs/ui/src/components/NeoModal/NeoModal.scss b/libs/ui/src/components/NeoModal/NeoModal.scss
@@ -23,11 +23,6 @@ $modal-overlay-background-color: rgb(0 0 0 / 0.17);
  &.enable-mobile {
  @media screen and (max-width: 425px) {
  @apply absolute -bottom-[1px] -right-[1px] -left-[1px] flex flex-col;
-
- .modal-width,
- &.modal-width {
- @apply w-[unset];
- }
  }
  }
  }