Merge branch 'main' into issue-offer-reuse-nft

assets/styles/global.scss

@@ -175,17 +175,8 @@ hr {
 }
 
 // global table css
-
-.table {
-  @apply bg-background-color text-text-color;
-
-  &.is-hoverable tbody tr:not(.is-selected):hover {
-    @apply bg-background-color;
-  }
-
-  th {
-    @apply text-text-color bg-background-color;
-  }
+table th {
+  @apply text-text-color #{!important};
 }
 
 .fluid-padding-left {

components/base/BaseTokenForm.vue

@@ -83,9 +83,9 @@
 <script setup lang="ts">
 import { NeoField } from '@kodadot1/brick'
 import { useVModel } from '@vueuse/core'
-import { MediaType } from '../rmrk/types'
-import { resolveMedia } from '../rmrk/utils'
 import type { BaseMintedCollection as MintedCollection } from './types'
+import { resolveMedia, MediaType } from '@/utils/gallery/media'
+
 import Auth from '@/components/shared/Auth.vue'
 import MetadataUpload from '@/components/shared/DropUpload.vue'
 import BasicInput from '@/components/shared/form/BasicInput.vue'

components/base/MediaItem.vue

@@ -78,8 +78,7 @@ import {
   NeoVideoMedia,
 } from '@kodadot1/brick'
 import AudioMedia from '@/components/shared/AudioMedia.vue'
-import { getMimeType, resolveMedia } from '@/utils/gallery/media'
-import { MediaType } from '@/components/rmrk/types'
+import { getMimeType, resolveMedia, MediaType } from '@/utils/gallery/media'
 
 const props = withDefaults(
   defineProps<{

components/collection/activity/events/eventRow/EventRowTablet.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="mb-6 flex flex-col gap-10px">
-    <div class="flex height-70px line-height-1">
+  <div class="mb-6 flex flex-col gap-[10px]">
+    <div class="flex h-[70px] leading-[1]">
       <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
         <div class="mr-5">
           <NeoAvatar
@@ -12,9 +12,9 @@
           />
         </div>
       </nuxt-link>
-      <div class="flex flex-col justify-center gap-10px flex-grow">
+      <div class="flex flex-col justify-center gap-[10px] flex-grow">
         <nuxt-link
-          class="is-ellipsis inline-block mobile-fixed-width"
+          class="truncate inline-block max-sm:w-[240px]"
           :to="`/${urlPrefix}/gallery/${event.nft.id}`"
         >
           <span class="font-bold">
@@ -23,7 +23,7 @@
         </nuxt-link>
 
         <div
-          class="border text-xs justify-center flex items-center fixed-width fixed-height"
+          class="border text-xs justify-center flex items-center w-[66px] h-[22px]"
           :class="getInteractionColor(event.interaction)"
         >
           {{ interactionName }}
@@ -43,15 +43,15 @@
       </div>
     </div>
 
-    <div class="flex gap flex-direction">
+    <div class="flex gap-4 max-[400px]:flex-col max-[400px]:gap-0">
       <div
         v-if="fromAddress !== blank"
         class="flex items-center"
       >
         <span class="text-xs mr-3">{{ $t('activity.event.from') }}:</span>
         <nuxt-link
           :to="`/${urlPrefix}/u/${fromAddress}`"
-          class="text-k-blue hover:text-k-blue-hover is-ellipsis"
+          class="text-k-blue hover:text-k-blue-hover truncate"
         >
           <IdentityIndex
             ref="identity"
@@ -69,7 +69,7 @@
         <span class="text-xs mr-3">{{ $t('activity.event.to') }}:</span>
         <nuxt-link
           :to="`/${urlPrefix}/u/${toAddress}`"
-          class="text-k-blue hover:text-k-blue-hover is-ellipsis"
+          class="text-k-blue hover:text-k-blue-hover truncate"
         >
           <IdentityIndex
             ref="identity"
@@ -126,43 +126,3 @@ const getAvatar = async () => {
   }
 }
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-$breakpoint: 400px;
-
-.fixed-width {
-  width: 66px;
-}
-.mobile-fixed-width {
-  @include mobile {
-    width: 240px;
-  }
-}
-.fixed-height {
-  height: 22px;
-}
-.height-70px {
-  height: 70px;
-}
-.line-height-1 {
-  line-height: 1;
-}
-
-.gap-10px {
-  gap: 10px;
-}
-
-.gap {
-  gap: 1rem;
-  @include until($breakpoint) {
-    gap: 0;
-  }
-}
-
-.flex-direction {
-  @include until($breakpoint) {
-    flex-direction: column;
-  }
-}
-</style>

components/collection/unlockable/UnlockableCollectionBanner.vue

@@ -1,26 +1,26 @@
 <template>
   <div
-    class="collection-banner"
+    class="relative bg-no-repeat bg-cover lg:h-[560px]"
     :style="bannerBackgroundStyles"
   >
-    <div class="collection-banner-shadow" />
+    <div class="absolute inset-0 bg-gradient-to-b from-black/[0.06] to-black/20" />
 
     <section class="h-[368px] lg:h-full">
       <div
         class="relative w-full mx-auto px-[1.25rem] md:px-[2.5rem] min-[1440px]:max-w-[1440px] h-full flex justify-end items-start flex-col md:justify-between md:items-end md:flex-row"
       >
         <div class="flex flex-col items-start max-md:mb-8 md:h-[212px]">
-          <div class="collection-banner-avatar">
+          <div class="p-2.5 border bg-background-color shadow-primary border-border-color">
             <img
               v-if="image"
               :src="image"
               alt="avatar"
-              class="object-cover"
+              class="object-cover w-[5.5rem] h-[5.5rem] border block"
               height="88px"
             >
           </div>
           <h1
-            class="collection-banner-name mt-5 text-3xl md:text-4xl font-bold text-text-color-inverse"
+            class="mt-5 text-3xl md:text-4xl font-bold text-text-color-inverse text-shadow-border"
           >
             {{ title }}
           </h1>
@@ -80,58 +80,3 @@ useHead({
   meta,
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.collection-banner {
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-
-  @include desktop {
-    height: 560px;
-  }
-
-  &-shadow {
-    background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2));
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &-avatar {
-    padding: 0.625rem;
-
-    @include ktheme() {
-      border: 1px solid theme('border-color');
-      background-color: theme('background-color');
-      box-shadow: theme('primary-shadow');
-    }
-
-    img {
-      display: block;
-      width: 5.5rem;
-      height: 5.5rem;
-      border: 1px solid;
-    }
-  }
-
-  &-name {
-    @include ktheme() {
-      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>

components/collection/unlockable/UnlockableCollectionInfo.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex justify-between mobile-flex-direction-column">
-    <div class="flex flex-col flex-grow max-width">
+  <div class="flex justify-between max-sm:flex-col">
+    <div class="flex flex-col flex-grow max-w-full">
       <div class="flex justify-between mb-2">
         <div class="mr-2 font-bold text-xl mb-1">
           About Collection
         </div>
       </div>
-      <div class="overflow-wrap">
+      <div class="break-words">
         <Markdown
           :source="visibleDescription"
           data-testid="drops-text-description-container"
@@ -33,7 +33,7 @@
       </div>
     </div>
     <div>
-      <div class="flex gap mobile-flex-direction-column mobile-no-gap" />
+      <div class="flex gap-4 max-sm:flex-col max-sm:gap-0" />
     </div>
   </div>
 </template>
@@ -69,30 +69,3 @@ const visibleDescription = computed(() => {
   )
 })
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-.max-width {
-  max-width: 100%;
-}
-
-.gap {
-  gap: 1rem;
-}
-
-@include mobile {
-  .mobile-flex-direction-column {
-    flex-direction: column;
-  }
-
-  .mobile-no-gap {
-    gap: 0;
-  }
-  .max-width {
-    max-width: 100%;
-  }
-  .overflow-wrap {
-    overflow-wrap: break-word;
-  }
-}
-</style>