Merge pull request #7208 from kodadot/refactor/unify-create-nft-page

components/bsx/Create/RoyaltyForm.vue

@@ -29,7 +29,7 @@ const { accountId } = useAuth()
 
 const props = defineProps({
   amount: {
-    type: Number,
+    type: [Number, String],
     required: true,
   },
   address: {

components/create/CreateCollection.vue

@@ -5,7 +5,7 @@
       class="is-half"
       :class="{ column: classColumn }"
       @submit.prevent="createCollection">
-      <h1 class="title is-size-3">
+      <h1 class="title is-size-3 mb-7">
         {{ $t('mint.collection.create') }}
       </h1>
 
@@ -28,7 +28,10 @@
         required
         data-testid="collection-name"
         :error="!name">
-        <NeoInput v-model="name" required />
+        <NeoInput
+          v-model="name"
+          required
+          :placeholder="$t('mint.collection.name.placeholder')" />
       </NeoField>
 
       <!-- collection description -->
@@ -40,6 +43,7 @@
           has-counter
           maxlength="1000"
           height="10rem"
+          :placeholder="$t('mint.collection.description.placeholder')"
           data-testid="collection-desc" />
       </NeoField>
 
@@ -52,7 +56,7 @@
         <div class="w-full">
           <div class="is-flex is-justify-content-space-between">
             <p>{{ $t('mint.unlimited') }}</p>
-            <NeoSwitch v-model="unlimited" />
+            <NeoSwitch v-model="unlimited" position="left" />
           </div>
           <NeoInput
             v-if="!unlimited"
@@ -141,6 +145,7 @@
                 v-dompurify-html="
                   $t('mint.requiredDeposit', [
                     `${totalCollectionDeposit} ${chainSymbol}`,
+                    'collection',
                   ])
                 " />
               <a
@@ -276,37 +281,4 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-@import '@/styles/abstracts/variables';
-
-.o-field:not(:last-child) {
-  margin-bottom: 2rem;
-}
-
-.column {
-  max-width: 36rem;
-  padding: 4rem;
-
-  @include desktop() {
-    @include ktheme() {
-      background-color: theme('background-color');
-      box-shadow: theme('primary-shadow');
-    }
-  }
-
-  @include touch() {
-    padding: 0 1rem;
-    box-shadow: none !important;
-  }
-}
-
-@include desktop() {
-  .columns {
-    padding: 5.25rem 0;
-
-    @include ktheme() {
-      background-color: theme('k-primaryLight');
-    }
-  }
-}
-</style>
+<style lang="scss" scoped src="@/styles/pages/create.scss"></style>

components/create/CreateLanding.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="container is-flex is-align-items-center is-justify-content-center is-flex-direction-column">
+    <div>
+      <h1 class="title is-size-2 mb-7">{{ $t('mint.landing.heading') }}</h1>
+
+      <div v-if="route.query?.select !== 'nft'" class="pack">
+        <nuxt-link class="pack-box" to="/create/collection">
+          <div class="pack-content">
+            <NeoIcon icon="image-polaroid" custom-size="fa-3x" />
+            <div class="pack-content-text">
+              <p class="is-size-4 has-text-weight-bold">Collection</p>
+              <p>{{ $t('mint.landing.collection') }}</p>
+            </div>
+          </div>
+        </nuxt-link>
+        <button
+          class="pack-box"
+          @click="router.push({ query: { select: 'nft' } })">
+          <div class="pack-content">
+            <NeoIcon icon="gem" custom-size="fa-3x" />
+            <div class="pack-content-text">
+              <p class="is-size-4 has-text-weight-bold">NFT</p>
+              <p>{{ $t('mint.landing.nft') }}</p>
+            </div>
+          </div>
+        </button>
+      </div>
+
+      <div v-else class="pack">
+        <nuxt-link class="pack-box" to="/create/nft">
+          <div class="pack-content">
+            <NeoIcon icon="image" custom-size="fa-3x" />
+            <div class="pack-content-text">
+              <p class="is-size-4 has-text-weight-bold">
+                {{ $t('mint.landing.singleNft') }}
+              </p>
+              <p>{{ $t('mint.landing.singleNftDesc') }}</p>
+            </div>
+          </div>
+        </nuxt-link>
+        <nuxt-link class="pack-box" :to="`/${urlPrefix}/massmint`">
+          <div class="pack-content">
+            <NeoIcon icon="photo-film" custom-size="fa-3x" />
+            <div class="pack-content-text">
+              <p class="is-size-4 has-text-weight-bold">
+                {{ $t('mint.landing.massNft') }}
+              </p>
+              <p>{{ $t('mint.landing.massNftDesc') }}</p>
+            </div>
+          </div>
+        </nuxt-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+
+const { urlPrefix } = usePrefix()
+const route = useRoute()
+const router = useRouter()
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.container {
+  height: calc(100vh - 5.25rem); // 5.25rem = header height
+  margin: 0;
+  max-width: 100% !important;
+
+  @include ktheme() {
+    background-color: theme('k-primaryLight');
+  }
+
+  @include touch() {
+    height: 100vh;
+  }
+
+  @include mobile() {
+    padding: 0 2rem;
+
+    .title {
+      font-size: 2rem !important;
+    }
+  }
+}
+
+.pack {
+  display: flex;
+  gap: 1.5rem;
+
+  &-box {
+    cursor: pointer;
+    font-size: unset;
+    padding: 4rem 2rem;
+
+    @include ktheme() {
+      background-color: theme('background-color');
+      border: 1px solid theme('card-border-color');
+      color: theme('text-color');
+
+      &:hover {
+        color: theme('text-color');
+        border-color: theme('text-color');
+      }
+    }
+  }
+
+  &-content {
+    text-align: center;
+    width: 14rem;
+
+    &-text {
+      margin-top: 2rem;
+    }
+  }
+
+  @include mobile() {
+    flex-direction: column;
+    width: 100%;
+
+    &-box {
+      padding: 2rem;
+    }
+
+    &-content {
+      display: flex;
+      gap: 2rem;
+      text-align: left;
+      width: 100%;
+
+      &-text {
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>