From 771cb06c76a887027546bdcab7aafd517c8bfaf4 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:02:56 +0700
Subject: [PATCH 1/2] refactor: streamline styles and remove unused variables
 across components

- Removed unused SCSS imports and variables from multiple components.
- Replaced theme-based styles with Tailwind CSS utility classes for consistency.
- Enhanced styling for various elements, including buttons, banners, and popovers, to improve visual coherence.
- Introduced a new utility class for text shadows to enhance text visibility.

These changes aim to simplify the styling approach and improve maintainability.
---
 components/MessageNotify.vue                  |  9 +--
 components/base/MediaItem.vue                 | 12 +---
 components/blog/BlogPost.vue                  | 46 +++++--------
 .../CollectionHeader/CollectionBanner.vue     | 44 ++----------
 components/collection/HeroButtons.vue         | 32 ++-------
 components/collection/drop/AddFundsModal.vue  |  2 -
 .../collection/unlockable/CountdownTimer.vue  |  4 --
 .../CollectionDetailsPopover.vue              | 13 +---
 .../CollectionDetailsPopoverContent.vue       | 69 +++----------------
 libs/ui/src/scss/tailwind.scss                | 14 ++++
 10 files changed, 57 insertions(+), 188 deletions(-)

diff --git a/components/MessageNotify.vue b/components/MessageNotify.vue
index 59b17bb962..f120a781a7 100644
--- a/components/MessageNotify.vue
+++ b/components/MessageNotify.vue
@@ -51,21 +51,14 @@ const autoClose = computed(() => !props.noToast)
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
 .message-box {
+  @apply shadow-[4px_4px] bg-background-color border border-border-color;
   max-width: 500px;
 
   &--toast {
     @apply z-[100] fixed mx-auto rounded-none right-0 top-[100px] #{!important};
   }
 
-  @include ktheme() {
-    box-shadow: theme('primary-shadow');
-    background-color: theme('background-color');
-    border: 1px solid theme('border-color');
-  }
-
   .message-body {
     @apply rounded-none border-l-0;
   }
diff --git a/components/base/MediaItem.vue b/components/base/MediaItem.vue
index a601c5c68b..440218c705 100644
--- a/components/base/MediaItem.vue
+++ b/components/base/MediaItem.vue
@@ -223,7 +223,6 @@ defineExpose({ isLewdBlurredLayer, toggleFullscreen })
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
 .media-object {
   .nsfw-blur {
     backdrop-filter: blur(60px);
@@ -239,19 +238,14 @@ defineExpose({ isLewdBlurredLayer, toggleFullscreen })
     }
   }
   .nsfw-action {
+    @apply text-text-color bg-background-color;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 1.25rem;
-    @include ktheme() {
-      color: theme('text-color') !important;
-      background: theme('background-color') !important;
-    }
+
     &.hide {
-      @include ktheme() {
-        color: theme('background-color') !important;
-        background: theme('text-color') !important;
-      }
+      @apply text-text-color bg-background-color;
     }
   }
 }
