Merge pull request #34 from Apillon/staging

Staging

frontend/assets/styles/_typography.css

@@ -2,8 +2,12 @@
 h1,
 .h1 {
   @apply font-sans font-bold;
-  font-size: 1.75rem;
-  line-height: 1.43;
+  font-size: 1.5rem;
+  line-height: 1.3;
+
+  @screen md {
+    font-size: 2rem;
+  }
 }
 
 /* Headline 2 */

frontend/components/general/Btn.vue

@@ -91,7 +91,6 @@ const btnClass = computed(() => {
       'w-full': props.type !== 'link' && props.size === 'large',
       'text-primary underline': props.type === 'link',
       'font-bold': props.type !== 'link',
-      '!text-white': props.type === 'secondary',
       'pointer-events-none pointer-default': props.disabled || props.loading,
       'opacity-60': props.disabled,
       'hover-bounce': props.type !== 'link' && props.type !== 'builders',

frontend/components/parts/form/SighUp.vue

@@ -95,10 +95,15 @@ function onCaptchaVerify(token: string) {
 
     <div class="flex pb-6 space-x-2">
       <div class="my-auto">
-        <input v-model="formData.termsAndConditions" type="checkbox" class="w-[18px] h-[18px]">
+        <n-checkbox v-model:checked="formData.termsAndConditions" size="medium" />
       </div>
-
-      <p>I have read and agree to <u class="cursor-pointer" @click="modalTermsAndConditionsVisible = true"><strong>Terms and Conditions and Privacy Policy.</strong></u></p>
+
+      <p>
+        I have read and agree to
+        <u class="cursor-pointer" @click="modalTermsAndConditionsVisible = true"
+          ><strong>Terms and Conditions and Privacy Policy.</strong></u
+        >
+      </p>
     </div>
 
     <!-- Hcaptcha -->
@@ -132,7 +137,7 @@ function onCaptchaVerify(token: string) {
       @close="() => (modalTermsAndConditionsVisible = false)"
       @update:show="modalTermsAndConditionsVisible = false"
     >
-      <TermsAndConditions @close="() => (modalTermsAndConditionsVisible = false)"/>
+      <TermsAndConditions @close="() => (modalTermsAndConditionsVisible = false)" />
     </modal>
   </n-form>
 </template>

frontend/lib/config/naive.ts

@@ -160,6 +160,21 @@ export const NaiveTheme: GlobalThemeOverrides = {
     paddingSmall: '32px',
     paddingMedium: '16px 64px 16px 64px',
   },
+  Checkbox: {
+    border: `2px solid ${colors.black}`,
+    borderChecked: `2px solid ${colors.white}`,
+    borderFocus: `2px solid ${colors.black}`,
+    borderRadius: '4px',
+    color: colors.bg.dark,
+    sizeSmall: '16px',
+    sizeMedium: '20px',
+    sizeLarge: '24px',
+    fontSizeMedium: '14px',
+    fontSizeLarge: '14px',
+    textColor: colors.white,
+    colorChecked: colors.white,
+    boxShadowFocus: 'none',
+  },
   DataTable: {
     borderColor: colors.bg.lighter,
     tdColor: colors.bg.DEFAULT,
@@ -215,9 +230,9 @@ export const NaiveTheme: GlobalThemeOverrides = {
     labelTextColor: colors.white,
   },
   Input: {
-    border: `1px solid ${colors.info}`,
-    borderFocus: `1px solid ${colors.white}`,
-    borderHover: `1px solid ${colors.info}`,
+    border: `1px solid ${colors.black}`,
+    borderFocus: `1px solid ${colors.black}`,
+    borderHover: `1px solid ${colors.black}`,
     borderError: `1px solid ${colors.konference}`,
     borderFocusError: `1px solid ${colors.konference}`,
     borderHoverError: `1px solid ${colors.konference}`,
@@ -226,9 +241,9 @@ export const NaiveTheme: GlobalThemeOverrides = {
     boxShadowFocus: 'none',
     boxShadowFocusError: 'none',
     boxShadowFocusWarning: 'none',
-    caretColor: colors.white,
+    caretColor: colors.black,
     clearSize: '24px',
-    color: colors.bg.light,
+    color: colors.bg.dark,
     colorDisabled: colors.bg.dark,
     colorFocus: colors.bg.light,
     colorFocusError: colors.bg.light,
@@ -246,8 +261,8 @@ export const NaiveTheme: GlobalThemeOverrides = {
     paddingSmall: '12px',
     paddingMedium: '20px',
     paddingLarge: '25px',
-    placeholderColor: colors.info,
-    textColor: colors.white,
+    placeholderColor: colors.black,
+    textColor: colors.black,
     textColorDisabled: colors.bodyDark,
   },
   Layout: {

frontend/pages/index.vue

@@ -9,22 +9,31 @@ useHead({
 </script>
 
 <template>
-  <div class="my-10 flex flex-col gap-x-12 gap-y-8 md:flex-row lg:my-14">
-    <div class="max-w-2xl md:pr-12">
-      <span class="mb-2 inline-block text-xs font-bold uppercase tracking-[0.2em] text-info"
-        >The Shape of MENT to Come</span
-      >
+  <div class="my-10 flex flex-col gap-x-12 gap-y-8 md:flex-row lg:my-14 max-w-4xl mx-auto">
+    <div class="max-w-md w-full lg:w-1/2">
+      <span class="mb-2 inline-block text-xs font-bold uppercase tracking-[0.2em]">
+        The Shape of MENT to Come
+      </span>
       <h1>Sign up and win one of 200 MENT tokens</h1>
 
-      <p class="body-lg mb-6">
+      <p class="body-lg">
         By signing up, you’ll be in the game for the hottest perks in the form of MENT token
       </p>
       <div class="max-w-sm">
         <FormSighUp btn-text="Sign up" />
       </div>
     </div>
-    <div v-if="isMd" class="flex-cc relative w-full">
+    <div v-if="isMd" class="flex-cc relative min-w-[20rem] w-full lg:w-1/2">
       <img :src="SuperRareJpg" class="mx-auto" width="461" height="461" alt="Super rare NFT" />
+      <Btn
+        class="!text-black mt-3"
+        size="large"
+        type="secondary"
+        href="https://moonbeans.io/collections/ment"
+      >
+        View MENT Token collection
+        <NuxtIcon name="arrow" class="absolute right-6 icon-auto" />
+      </Btn>
     </div>
   </div>
 </template>

frontend/pages/share.vue

@@ -66,6 +66,7 @@ function transactionLink(transactionHash?: string | null): string {
       </div>
       <div class="mt-4 text-center">
         <p class="mb-4">{{ metadata.description }}</p>
+        <!-- Import NFT -->
         <Btn
           v-if="query?.nftId && nftId"
           size="large"
@@ -74,6 +75,30 @@ function transactionLink(transactionHash?: string | null): string {
         >
           Import NFT to wallet
         </Btn>
+
+        <!-- Moonbeans -->
+        <Btn
+          v-if="query?.nftId && nftId"
+          class="!text-black mb-3"
+          size="large"
+          type="secondary"
+          :href="`https://moonbeans.io/item/ment/${nftId}`"
+        >
+          View your MENT Token
+          <NuxtIcon name="arrow" class="absolute right-6 icon-auto" />
+        </Btn>
+        <Btn
+          v-else
+          class="!text-black mb-3"
+          size="large"
+          type="secondary"
+          href="https://moonbeans.io/collections/ment"
+        >
+          View MENT Token collection
+          <NuxtIcon name="arrow" class="absolute right-6 icon-auto" />
+        </Btn>
+
+        <!-- Transaction -->
         <a
           v-if="query?.txHash && txHash"
           :href="transactionLink(txHash)"