@visualizevalue/mint-app-base 0.1.3 → 0.1.4

package/app/assets/styles/forms.css

@@ -5,6 +5,7 @@ textarea,
 select {
   width: 100%;
   font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
   font-weight: var(--ui-font-weight);
   text-transform: var(--ui-text-transform);
   transition: all var(--speed);
@@ -62,12 +63,6 @@ select {
   &::-ms-input-placeholder {
     color: var(--border-color-light);
   }
-
-  &.small {
-    min-height: 0;
-    font-size: var(--font-sm);
-    padding: calc(var(--size-1) + var(--size-0)) var(--size-3);
-  }
 }
 
 .form-item {

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

@@ -1,17 +1,18 @@
 :root {
 
-  --ui-font-family: var(--font-family);
-  --ui-font-weight: var(--font-weight);
-  --ui-text-transform: var(--text-transform);
+  --ui-font-family:         var(--font-family);
+  --ui-font-size:           var(--font-sm);
+  --ui-font-weight:         var(--font-weight);
+  --ui-text-transform:      var(--text-transform);
+  --ui-letter-spacing:      var(--letter-spacing);
+  --ui-line-height:         var(--line-height);
 
-  --ui-placeholder-color: var(--muted);
-  --ui-color: var(--primary);
-  --ui-color-visited: var(--primary);
-  --ui-letter-spacing: var(--letter-spacing);
-  --ui-line-height: var(--line-height);
+  --ui-color:               var(--primary);
+  --ui-placeholder-color:   var(--muted);
+  --ui-color-visited:       var(--primary);
 
-  --ui-padding-y: var(--spacer-sm);
-  --ui-padding-x: var(--spacer-sm);
+  --ui-padding-y:           var(--spacer-sm);
+  --ui-padding-x:           var(--spacer);
 
 }
 

package/app/components/AppHeader.vue

@@ -6,7 +6,13 @@
       <MintGasPricePopover />
 
       <Connect v-if="! isConnected" />
-      <NuxtLink v-else :to="{ name: 'profile-address', params: { address: address?.toLowerCase() } }">
+      <NuxtLink v-else
+        :to="{
+          name: 'profile-address',
+          params: { address: address?.toLowerCase() }
+        }"
+        class="account"
+      >
         <Account :address="address" />
       </NuxtLink>
     </ClientOnly>
@@ -71,6 +77,13 @@ header {
       display: block;
     }
   }
+
+  .account {
+    font-family: var(--ui-font-family);
+    font-size: var(--ui-font-size);
+    letter-spacing: var(--ui-letter-spacing);
+    text-transform: var(--ui-text-transform);
+  }
 }
 </style>
 

package/app/components/Breadcrumbs.vue

@@ -15,9 +15,15 @@ defineProps({
 
 <style>
 :root {
-  --breadcrumb-nav-color: var(--muted);
+  --breadcrumb-nav-color:        var(--muted);
   --breadcrumb-nav-active-color: var(--muted);
-  --breadcrumb-separator-color: var(--muted);
+  --breadcrumb-separator-color:  var(--muted);
+
+  --breadcrumb-font-family:      var(--ui-font-family);
+  --breadcrumb-font-size:        var(--ui-font-size);
+  --breadcrumb-font-font-weight: var(--ui-font-weight);
+  --breadcrumb-text-transform:   var(--ui-text-transform);
+  --breadcrumb-letter-spacing:   var(--ui-letter-spacing);
 }
 </style>
 
@@ -27,6 +33,11 @@ defineProps({
   align-items: center;
   justify-content: center;
   gap: var(--spacer-sm);
+  font-family: var(--breadcrumb-font-family);
+  font-weight: var(--breadcrumb-font-weight);
+  text-transform: var(--breadcrumb-text-transform);
+  font-size: var(--breadcrumb-font-size);
+  letter-spacing: var(--breadcrumb-letter-spacing);
 
   > span {
     white-space: nowrap;

package/app/components/Button/AddCollection.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button :to="{ name: `id-create`, params: { id } }" class="small">
+  <Button :to="{ name: `id-create`, params: { id } }">
     <Icon type="add"/>
     <span>Collection</span>
   </Button>

package/app/components/Button/EditProfile.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button :to="`https://app.ens.domains/${address}`" class="small">
+  <Button :to="`https://app.ens.domains/${address}`">
     <Icon type="edit" />
     <span>Edit Profile</span>
   </Button>

package/app/components/Button/Profile/Discord.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
+  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)">
     <Icon type="website" />
     {{ getMainDomain(profile.url) }}
   </Button>

package/app/components/Button/Profile/Email.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="profile.email" :to="`mailto:${profile.email}`" class="small">
+  <Button v-if="profile.email" :to="`mailto:${profile.email}`">
     <Icon type="email" />
     <span>{{ profile.email }}</span>
   </Button>

package/app/components/Button/Profile/Github.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="profile.github" :to="`https://github.com/${profile.github}`" class="small">
+  <Button v-if="profile.github" :to="`https://github.com/${profile.github}`">
     <Icon type="github" />
     <span>{{ profile.github }}</span>
   </Button>

package/app/components/Button/Profile/Twitter.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`" class="small">
+  <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`">
     <Icon type="twitter" />
     <span>{{ profile.twitter }}</span>
   </Button>

package/app/components/Button/Profile/Website.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
+  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)">
     <Icon type="website" />
     <span>{{ getMainDomain(profile.url) }}</span>
   </Button>

package/app/components/Button.vue

@@ -5,7 +5,7 @@
 
 <script setup>
 defineProps({
-  to: [String,Object],
+  to: [String, Object],
   target: {
     type: String,
     default: '_self',
@@ -23,7 +23,7 @@ defineProps({
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: var(--ui-padding-x);
+  gap: calc(var(--ui-padding-x) / 2);
   letter-spacing: var(--ui-letter-spacing);
   line-height: var(--ui-line-height);
 
@@ -55,13 +55,6 @@ defineProps({
     height: 100%;
   }
 
-  &.small,
-  &.small > * {
-    font-size: var(--font-sm);
-    min-height: 0;
-    gap: calc(var(--ui-padding-x) / 2);
-  }
-
   &.link {
     display: inline-flex;
     align-self: baseline;

package/app/components/Collection/Intro.vue

@@ -30,7 +30,6 @@
         <Button
           :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
           id="mint-new"
-          class="small"
         >
           <Icon type="add" />
           <span>Mint New</span>

package/app/components/Collection/Withdraw.client.vue

@@ -19,7 +19,7 @@
     },
   }" skip-confirmation auto-close-success @complete="onComplete">
     <template #start="{ start }">
-      <Button @click="start" class="small">
+      <Button @click="start">
         <Icon type="withdraw" />
         <span>Withdraw ({{ balance.value }} {{ balance.format }})</span>
       </Button>

package/app/components/Icon.vue

@@ -34,8 +34,10 @@ const symbol = computed(() => ICONS[props.type])
 <style scoped>
 .icon {
   display: inline-flex;
-  width: var(--size-4);
-  height: var(--size-4);
+  width: 1em;
+  height: 1em;
   align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 </style>

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

@@ -12,7 +12,7 @@
 
       <form @submit.stop.prevent="mint" class="card">
         <Actions>
-          <select class="select small choose-mode" v-model="mode">
+          <select class="select choose-mode" v-model="mode">
             <option value="file" title="Data URI Encoded File Upload">DATA-URI</option>
             <option value="ipfs" title="Interplanetary File System">IPFS</option>
             <option value="http" title="Hypertext Transfer Protocol" disabled>HTTP</option>

package/package.json

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