diff --git a/components/blog/BlogPost.vue b/components/blog/BlogPost.vue
index 6e235d1528..dd1cdbfd2a 100644
--- a/components/blog/BlogPost.vue
+++ b/components/blog/BlogPost.vue
@@ -109,9 +109,6 @@ useSeoMeta({
 </script>
 
 <style lang="scss">
-@use 'sass:meta';
-@import '@/assets/styles/abstracts/variables';
-
 .article {
   margin: 0 auto;
   max-width: 40rem;
@@ -146,6 +143,7 @@ useSeoMeta({
   }
 
   h2 {
+    @apply text-k-accent-light-2-dark-head;
     font-size: 1.5rem;
     font-weight: 700;
   }
@@ -161,7 +159,7 @@ useSeoMeta({
   }
 
   img {
-    @apply mx-0 my-10 rounded-2xl;
+    @apply mx-0 my-10 rounded-2xl border border-border-color;
   }
 
   p,
@@ -174,36 +172,26 @@ useSeoMeta({
     margin: 0 1.5rem;
   }
 
-  @include ktheme() {
-    .markdown-body {
-      color: theme('k-accentlight2-dark');
-    }
-
-    h2 {
-      color: theme('k-accentlight2-dark-head');
-    }
-
-    p {
-      color: theme('k-accentlight2-dark-paragraph');
-    }
+  .markdown-body {
+    @apply text-k-accent-light-2-dark;
+  }
 
-    img {
-      border: 1px solid theme('border-color');
-    }
+  p {
+    @apply text-k-accent-light-2-dark-paragraph;
+  }
 
-    a {
-      color: theme('k-blue');
-    }
+  a {
+    @apply text-k-blue;
+  }
 
-    pre {
-      padding-left: 0;
-      padding-right: 0;
-      font-size: 1rem;
-      background-color: theme('background-color');
-    }
+  pre {
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 1rem;
+    @apply bg-background-color;
   }
 
-  @include touch {
+  @media screen and (max-width: 1023px) {
     .subtitle {
       font-size: 1.25rem;
     }
diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
index 9623f5cdc6..fba6821b77 100644
--- a/components/collection/CollectionHeader/CollectionBanner.vue
+++ b/components/collection/CollectionHeader/CollectionBanner.vue
@@ -3,7 +3,9 @@
     class="collection-banner relative md:h-[560px] h-72 bg-no-repeat bg-cover bg-center border-b"
     :style="{ backgroundImage: `url(${collectionBanner})` }"
   >
-    <div class="collection-banner-shadow absolute inset-0" />
+    <div
+      class="collection-banner-shadow absolute inset-0 bg-gradient-to-b from-black/[0.06] to-black/20"
+    />
 
     <section class="h-full py-8">
       <div
@@ -11,7 +13,9 @@
       >
         <div class="lg:flex-1">
           <div class="flex flex-col items-start">
-            <div class="collection-banner-avatar p-2.5 mb-4 md:mb-6">
+            <div
+              class="collection-banner-avatar p-2.5 mb-4 md:mb-6 border border-border-color bg-background-color shadow-[4px_4px]"
+            >
               <BaseMediaItem
                 :src="collectionAvatar"
                 :image-component="NuxtImg"
@@ -20,7 +24,7 @@
               />
             </div>
             <h1
-              class="collection-banner-name font-bold text-2xl md:text-[31px] w-max max-w-sm"
+              class="collection-banner-name font-bold text-2xl md:text-[31px] w-max max-w-sm text-text-color-inverse text-shadow-border"
               data-testid="collection-banner-name"
             >
               {{ collectionName }}
@@ -120,37 +124,3 @@ useSeoMeta({
     ),
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.collection-banner {
-  &-shadow {
-    background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2));
-  }
-
-  &-avatar {
-    @include ktheme() {
-      border: 1px solid theme('border-color');
-      background-color: theme('background-color');
-      box-shadow: theme('primary-shadow');
-    }
-  }
-
-  &-name {
-    @include ktheme() {
-      color: theme('text-color-inverse');
-      text-shadow:
-        1px 1px 0 theme('text-color'),
-        1px -1px 0 theme('text-color'),
-        -1px 1px 0 theme('text-color'),
-        -1px -1px 0 theme('text-color'),
-        1px 0px 0 theme('text-color'),
-        0px 1px 0 theme('text-color'),
-        -1px 0px 0 theme('text-color'),
-        0px -1px 0 theme('text-color'),
-        4px 4px theme('text-color');
-    }
-  }
-}
-</style>
diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
index 3c6d523254..678c059f59 100644
--- a/components/collection/HeroButtons.vue
+++ b/components/collection/HeroButtons.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="hero-buttons flex justify-end items-end px-2">
+    <div class="max-md:mt-0 max-md:mb-6 flex justify-end items-end px-2">
       <div
         v-if="twitter"
         class="flex"
@@ -8,14 +8,14 @@
         <NeoButton
           icon="x-twitter"
           icon-pack="fab"
-          class="square-32"
+          class="size-8"
           @click="openUrl(`https://twitter.com/${twitter}`)"
         />
       </div>
 
       <div
         v-if="displaySeperator"
-        class="vertical-seperator mx-4 is-hidden-mobile"
+        class="bg-border-color h-5 mb-1 w-px mx-4 is-hidden-mobile"
       />
 
       <div class="flex">
@@ -28,7 +28,7 @@
           <template #trigger="{ active }">
             <NeoButton
               icon="share-alt"
-              class="square-32 mr-3"
+              class="size-8 mr-3"
               data-testid="share-button"
               :active="active"
             />
@@ -86,7 +86,7 @@
           <template #trigger="{ active }">
             <NeoButton
               icon="ellipsis-vertical"
-              class="square-32"
+              class="size-8"
               data-testid="more-actions-button"
               :active="active"
             />
@@ -186,25 +186,3 @@ const isOwner = computed(() => isCurrentOwner(collection.value?.currentOwner))
 
 const QRModalActive = ref(false)
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-@include mobile {
-  .hero-buttons {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-  }
-}
-.square-32 {
-  width: 32px;
-  height: 32px;
-}
-.vertical-seperator {
-  height: 24px;
-  margin-bottom: 4px;
-  width: 1px;
-  @include ktheme() {
-    background-color: theme('border-color');
-  }
-}
-</style>
diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 254acac94d..7024448848 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -117,8 +117,6 @@ const handleModalClose = (completed: boolean) => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
 .add-funds-modal {
   .o-tip {
     display: flex;
diff --git a/components/collection/unlockable/CountdownTimer.vue b/components/collection/unlockable/CountdownTimer.vue
index 609853e319..def5eee6ca 100644
--- a/components/collection/unlockable/CountdownTimer.vue
+++ b/components/collection/unlockable/CountdownTimer.vue
@@ -49,7 +49,3 @@ const [wrapper] = useKeenSlider({
   },
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-</style>
diff --git a/components/collectionDetailsPopover/CollectionDetailsPopover.vue b/components/collectionDetailsPopover/CollectionDetailsPopover.vue
index 3077178f01..331f96d359 100644
--- a/components/collectionDetailsPopover/CollectionDetailsPopover.vue
+++ b/components/collectionDetailsPopover/CollectionDetailsPopover.vue
@@ -13,7 +13,7 @@
     <slot name="content" />
 
     <template #content>
-      <div class="popover-container">
+      <div class="min-h-[12.5rem] bg-background-color">
         <CollectionDetailsPopoverContent
           v-if="triggered"
           :nft="nft"
@@ -63,14 +63,3 @@ const nft = computed(
     },
 )
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
-.popover-container {
-  min-height: 12.5rem;
-  @include ktheme() {
-    background: theme('background-color');
-  }
-}
-</style>
diff --git a/components/collectionDetailsPopover/CollectionDetailsPopoverContent.vue b/components/collectionDetailsPopover/CollectionDetailsPopoverContent.vue
index fe72a60e81..f007401bb0 100644
--- a/components/collectionDetailsPopover/CollectionDetailsPopoverContent.vue
+++ b/components/collectionDetailsPopover/CollectionDetailsPopoverContent.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="popover-content-container p-5 ms-dos-shadow">
-    <div class="popover-header pb-2">
-      <h6 class="popover-user-heading">
+  <div class="w-[300px] border border-border-color shadow-[4px_4px] p-5">
+    <div class="border-b border-k-grey pb-2">
+      <h6 class="text-xs text-k-grey">
         {{ $t('collection') }}
       </h6>
       <div class="flex items-center justify-between">
         <div class="flex items-center">
           <nuxt-link
-            class="text-base break-word mr-2 text-k-blue hover:text-k-blue-hover"
+            class="text-base break-words mr-2 text-k-blue hover:text-k-blue-hover"
             :to="`/${urlPrefix}/collection/${
               nft?.collection?.id || nft.collectionId
             }`"
@@ -19,7 +19,7 @@
       </div>
     </div>
 
-    <div class="popover-stats-container flex flex-col pt-2">
+    <div class="flex flex-col pt-2">
       <div class="pb-2">
         <div class="flex items-center justify-between">
           <span class="text-base">{{ $t('statsOverview.uniqueOwners') }}</span>
@@ -73,16 +73,16 @@
       </div>
       <div
         v-if="soldItems.length"
-        class="sales-container pt-2"
+        class="border-t border-k-grey pt-2"
       >
-        <h6 class="popover-user-heading pb-2">
+        <h6 class="text-xs text-k-grey pb-2">
           {{ $t('profile.highestSales') }}
         </h6>
-        <div class="flex sold-items">
+        <div class="flex gap-[10px]">
           <div
             v-for="nftItem in soldItems"
             :key="nftItem.id"
-            class="sold-item"
+            class="w-[76px] h-[76px]"
           >
             <GalleryCard
               :id="nftItem.id"
@@ -136,54 +136,3 @@ const { nftEntities: soldItems } = useCollectionSoldData({
   collectionId: props.nft?.collection?.id || props.nft?.collectionId,
 })
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
-.popover-content-container {
-  @include ktheme() {
-    border: 1px solid theme('border-color');
-  }
-
-  width: 300px;
-}
-
-.ms-dos-shadow {
-  @include ktheme() {
-    box-shadow: theme('primary-shadow');
-  }
-}
-
-.popover-image {
-  min-width: 60px;
-}
-
-.break-word {
-  overflow-wrap: break-word;
-}
-
-.popover-header {
-  @apply border-b border-k-grey;
-
-  .popover-user-heading {
-    font-size: 12px;
-
-    @include ktheme() {
-      color: theme('k-grey');
-    }
-  }
-}
-
-.sales-container {
-  @apply border-t border-k-grey;
-}
-
-.sold-items {
-  gap: 10px;
-
-  .sold-item {
-    width: 76px;
-    height: 76px;
-  }
-}
-</style>
diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss
index 5b9acc702f..1acc88a464 100644
--- a/libs/ui/src/scss/tailwind.scss
+++ b/libs/ui/src/scss/tailwind.scss
@@ -130,3 +130,17 @@
     border: 0 solid currentColor;
   }
 }
+
+@layer utilities {
+  .text-shadow-border {
+    text-shadow: 1px 1px 0 rgb(var(--text-color)),
+                1px -1px 0 rgb(var(--text-color)),
+                -1px 1px 0 rgb(var(--text-color)),
+                -1px -1px 0 rgb(var(--text-color)),
+                1px 0px 0 rgb(var(--text-color)),
+                0px 1px 0 rgb(var(--text-color)),
+                -1px 0px 0 rgb(var(--text-color)),
+                0px -1px 0 rgb(var(--text-color)),
+                4px 4px rgb(var(--text-color));
+  }
+}

From 95231c4945e8125e8a41104a798291a46a05525f Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:27:25 +0700
Subject: [PATCH 2/2] refactor: update component styles and remove unused SCSS

- Enhanced styling in multiple components by replacing SCSS with Tailwind CSS utility classes for improved consistency and maintainability.
- Removed unused SCSS styles and variables, streamlining the codebase.
- Adjusted layout and positioning for better responsiveness and visual coherence across components.
- Improved accessibility and hover states for buttons and interactive elements.

These changes aim to simplify the styling approach and enhance the overall user experience.
---
 .../collection/unlockable/UnlockableTag.vue   | 17 +-----
 .../common/listingCart/ListingCartMini.vue    | 32 ++--------
 components/drops/TimeTag.vue                  | 19 +-----
 .../GalleryItemActivity.vue                   | 61 ++-----------------
 components/gallery/UnlockableTag.vue          | 25 +-------
 components/massmint/Massmint.vue              | 41 ++-----------
 6 files changed, 19 insertions(+), 176 deletions(-)

diff --git a/components/collection/unlockable/UnlockableTag.vue b/components/collection/unlockable/UnlockableTag.vue
index bf611e7805..a71247d4ad 100644
--- a/components/collection/unlockable/UnlockableTag.vue
+++ b/components/collection/unlockable/UnlockableTag.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isUnlockable"
-    class="unlockable-container rounded-[2rem] flex border py-2 px-6 justify-between"
+    class="unlockable-container rounded-[2rem] flex border py-2 px-6 justify-between border-k-shade max-lg:max-w-full"
   >
     <NeoTooltip
       :label="$t('unlockable.tooltip')"
@@ -39,18 +39,3 @@ const { isUnlockable } = useUnlockable(
   computed(() => ({ id: props.collectionId })),
 )
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables.scss';
-.unlockable-container {
-  @include ktheme() {
-    border-color: theme('k-shade');
-  }
-}
-
-@include until-widescreen {
-  .unlockable-container {
-    max-width: 100%;
-  }
-}
-</style>
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 893e80f5cf..81412cb648 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -2,12 +2,10 @@
   <transition name="slide">
     <div
       v-if="listingCartStore.count"
-      class="listing-container"
+      class="fixed right-24 bottom-9 z-[998]"
     >
       <div class="inline-flex items-center">
-        <div
-          class="k-shadow bg-background-color border flex items-center !py-[0.875rem] px-6 gap-8"
-        >
+        <div class="k-shadow bg-background-color border flex items-center !py-[0.875rem] px-6 gap-8">
           <div class="inline-flex items-center">
             <div>
               <b>{{ listingCartStore.count }}</b>
@@ -16,17 +14,17 @@
             <div class="mx-4" />
             <NeoButton
               :disabled="!listingCartStore.count"
-              class="!text-k-grey selection-button"
+              class="!text-k-grey hover:!text-text-color disabled:hover:!text-k-grey"
               variant="text"
               no-shadow
               @click="listingCartStore.clearListedItems"
             >
               {{ $t('sort.clearAll') }}
             </NeoButton>
-            <div class="mx-4 divider bg-k-grey" />
+            <div class="mx-4 w-px h-4 bg-k-grey" />
             <NeoButton
               variant="text"
-              class="!text-k-grey selection-button"
+              class="!text-k-grey hover:!text-text-color"
               no-shadow
               @click="listingCartStore.addAllToCart"
             >
@@ -107,23 +105,3 @@ onBeforeUnmount(() => {
   listingCartStore.clear()
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables.scss';
-
-.listing-container {
-  position: fixed;
-  right: 96px;
-  bottom: 36px;
-  @apply z-[998];
-  .selection-button:not([disabled='disabled']):hover {
-    @include ktheme() {
-      color: theme('text-color') !important;
-    }
-  }
-  .divider {
-    width: 1px;
-    height: 1rem;
-  }
-}
-</style>
diff --git a/components/drops/TimeTag.vue b/components/drops/TimeTag.vue
index 9d3bb78b1a..f1a6b455e5 100644
--- a/components/drops/TimeTag.vue
+++ b/components/drops/TimeTag.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tag-container flex py-1 px-2 justify-between items-center">
+  <div class="tag-container flex py-1 px-2 justify-between items-center bg-background-color text-text-color border-k-shade">
     <span
       v-if="isInLessThan24Hours && !isMintingLive"
       class="mr-2 capitalize"
@@ -49,20 +49,3 @@ const displayText = computed(() => {
   }
 })
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables.scss';
-.tag-container {
-  @include ktheme() {
-    border-color: theme('k-shade');
-    background-color: theme('background-color');
-    color: theme('text-color');
-  }
-}
-
-@include until-widescreen {
-  .unlockable-container {
-    max-width: 100%;
-  }
-}
-</style>
diff --git a/components/gallery/GalleryItemTabsPanel/GalleryItemActivity.vue b/components/gallery/GalleryItemTabsPanel/GalleryItemActivity.vue
index e0746cd72c..5a93405ca5 100644
--- a/components/gallery/GalleryItemTabsPanel/GalleryItemActivity.vue
+++ b/components/gallery/GalleryItemTabsPanel/GalleryItemActivity.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="gallery-activity-events-wrapper flex flex-col">
-    <div class="events py-5 px-6 flex flex-col">
+  <div class="flex flex-col h-full">
+    <div class="py-5 px-6 flex flex-col border-b">
       <div
-        class="events-filter flex flex-wrap"
+        class="flex flex-wrap gap-x-2.5 gap-y-4 md:gap-x-4"
         data-testid="events-filter"
       >
         <a
@@ -16,16 +16,16 @@
         <label
           v-for="(value, name) in filters"
           :key="name"
-          class="cursor-pointer capitalize events-checkbox-container"
+          class="cursor-pointer capitalize px-5 py-[5px] rounded-[25px] border border-k-shade hover:border-border-color"
+          :class="{ 'bg-k-shade text-black': interactions.includes(value) }"
           :data-testid="name"
-          :class="cssActive(value)"
         >
           <input
             :id="name"
             v-model="interactions"
             type="checkbox"
             :value="value"
-            class="is-hidden"
+            class="hidden"
           >
           <span :for="name">
             {{ $t(`tabs.tabActivity.${value}`) }}
@@ -50,9 +50,7 @@ defineProps<{
 }>()
 
 const defaultInteractions = ['BUY', 'LIST']
-
 const allInteractions = ['MINTNFT', 'BUY', 'LIST', 'SEND', 'CONSUME']
-
 const interactions = ref(defaultInteractions)
 const filters = {
   mints: 'MINTNFT',
@@ -65,51 +63,4 @@ const filters = {
 const checkAll = () => {
   interactions.value = allInteractions
 }
-
-const cssActive = (value) => {
-  return {
-    'events-checkbox-active': interactions.value.find(
-      interaction => interaction === value,
-    ),
-  }
-}
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables.scss';
-
-.gallery-activity-events-wrapper {
-  height: 100%;
-}
-
-.events {
-  @apply border-b;
-
-  &-filter {
-    column-gap: 0.625rem;
-    row-gap: 1rem;
-
-    @include mobile {
-      column-gap: 1rem;
-    }
-  }
-
-  .events-checkbox-container {
-    @apply px-5 py-[5px] rounded-[25px];
-
-    @include ktheme() {
-      border: 1px solid theme('k-shade');
-      &:hover {
-        border-color: theme('border-color');
-      }
-    }
-  }
-
-  .events-checkbox-active {
-    @include ktheme() {
-      background-color: theme('k-shade');
-      color: theme('black');
-    }
-  }
-}
-</style>
diff --git a/components/gallery/UnlockableTag.vue b/components/gallery/UnlockableTag.vue
index 0191448767..7564c0f4b6 100644
--- a/components/gallery/UnlockableTag.vue
+++ b/components/gallery/UnlockableTag.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="unlockable-container flex border py-2 px-6 justify-between">
+  <div class="flex border py-2 px-6 justify-between max-w-[60%] max-lg:max-w-full rounded-[2rem] border-k-shade">
     <NeoTooltip
       :active="!isOwner"
       :label="$t('unlockable.tooltip')"
@@ -23,11 +23,7 @@
         rel="nofollow noopener noreferrer"
         class="text-k-blue hover:text-k-blue-hover"
       >
-        {{
-          isMobile
-            ? $t('unlockable.claimDrop')
-            : $t('unlockable.claimPhysicalDrop')
-        }}
+        {{ isMobile ? $t('unlockable.claimDrop') : $t('unlockable.claimPhysicalDrop') }}
       </a>
       <span v-else>{{ $t('unlockable.ownerOnly') }}</span>
     </div>
@@ -50,20 +46,3 @@ const { unlockableIcon } = useIcon()
 
 const isOwner = computed(() => isCurrentOwner(props.nft?.currentOwner))
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables.scss';
-.unlockable-container {
-  @apply max-w-[60%] rounded-[2rem];
-
-  @include ktheme() {
-    border-color: theme('k-shade');
-  }
-}
-
-@include until-widescreen {
-  .unlockable-container {
-    max-width: 100%;
-  }
-}
-</style>
diff --git a/components/massmint/Massmint.vue b/components/massmint/Massmint.vue
index 451b03ac8e..133f469fdb 100644
--- a/components/massmint/Massmint.vue
+++ b/components/massmint/Massmint.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div>
-      <section class="flex controls">
+      <section class="flex justify-center items-end relative">
         <NeoButton
-          class="left"
+          class="absolute left-10 max-lg:static max-lg:mb-8"
           @click="toOnborading"
         >
           <NeoIcon
@@ -12,7 +12,7 @@
           />
           {{ $t('massmint.backToOnbaording') }}
         </NeoButton>
-        <div class="dropdown-container">
+        <div class="max-lg:self-center">
           <div>
             <p class="mb-4">
               {{ $t('massmint.chooseCollection') }}
@@ -50,7 +50,7 @@
     />
     <div class="mt-6 flex justify-center w-full">
       <NeoButton
-        class="flex flex-grow limit-width"
+        class="flex flex-grow max-w-[45rem]"
         variant="primary"
         size="large"
         :disabled="!mediaLoaded || !hasEnoughBalance"
@@ -288,39 +288,6 @@ watch(urlPrefix, async () => {
 }, { immediate: true })
 </script>
 
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables.scss';
-
-.controls {
-  justify-content: center;
-  align-items: flex-end;
-
-  .left {
-    position: absolute;
-    left: 2.5rem;
-  }
-}
-
-@include touch {
-  .controls {
-    flex-direction: column;
-    gap: 2rem;
-    align-items: flex-start;
-
-    .dropdown-container {
-      align-self: center;
-    }
-    .left {
-      position: unset;
-    }
-  }
-}
-
-.limit-width {
-  max-width: 45rem;
-}
-</style>
-
 <style lang="scss">
 .tab-nft {
   .explore-tabs-button {