@visualizevalue/mint-app-base 0.1.11 → 0.1.12

package/app/assets/styles/cards.css

@@ -1,13 +1,31 @@
 .card {
   display: grid;
   gap: var(--spacer);
-  border: var(--border);
+  background: var(--card-background);
   height: 100%;
   padding: var(--spacer);
 
+  &:not(.borderless) {
+    border: var(--card-border);
+    border-radius: var(--card-border-radius);
+
+    &:has(> .card-link) {
+      &:has(> .card-link:hover),
+      &:has(> .card-link:focus) {
+        border-color: var(--card-border-color-highlight);
+      }
+    }
+  }
+
   &.borderless {
     padding: 0;
-    border: 0;
+  }
+
+  &:has(> .card-link) {
+    &:has(> .card-link:hover),
+    &:has(> .card-link:focus) {
+      background: var(--card-background-highlight);
+    }
   }
 
   > * {
@@ -15,6 +33,6 @@
 
     place-self: center;
     &:first-child { place-self: flex-start; }
-    &:last-child { place-self: flex-end; }
+    &:last-child  { place-self: flex-end;   }
   }
 }

package/app/assets/styles/variables/components/app-header.css

@@ -0,0 +1,10 @@
+:root {
+
+  --app-header-font-family:      var(--ui-font-family);
+  --app-header-font-size:        var(--ui-font-size);
+  --app-header-font-weight:      var(--ui-font-weight);
+  --app-header-text-transform:   var(--ui-text-transform);
+  --app-header-letter-spacing:   var(--ui-letter-spacing);
+
+}
+

package/app/assets/styles/variables/components/breadcrumbs.css

@@ -0,0 +1,20 @@
+:root {
+
+  --breadcrumb-color:           var(--muted);
+  --breadcrumb-active-color:    var(--color);
+  --breadcrumb-separator-color: var(--muted);
+
+  --breadcrumb-font-family:      var(--app-header-font-family);
+  --breadcrumb-font-size:        var(--app-header-font-size);
+  --breadcrumb-font-font-weight: var(--app-header-font-weight);
+  --breadcrumb-text-transform:   var(--app-header-text-transform);
+  --breadcrumb-letter-spacing:   var(--app-header-letter-spacing);
+
+  --breadcrumb-background:             transparent;
+  --breadcrumb-background-highlight:   transparent;
+  --breadcrumb-border:                 0;
+  --breadcrumb-border-color-highlight: transparent;
+  --breadcrumb-border-radius:          var(--border-radius);
+
+}
+

package/app/assets/styles/variables/components/buttons.css

@@ -0,0 +1,10 @@
+:root {
+
+  --button-border: var(--border);
+  --button-border-radius: var(--border-radius);
+  --button-background: var(--background);
+  --button-background-highlight: var(--background);
+  --button-border-color-highlight: var(--primary);
+
+}
+

package/app/assets/styles/variables/components/cards.css

@@ -0,0 +1,10 @@
+:root {
+
+  --card-border: var(--border);
+  --card-border-radius: var(--border-radius);
+  --card-background: var(--background);
+  --card-background-highlight: var(--background);
+  --card-border-color-highlight: var(--primary);
+
+}
+

package/app/assets/styles/variables/components/dialogs.css

@@ -0,0 +1,6 @@
+:root {
+
+  --backdrop-background-color: transparent;
+
+}
+

package/app/assets/styles/variables/components.css

@@ -1,18 +1,5 @@
-:root {
-
-  --card-border: var(--border);
-  --card-border-radius: var(--border-radius);
-  --card-background: var(--background);
-  --card-background-highlight: var(--background);
-  --card-border-color-highlight: var(--primary);
-
-  --button-border: var(--border);
-  --button-border-radius: var(--border-radius);
-  --button-background: var(--background);
-  --button-background-highlight: var(--background);
-  --button-border-color-highlight: var(--primary);
-
-  --backdrop-background-color: transparent;
-
-}
+@import "./components/breadcrumbs.css";
+@import "./components/buttons.css";
+@import "./components/cards.css";
+@import "./components/dialogs.css";
 

package/app/components/Account.client.vue

@@ -5,16 +5,21 @@
 </template>
 
 <script setup>
-import { useEnsName } from '@wagmi/vue'
+import { useAccount, useEnsName } from '@wagmi/vue'
 
 const props = defineProps(['address'])
 
 const address = computed(() => props.address?.value || props.address)
 
+const { address: currentAddress } = useAccount()
+const isCurrent = computed(() => currentAddress.value?.toLowerCase() === address.value.toLowerCase())
+
 const { data: ens } = useEnsName({
   address,
   chainId: 1,
 })
 
-const display = computed(() => ens.value || shortAddress(address.value))
+const display = computed(() => ens.value || (
+  isCurrent.value ? `You` : shortAddress(address.value)
+))
 </script>

package/app/components/Actions.vue

@@ -16,9 +16,5 @@ menu {
   &:empty {
     display: none;
   }
-
-  &.centered {
-    justify-content: center;
-  }
 }
 </style>

package/app/components/AppHeader.vue

