@visualizevalue/mint-app-base 0.0.7 → 0.1.0

package/app/components/Form/Group.vue

@@ -18,6 +18,7 @@ fieldset {
   max-width: -webkit-fill-available;
   display: flex;
   flex-wrap: wrap;
+  position: relative;
 
   > * {
     width: 100cqw;
@@ -49,20 +50,34 @@ fieldset {
 
   :deep(> .form-item),
   :deep(> .button) {
+    z-index: 1;
+
+    &:--highlight,
+    &:has(.input:hover),
+    &:has(.input:focus) {
+      z-index: 2;
+    }
+
     + .form-item,
     + .button {
-      border-top-color: transparent;
+      margin-top: calc(-1 * var(--border-width));
 
+      &:--highlight,
+      &:has(.input:hover),
       &:has(.input:focus) {
-        border-top-color: var(--border-color-light);
+        border-top-color: var(--button-border-color-highlight);
       }
 
       @container (min-width: 30rem) {
         border-top-color: var(--border-color);
-        border-left-color: transparent;
+        margin-top: 0;
+        margin-left: calc(-1 * var(--border-width));
 
+        &:--highlight,
+        &:has(.input:hover),
         &:has(.input:focus) {
-          border-left-color: var(--border-color-light);
+          border-top-color: var(--button-border-color-highlight);
+          border-left-color: var(--button-border-color-highlight);
         }
       }
     }

package/app/components/Form/SelectFile.vue

@@ -21,7 +21,7 @@
 import { useFileDialog } from '@vueuse/core'
 
 const emit = defineEmits<{
-  change: [file: File|null]
+  change: [file: File|null|undefined]
 }>()
 
 const { files, open, reset, onChange } = useFileDialog({

package/app/components/Icon.vue

@@ -1,37 +1,41 @@
 <template>
   <i v-if="ICONS[type]" class="icon">
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="ICONS[type]"></svg>
+    {{ symbol }}
   </i>
-  <FeatherIcon v-else :type="type" class="icon" />
 </template>
 
 <script setup>
-import FeatherIcon from 'vue-feather'
-
 const props = defineProps({
   type: String,
 })
 
 const ICONS = {
-  'x.com': `<path d="M13.5222 10.7749L19.4785 4H18.0671L12.8952 9.88256L8.76437 4H4L10.2466 12.8955L4 20H5.41155L10.8732 13.7878L15.2356 20H20L13.5222 10.7749Z" fill="currentColor"/><path d="M11.5889 12.9738L10.956 12.0881M12.1522 10.728L12.7851 11.6137L18.0677 19.0075M13.5222 10.7749L19.4785 4H18.0671L12.8952 9.88256L8.76437 4H4L10.2466 12.8955L4 20H5.41155L10.8732 13.7878L15.2356 20H20L13.5222 10.7749Z" stroke="currentColor"/>`,
-  vv: `<path d="M11 14.0646C11 15.0625 10.6833 15.8796 10.05 16.5162L6.6 20H4.4L0.949997 16.5162C0.316667 15.8796 0 15.0625 0 14.0646V5H2.575V13.9614C2.575 14.3915 2.68333 14.7183 2.9 14.942L5.525 17.6775L8.1 14.942C8.31669 14.7183 8.425 14.3915 8.425 13.9614V5H11V14.0646Z" fill="currentColor"/><path d="M24 14.0646C24 15.0625 23.6833 15.8796 23.05 16.5162L19.6 20H17.4L13.95 16.5162C13.3167 15.8796 13 15.0625 13 14.0646V5H15.575V13.9614C15.575 14.3915 15.6833 14.7183 15.9 14.942L18.525 17.6775L21.1 14.942C21.3167 14.7183 21.425 14.3915 21.425 13.9614V5H24V14.0646Z" fill="currentColor"/>`,
-  check: `<path fill-rule="evenodd" clip-rule="evenodd" d="M15.36 3.88585C15.0088 3.30969 14.5152 2.83358 13.9268 2.50331C13.3383 2.17304 12.6748 1.99971 12 2C10.577 2 9.33 2.75494 8.64 3.88685C7.98396 3.72742 7.29792 3.73945 6.64787 3.92179C5.99782 4.10413 5.40562 4.45064 4.92823 4.928C4.45083 5.40536 4.10429 5.99751 3.92194 6.64751C3.73959 7.29751 3.72756 7.98349 3.887 8.63948C3.31061 8.99055 2.83426 9.48402 2.50379 10.0724C2.17331 10.6608 1.99982 11.3244 2 11.9992C2 13.4221 2.755 14.668 3.886 15.359C3.72655 16.0149 3.73859 16.7009 3.92094 17.3509C4.10329 18.0009 4.44983 18.5931 4.92723 19.0704C5.40462 19.5478 5.99682 19.8943 6.64687 20.0766C7.29692 20.259 7.98296 20.271 8.639 20.1116C9.1267 20.913 9.88486 21.5137 10.7766 21.8053C11.6684 22.0968 12.635 22.06 13.502 21.7015C14.2737 21.3815 14.9241 20.8252 15.36 20.1126C16.0161 20.2721 16.7023 20.2601 17.3525 20.0777C18.0026 19.8953 18.5949 19.5487 19.0723 19.0712C19.5498 18.5937 19.8963 18.0014 20.0785 17.3513C20.2608 16.7011 20.2727 16.015 20.113 15.359C20.6894 15.0079 21.1657 14.5144 21.4962 13.926C21.8267 13.3376 22.0002 12.6741 22 11.9992C22.0002 11.3244 21.8267 10.6608 21.4962 10.0724C21.1657 9.48402 20.6894 8.99055 20.113 8.63948C20.2723 7.98354 20.2601 7.29765 20.0776 6.64778C19.8951 5.99791 19.5485 5.40592 19.071 4.92877C18.594 4.45131 18.0022 4.10459 17.3525 3.92194C16.7027 3.7393 16.0169 3.72687 15.361 3.88585H15.36ZM11.402 15.5979L15.964 8.75447C16.53 7.90854 15.213 7.03061 14.648 7.87654L10.622 13.9191L9.251 12.5512C8.534 11.8292 7.415 12.9471 8.135 13.6671L10.305 15.8169C10.3913 15.8749 10.4883 15.9152 10.5903 15.9356C10.6923 15.9559 10.7973 15.9558 10.8993 15.9354C11.0013 15.9149 11.0982 15.8745 11.1845 15.8164C11.2708 15.7583 11.3447 15.6837 11.402 15.5969V15.5979Z" fill="currentColor"/>`,
+  home: '🜂',
+  trash: '✕',
+  times: '✕',
+  close: '✕',
+  folder: '✏',
+  edit: '✏',
+  check: '✓',
+  add: '+',
+  image: '+',
+  link: '↗︎',
+  user: '☻',
+  loader: 'ⴵ',
+  'chevron-up': '↑',
+  'chevron-down': '↓',
+  'chevron-right': '→',
+  withdraw: 'Ξ',
 }
+
+const symbol = computed(() => ICONS[props.type])
 </script>
 
 <style scoped>
 .icon {
-  display: inline-block;
+  display: inline-flex;
   width: var(--size-4);
   height: var(--size-4);
-
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.spin {
-    animation: spin 5s infinite linear;
-  }
+  align-items: center;
 }
 </style>

package/app/components/Image.client.vue

@@ -68,10 +68,6 @@ article.image {
   padding-bottom: 100%;
   display: flex;
 
-  &.bordered {
-    box-shadow: var(--border-shadow);
-  }
-
   .loader {
     position: absolute;
     top: 0;

package/app/components/Loading.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="loader">
-    <span class="spinner"></span>
     <span v-if="txt" class="text">{{ txt }}</span>
   </div>
 </template>
@@ -26,8 +25,8 @@ const { txt } = defineProps({
   .text {
     text-transform: var(--text-transform-ui);
     color: var(--muted);
-    font-family: var(--font-family-ui);
-    font-weight: var(--font-weight-bold);
+    font-family: var(--ui-font-family);
+    font-weight: var(--ui-font-weight);
   }
 
   &:not(.inline) {
@@ -40,40 +39,5 @@ const { txt } = defineProps({
     gap: var(--size-1);
     margin-left: var(--size-1);
   }
-
-  &.large {
-    font-size: var(--font-size-xl);
-
-    .spinner {
-      border-width: 4px;
-    }
-  }
-
-  &.simple {
-    .text {
-      display: none;
-    }
-  }
-
-  .spinner {
-    position: relative;
-    display: inline-block;
-    width: 0.75em;
-    height: 0.75em;
-    border-radius: 50%;
-    border: 2px solid var(--gray-z-6);
-    border-right-color: var(--gray-z-3);
-    flex-shrink: 0;
-    animation: spin infinite linear 1s;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
 }
 </style>

package/app/components/MintGasPricePopover.client.vue

@@ -2,7 +2,7 @@
   <Popover id="about-gas">
     <template #trigger><MintGasPrice :mint-count="2" /></template>
     <template #content>
-      <div class="minimal-prose">
+      <div class="prose">
         <h1>Mint Pricing</h1>
         <p>Artifacts are priced based on the ethereum network fees at the time of collecting.</p>
         <p>Network fees (Gas fees) are an essential component of of securing and running decentralized blockchains.</p>
@@ -65,5 +65,5 @@
       margin-left: auto;
     }
   }
-
 </style>
+

package/app/components/MintToken.vue

@@ -25,7 +25,7 @@
         },
         action: {
           confirm: 'Mint',
-          error: 'Retry',
+          error: 'Mint',
           complete: 'OK',
         },
       },

package/app/components/Modal.vue

@@ -1,6 +1,6 @@
 <template>
-  <DialogFrame class="modal" ref="dialog">
-    <button v-if="xClose" class="close" @click="$emit('close')"><Icon type="x" /></button>
+  <DialogFrame class="modal" :class="class" ref="dialog">
+    <button v-if="xClose" class="close" @click="$emit('close')"><Icon type="close" /></button>
 
     <slot />
   </DialogFrame>
@@ -9,6 +9,7 @@
 <script setup>
 const props = defineProps({
   open: Boolean,
+  class: String,
   xClose: {
     type: Boolean,
     default: true,

package/app/components/Popover.client.vue

@@ -31,12 +31,12 @@ const trigger = ref()
 const popover = ref()
 
 const { width: windowWidth } = useWindowSize()
-const { width: dialogWidth } = useElementSize(popover, {}, { box: 'border-box' })
+const { width: dialogWidth } = useElementSize(popover, undefined, { box: 'border-box' })
 const { x: targetX, y: targetY, width: targetWidth, height: targetHeight } = useElementBounding(trigger)
 const targetCenterX = computed(() => targetX.value + targetWidth.value / 2)
 const adjustmentX = computed(() => {
   const popoverLeft = targetCenterX.value - (dialogWidth.value / 2)
-  const overflow = parseInt(windowWidth.value - (popoverLeft + dialogWidth.value) - 29)
+  const overflow = parseInt(`${windowWidth.value - (popoverLeft + dialogWidth.value) - 29}`)
   return overflow < 0 ? overflow : 0
 })
 
@@ -73,7 +73,7 @@ const popoverArrowPosition = computed(() => {
 
   &:popover-open {
     opacity: 1;
-    transform: translateY(var(--spacer));
+    transform: translateY(var(--spacer-sm));
   }
 
   .arrow {
@@ -96,24 +96,4 @@ const popoverArrowPosition = computed(() => {
     transform: translateY(var(--spacer-lg));
   }
 }
-
-/* BACKDROP */
-/* [popover]::backdrop {
-  background-color: var(--background-0);
-  transition:
-    display 0.7s allow-discrete,
-    overlay 0.7s allow-discrete,
-    background-color 0.7s;
-}
-
-[popover]:popover-open::backdrop {
-  background-color: var(--background-semi);
-  backdrop-filter: var(--blur);
-}
-
-@starting-style {
-  [popover]:popover-open::backdrop {
-    background-color: var(--background-0);
-  }
-} */
 </style>

package/app/components/Profile/Header.client.vue

@@ -10,24 +10,12 @@
     </h1>
     <p v-if="artist?.description">{{ artist.description }}</p>
 
-    <ul v-if="hasTags">
-      <Button v-if="validateURI(artist.url)" :to="validateURI(artist.url)" class="small">
-        <Icon type="globe" />
-        <span>{{ getMainDomain(artist.url) }}</span>
-      </Button>
-      <Button v-if="artist.email" :to="`mailto:${artist.email}`" class="small">
-        <Icon type="mail" />
-        <span>{{ artist.email }}</span>
-      </Button>
-      <Button v-if="artist.twitter" :to="`https://x.com/${artist.twitter}`" class="small">
-        <Icon type="x.com" />
-        <span>{{ artist.twitter }}</span>
-      </Button>
-      <Button v-if="artist.github" :to="`https://github.com/${artist.github}`" class="small">
-        <Icon type="github" />
-        <span>{{ artist.github }}</span>
-      </Button>
-    </ul>
+    <Actions v-if="hasTags">
+      <ButtonProfileWebsite :profile="artist" />
+      <ButtonProfileEmail :profile="artist" />
+      <ButtonProfileTwitter :profile="artist" />
+      <ButtonProfileGithub :profile="artist" />
+    </Actions>
   </header>
 </template>
 
@@ -56,20 +44,15 @@ const hasTags = computed(() => artist.value.url ||
 header {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   gap: var(--spacer);
 
   img {
     width: var(--size-9);
     height: var(--size-9);
-    border-radius: 50%;
-    border: var(--border);
   }
 
   h1 {
     cursor: pointer;
-    text-align: center;
 
     > * {
       display: block;
@@ -80,17 +63,5 @@ header {
       font-size: var(--font-xs);
     }
   }
-
-  p {
-    color: var(--muted);
-    text-align: center;
-  }
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacer-sm);
-    justify-content: center;
-  }
 }
 </style>

package/app/components/Token/Detail.client.vue

@@ -22,11 +22,11 @@
     >
       <section class="details">
         <header class="title">
-          <h1>{{ token.name }} <span class="muted-light">#{{ token.tokenId }}</span></h1>
-          <p v-if="token.description" class="muted-light">
+          <h1>{{ token.name }} <small>#{{ token.tokenId }}</small></h1>
+          <p v-if="token.description">
             <ExpandableText :text="token.description" :length="95" expand-text="Read More" />
           </p>
-          <p class="muted-light">
+          <p v-if="collection" class="artist">
             By <NuxtLink :to="{ name: 'id', params: { id: collection.owner } }">{{ store.displayName(collection.owner) }}</NuxtLink>
           </p>
         </header>
@@ -47,8 +47,8 @@
 
         <div class="mint-status">
           <p v-if="mintOpen">{{ blocksRemaining }} blocks remaining</p>
-          <p v-else-if="currentBlock" class="muted-light">Closed at block {{ token.untilBlock }}</p>
-          <p class="muted-light" v-if="ownedBalance">You own {{ ownedBalance }} {{ pluralize('token', Number(ownedBalance)) }}</p>
+          <p v-else-if="currentBlock">Closed at block {{ token.untilBlock }}</p>
+          <p v-if="ownedBalance">You own {{ ownedBalance }} {{ pluralize('token', Number(ownedBalance)) }}</p>
         </div>
 
         <TokenMintTimeline :token="token" :collection="collection" class="network-mints" />
@@ -79,12 +79,17 @@ const ownedBalance = computed(() => collection.value && store.tokenBalance(colle
     display: grid;
     grid-auto-rows: min-content;
     padding: 0 !important;
+    border-top: var(--border);
 
     @media (--md) {
       height: calc(100dvh - var(--navbar-height));
-      grid-template-columns: 60% 1fr;
+      grid-template-columns: 50% 1fr;
       grid-auto-rows: auto;
     }
+
+    @media (--lg) {
+      grid-template-columns: 60% 1fr;
+    }
   }
 
   .artifact {
@@ -92,12 +97,11 @@ const ownedBalance = computed(() => collection.value && store.tokenBalance(colle
     --padding-top: 0;
     --padding-bottom: 0;
     --width: 100cqw;
-    /* --height: calc(100cqh - var(--padding-top) - var(--padding-bottom)); */
     --height: 100%;
     --dimension: min(100cqw, 100cqh);
 
     @media (--md) {
-      --width: 60cqw;
+      --width: 50cqw;
       --height: calc(100cqh - var(--navbar-height));
       --padding-top: var(--spacer-lg);
       --padding-x: var(--spacer-lg);
@@ -105,12 +109,13 @@ const ownedBalance = computed(() => collection.value && store.tokenBalance(colle
       --padding-bottom: var(--spacer-lg);
 
       --dimension: min(
-        calc(60cqw - var(--padding-x)*2),
+        calc(var(--width) - var(--padding-x)*2),
         calc(100cqh - var(--padding-top) - var(--padding-bottom))
       );
     }
 
     @media (--lg) {
+      --width: 60cqw;
       --padding-top: var(--spacer-xl);
       --padding-x: var(--spacer-xl);
       --padding-bottom: calc(var(--spacer-xl) + var(--spacer));
@@ -159,11 +164,15 @@ const ownedBalance = computed(() => collection.value && store.tokenBalance(colle
       z-index: 100;
       display: grid;
       gap: var(--spacer-sm);
-      background: var(--background-semi);
+      background: var(--card-background);
       backdrop-filter: var(--blur);
 
       h1 {
         font-size: var(--font-lg);
+
+        small {
+          color: var(--muted);
+        }
       }
 
       @media (--md) {

package/app/components/Token/MintTimeline.client.vue

@@ -1,30 +1,28 @@
 <template>
-  <section>
+  <section class="token-mint-timeline">
     <h1>Mint Timeline</h1>
 
-    <div v-if="currentBlock" class="table">
+    <div v-if="currentBlock" class="token-mint-timeline-items">
       <TokenMintTimelineItem
         v-for="mint of mints"
         :mint="mint"
         :key="mint.tx"
         :block="currentBlock"
       />
-      <div v-if="! loading || mints.length">
-        <span>
-          <Account :address="collection.owner" />
-        </span>
+      <TokenMintTimelineItem v-if="! loading || mints.length">
+        <Account :address="collection.owner" class="account" />
 
-        <span class="right">1<span class="muted-light">×</span></span>
-        <span class="right">Artist Mint</span>
+        <span class="amount">1<span>×</span></span>
+        <span class="price">Artist Mint</span>
 
-        <span class="right"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - (token.untilBlock - 7200n)" /></span>
+        <span class="time-ago"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - (token.untilBlock - 7200n)" /></span>
 
-        <span class="right muted-light">
+        <span class="links">
           <NuxtLink :to="`${config.public.blockExplorer}/nft/${token.collection}/${token.tokenId}`" target="_blank">
             <Icon type="link" />
           </NuxtLink>
         </span>
-      </div>
+      </TokenMintTimelineItem>
     </div>
 
     <Loading v-if="loading || ! currentBlock" txt="Mint History..." />
@@ -62,9 +60,9 @@ watch(currentBlock, () => state.fetchTokenMints(token))
 </script>
 
 <style scoped>
-section {
-  padding-top: var(--spacer-lg) !important;
-  padding-bottom: var(--spacer-lg) !important;
+.token-mint-timeline {
+  padding-top: var(--spacer-lg);
+  padding-bottom: var(--spacer-lg);
   container-type: inline-size;
 }
 
@@ -73,38 +71,11 @@ h1 {
   font-size: var(--font-base);
   border-bottom: var(--border);
   padding: 0 0 var(--spacer-sm);
-  margin: 0 0 var(--spacer-lg);
+  margin: 0 0 var(--spacer);
 }
 
-.table {
+.token-mint-timeline-items {
   display: grid;
   gap: var(--spacer);
-
-  :deep(> div) {
-    display: grid;
-    gap: var(--spacer);
-
-    .right {
-      text-align: right;
-    }
-
-    span {
-      white-space: nowrap;
-
-      &:nth-child(3) {
-        display: none;
-
-        @container (min-width: 30rem) {
-          display: inline;
-        }
-      }
-    }
-
-    grid-template-columns: 6rem 3rem 1fr 3rem;
-
-    @container (min-width: 30rem) {
-      grid-template-columns: 6rem 3rem 1fr 6rem 1rem;
-    }
-  }
 }
 </style>

package/app/components/Token/MintTimelineItem.vue

@@ -1,20 +1,20 @@
 <template>
-  <div>
-    <span>
-      <Account :address="mint.address" />
-    </span>
+  <div class="token-mint-timeline-item">
+    <slot>
+      <Account :address="mint.address" class="account" />
 
-    <span class="right">{{ mint.amount.toString() }}<span class="muted-light">×</span></span>
+      <span class="amount">{{ mint.amount.toString() }}<span>×</span></span>
 
-    <span class="right">{{ formattedPrice.value }} {{ formattedPrice.format }}</span>
+      <span class="price">{{ formattedPrice.value }} {{ formattedPrice.format }}</span>
 
-    <span class="right"><BlocksTimeAgo :blocks="block - mint.block" /></span>
+      <span class="time-ago"><BlocksTimeAgo :blocks="block - mint.block" /></span>
 
-    <span class="right muted-light">
-      <NuxtLink :to="`${config.public.blockExplorer}/tx/${mint.tx}`" target="_blank">
-        <Icon type="link" />
-      </NuxtLink>
-    </span>
+      <span class="links">
+        <NuxtLink :to="`${config.public.blockExplorer}/tx/${mint.tx}`" target="_blank">
+          <Icon type="link" />
+        </NuxtLink>
+      </span>
+    </slot>
   </div>
 </template>
 
@@ -29,5 +29,42 @@ const props = defineProps({
 const formattedPrice = computed(() => customFormatEther(props.mint.price))
 </script>
 
-<style scoped>
+<style>
+  .token-mint-timeline-item {
+    display: grid;
+    gap: 0 var(--spacer-sm);
+    grid-template-columns: 1fr 1fr;
+
+    .account {
+      grid-column: span 2;
+    }
+
+    .price,
+    .links {
+      text-align: right;
+    }
+
+    span {
+      white-space: nowrap;
+
+      &:not(.account) {
+        color: var(--muted);
+        font-size: var(--font-sm);
+      }
+    }
+
+    @container (min-width: 24rem) {
+      grid-template-columns: 6rem 3rem 1fr 1fr 2rem;
+      gap: var(--spacer);
+
+      .account {
+        grid-column: 1;
+      }
+
+      .time-ago,
+      .amount {
+        text-align: right;
+      }
+    }
+  }
 </style>

package/app/components/Token/OverviewCard.vue

@@ -16,13 +16,13 @@
       <div class="content">
         <header>
           <h1>
-            <span>{{ token.name }} <span class="muted">#{{ token.tokenId }}</span></span>
-            <span v-if="token.description">{{ shortString(token.description, 60, 30) }}</span>
+            <span>{{ token.name }} <span class="token-id">#{{ token.tokenId }}</span></span>
+            <span v-if="token.description" class="description">{{ shortString(token.description, 60, 30) }}</span>
           </h1>
-          <p v-if="mintOpen" class="muted">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
-          <p v-else class="muted">Closed at block {{ token.untilBlock }}</p>
+          <p v-if="mintOpen" class="closes-in">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
+          <p v-else class="closed-at">Closed at block {{ token.untilBlock }}</p>
         </header>
-        <Image :src="token.artifact" :alt="token.name" class="bordered" />
+        <Image :src="token.artifact" :alt="token.name" />
         <CardLink :to="{
           name: 'id-collection-tokenId',
           params: { id: collection.owner, collection: token.collection, tokenId: `${token.tokenId}` }
@@ -69,19 +69,11 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
   }
 
   .token-overview-card {
-    padding: var(--spacer-xl) var(--spacer) !important;
-
-    /* Tokens should be at min the screen height. */
-    &:not(:first-of-type) {
-      min-height: min(60rem, calc(100dvh - 2*var(--navbar-height)));
-
-      @media (--md) {
-        min-height: min(60rem, calc(100dvh - var(--navbar-height)));
-      }
-    }
+    padding: var(--spacer-xl) var(--spacer);
+    min-height: min(60rem, 100dvh);
 
     > p {
-      color: var(--muted-light);
+      color: var(--);
       font-size: var(--font-sm);
       text-align: left;
     }
@@ -108,7 +100,8 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
 
     h1 {
       span:last-of-type:not(:first-child) {
-        color: var(--muted-light);
+        color: var(--muted);
+        font-size: var(--font-sm);
         white-space: wrap;
         display: none;