@@ -6,15 +6,15 @@
       <MintGasPricePopover />
 
       <Connect v-if="! isConnected" />
-      <NuxtLink v-else
+      <Button v-else
         :to="{
           name: 'profile-address',
           params: { address: address?.toLowerCase() }
         }"
-        class="account"
+        class="account link"
       >
         <Account :address="address" />
-      </NuxtLink>
+      </Button>
     </ClientOnly>
   </header>
 </template>
@@ -41,16 +41,6 @@ const breadcrumbs = computed(() => {
 })
 </script>
 
-<style>
-:root {
-  --app-header-font-family:      var(--ui-font-family);
-  --app-header-font-size:        var(--ui-font-size);
-  --app-header-font-weight:      var(--ui-font-weight);
-  --app-header-text-transform:   var(--ui-text-transform);
-  --app-header-letter-spacing:   var(--ui-letter-spacing);
-}
-</style>
-
 <style scoped>
 header {
   height: var(--navbar-height);
@@ -66,12 +56,7 @@ header {
   text-transform: var(--app-header-text-transform);
   letter-spacing: var(--app-header-letter-spacing);
 
-  @media (--md) {
-    gap: var(--spacer-lg);
-  }
-
   :deep(> .breadcrumb) {
-    overflow: hidden;
     text-overflow: ellipsis;
     justify-content: flex-start;
     white-space: nowrap;

package/app/components/Breadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="breadcrumb">
+  <div class="breadcrumbs">
     <span v-for="item in items">
       <NuxtLink v-if="item.to" :to="item.to">{{ item.text }}</NuxtLink>
       <template v-else>{{ item.text }}</template>
@@ -13,22 +13,8 @@ defineProps({
 })
 </script>
 
-<style>
-:root {
-  --breadcrumb-nav-color:        var(--muted);
-  --breadcrumb-nav-active-color: var(--color);
-  --breadcrumb-separator-color:  var(--muted);
-
-  --breadcrumb-font-family:      var(--app-header-font-family);
-  --breadcrumb-font-size:        var(--app-header-font-size);
-  --breadcrumb-font-font-weight: var(--app-header-font-weight);
-  --breadcrumb-text-transform:   var(--app-header-text-transform);
-  --breadcrumb-letter-spacing:   var(--app-header-letter-spacing);
-}
-</style>
-
 <style scoped>
-.breadcrumb {
+.breadcrumbs {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -41,6 +27,7 @@ defineProps({
 
   > span {
     white-space: nowrap;
+    align-self: baseline;
 
     &:has(+ span > a) {
       display: none;
@@ -52,17 +39,23 @@ defineProps({
   }
 
   > span > a {
-    color: var(--breadcrumb-nav-color);
+    background: var(--breadcrumb-background);
+    color: var(--breadcrumb-color);
+    border: var(--breadcrumb-border);
+    border-radius: var(--breadcrumb-border-radius);
     transition: all var(--speed);
 
     &.router-link-active-exact,
     &:--highlight {
-      color: var(--breadcrumb-nav-active-color);
+      color: var(--breadcrumb-active-color);
+      background: var(--breadcrumb-background-highlight);
+      border-color: var(--breadcrumb-border-color-highlight);
     }
   }
 
   > span:not(:last-child):after {
     content: '/';
+    align-self: baseline;
     color: var(--breadcrumb-separator-color);
     margin-left: var(--spacer-sm);
   }

package/app/components/Button.vue

@@ -56,17 +56,13 @@ defineProps({
   }
 
   &.link {
-    display: inline-flex;
-    align-self: baseline;
-    align-items: baseline;
-    height: inherit;
-    margin: 0 !important;
-    padding: 0 calc(var(--ui-padding-x)/2) !important;
     border: 0;
+    background: transparent;
     line-height: inherit;
     color: var(--muted);
 
     &:--highlight {
+      background: var(--button-background-highlight);
       color: var(--color);
     }
 
@@ -75,5 +71,14 @@ defineProps({
       height: inherit;
     }
   }
+
+  &.inline {
+    display: inline-flex;
+    align-self: baseline;
+    align-items: baseline;
+    height: inherit;
+    margin: 0 !important;
+    padding: 0 calc(var(--ui-padding-x)/2) !important;
+  }
 }
 </style>

package/app/components/Collection/Intro.vue

@@ -88,6 +88,8 @@ header.collection-intro {
     }
 
     h1 {
+      font-size: var(--font-lg);
+
       small {
         color: var(--);
         font-size: var(--font-base);

package/app/components/CollectionsOverview.client.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="collections.length" class="collections borderless">
+  <section v-if="collections.length" class="collections-overview">
     <slot name="before" :collections="collections" />
 
     <CollectionOverviewCard
@@ -8,7 +8,7 @@
       :collection="collection"
     />
   </section>
-  <section v-else-if="! loading" class="centered borderless">
+  <section v-else-if="! loading" class="collections-overview-empty">
     <template v-if="isMe">
       <p>It looks like you haven't deployed any collections.</p>
       <div>
@@ -50,9 +50,14 @@ if (store.forArtist(id.value).length !== collections.length) {
 </script>
 
 <style scoped>
-.collections {
+.collections-overview {
   display: grid;
   gap: var(--spacer-lg);
-  padding: var(--spacer-lg) var(--spacer) !important;
+  padding: var(--spacer-lg) var(--spacer);
+}
+
+.collections-overview-empty {
+  display: grid;
+  gap: var(--spacer);
 }
 </style>

package/app/components/ExpandableText.vue

@@ -6,7 +6,7 @@
     :expanded="expanded"
     :toggle="toggle"
   >
-    <Button v-if="wasShortened" @click="toggle" class="link">
+    <Button v-if="wasShortened" @click="toggle" class="link inline">
       <Icon :type="expanded ? 'chevron-up' : 'chevron-right'" />
       <span>{{ expanded ? collapseText : expandText }}</span>
     </Button>

package/app/components/Icon.vue

@@ -16,18 +16,18 @@ const ICONS = {
   'chevron-right': '➡️',
   'chevron-up': '⬆️',
   'close': '✖️',
-  'discord': '＠',
+  'discord': '🤖',
   'edit': '📝',
   'email': '📧',
   'folder': '📁',
-  'github': '＠',
+  'github': '💻',
   'home': '🏠',
   'image': '🏞️',
   'link': '🔗',
   'loader': '⏳',
   'times': '✖️',
   'trash': '🗑️',
-  'twitter': '＠',
+  'twitter': '🐦',
   'user': '👤',
   'website': '🌐',
   'withdraw': '💵',

package/app/components/Modal.vue

@@ -35,5 +35,3 @@ watch(() => props.open, async () => {
 })
 </script>
 
-<style>
-</style>

package/app/components/Popover.client.vue

@@ -1,10 +1,10 @@
 <template>
-  <button
+  <Button
     :popovertarget="id"
-    class="gas"
+    class="gas link"
     ref="trigger"
     @mouseenter="() => popover.showPopover()"
-  ><slot name="trigger" /></button>
+  ><slot name="trigger" /></Button>
 
   <Teleport to="body">
     <div
@@ -89,7 +89,6 @@ const popoverArrowPosition = computed(() => {
   }
 }
 
-
 @starting-style {
   [popover]:popover-open {
     opacity: 0;

package/app/components/Token/MintTimelineItem.vue

@@ -53,6 +53,13 @@ const formattedPrice = computed(() => customFormatEther(props.mint.price))
       }
     }
 
+    a,
+    button {
+      &:--highlight {
+        color: var(--color);
+      }
+    }
+
     @container (min-width: 24rem) {
       grid-template-columns: 6rem 3rem 1fr 1fr 2rem;
       gap: var(--spacer);

package/app/components/TransactionFlow.vue

@@ -22,7 +22,7 @@
       <span>View on Etherscan</span>
     </Button>
 
-    <Actions v-if="step === 'chain'" class="centered">
+    <Actions v-if="step === 'chain'">
       <Button @click="cancel" class="secondary">Cancel</Button>
     </Actions>
     <Actions v-if="step === 'confirm' || step === 'error'">

package/app/pages/[id]/[collection]/index.vue

@@ -5,8 +5,8 @@
     <TokenOverviewCard v-for="token of tokens" :key="token.tokenId" :token="token" />
 
     <Loading v-if="loading" />
-    <div v-if="! tokens.length && !loading" class="centered">
-      <p class="muted">No tokens yet</p>
+    <div v-if="! tokens.length && !loading" >
+      <p>No tokens yet</p>
     </div>
   </PageFrame>
 </template>

package/app/pages/[id]/create.vue

@@ -62,7 +62,7 @@
               <FormInput v-model="description" placeholder="Description" />
             </div>
 
-            <Actions class="borderless">
+            <Actions>
               <Button type="submit">
                 Deploy
               </Button>

package/app/pages/profile/[address]/index.vue

@@ -10,13 +10,20 @@
       </template>
     </ProfileHeader>
 
-    <section v-if="artistScope" class="centered muted">
+    <section v-if="artistScope">
       <p>Collected art from <Account :address="artistScope" /> will be indexed on profiles soon...</p>
-      <p v-if="isMyArtistScope">Manage Your collections <NuxtLink :to="{ name: 'id', params: { id: address } }">here</NuxtLink>.</p>
-      <p v-else>You can mint your own art on <NuxtLink :to="config.public.platformUrl" target="_blank">{{ getMainDomain(config.public.platformUrl) }}</NuxtLink>.</p>
+      <p v-if="isMyArtistScope">
+        Manage Your collections <NuxtLink :to="{ name: 'id', params: { id: address } }">here</NuxtLink>.
+      </p>
+      <p v-else>
+        You can mint your own art on
+        <NuxtLink :to="config.public.platformUrl" target="_blank">
+          {{ getMainDomain(config.public.platformUrl) }}
+        </NuxtLink>.
+      </p>
     </section>
-    <section v-else class="centered">
-      <p class="muted">Collected art and curation options for your profile will come soon...</p>
+    <section v-else>
+      <p>Collected art and curation options for your profile will come soon...</p>
     </section>
   </PageFrame>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {