Feature/new UI

assets/css/main.css

@@ -16,6 +16,8 @@ body {
     --black: #000000;
     --k-accent-light-3: #ffaee1;
     --steps-active-color: 97 136 231;
+    --bg-card: #0c3f22;
+    --bg-persistent: #0d2919;
   }
 
   :root,
@@ -83,7 +85,7 @@ body {
     --black: #191718;
     --text-color: 255 255 255;
     --text-color-inverse: var(--black);
-    --background-color: #191718;
+    --background-color: #0d2919;
     --background-color-inverse: var(--white);
     --link-hover: #cccccc;
     --border-color: var(--white);

components/dot/button.vue

@@ -40,7 +40,7 @@ const SIZE_CLASSES: Record<BtnSize, string> = {
 
 const VARIANT_CLASSES: Record<BtnVariant, string> = {
   primary: `
-      bg-k-primary hover:bg-background-color-inverse text-black hover:text-text-color-inverse rounded-full
+      bg-k-primary hover:bg-background-color-inverse border-2 border-transparent text-black hover:text-text-color-inverse rounded-full
       disabled:bg-disabled disabled:text-neutral-7 disabled:opacity-50
     `,
   secondary: `
@@ -51,6 +51,14 @@ const VARIANT_CLASSES: Record<BtnVariant, string> = {
     bg-transparent text-background-color-inverse border-2 border-background-color-inverse hover:bg-background-color-inverse hover:text-text-color-inverse rounded-full
     disabled:bg-disabled disabled:text-neutral-7 disabled:opacity-50
   `,
+  "tertiary-light": `
+    bg-transparent text-white border-2 border-white hover:bg-white hover:text-black rounded-full
+    disabled:bg-disabled disabled:text-neutral-7 disabled:opacity-50
+  `,
+  "tertiary-dark": `
+    bg-transparent text-black border-2 border-black hover:bg-black hover:text-white rounded-full
+    disabled:bg-disabled disabled:text-neutral-7 disabled:opacity-50
+  `,
 };
 
 const btnClasses = computed(() => {

components/dot/connect-modal.vue

@@ -1,25 +1,21 @@
 <template>
   <VueFinalModal
     class="flex items-center justify-center"
-    content-class="flex w-3/4 md:w-2/5 flex-col p-4 gap-4 bg-background-color border border-background-color-inverse shadow-text-color  shadow-[4px_4px]"
+    content-class="flex w-3/4 md:w-2/5 flex-col p-6 gap-4 bg-background-color rounded-2xl border border-background-color-inverse"
     overlay-transition="vfm-fade"
     content-transition="vfm-fade"
   >
     <h1 class="text-2xl font-semibold text-text-color">Select account</h1>
     <div class="flex flex-col gap-2">
-      <div class="mb-4 flex flex-col gap-1">
+      <div class="mb-4 flex flex-col gap-3">
         <dot-button
           v-for="account in accountStore.accounts"
           :key="account.address"
           class="flex w-full"
-          :variant="
-            selectedAccount?.address === account.address
-              ? 'primary'
-              : 'secondary'
-          "
+          :variant="selectedAccount?.address === account.address ? 'primary' : 'tertiary'"
           @click="selectedAccount = account"
         >
-          <div class=".5gap-1 flex flex-1 flex-col items-start py-1">
+          <div class="flex flex-1 flex-col items-start gap-1 px-4 py-1">
             <h2 class="font-bold">{{ account.meta.name }}</h2>
             <p class="text-xs">
               {{ addressShortener(account.address, 10, -10) }}
@@ -28,16 +24,8 @@
         </dot-button>
       </div>
       <div class="flex justify-end gap-2">
-        <dot-button variant="secondary" @click="emit('confirm')">
-          Cancel
-        </dot-button>
-        <dot-button
-          :disabled="!selectedAccount"
-          variant="primary"
-          @click="saveAndClose"
-        >
-          Confirm
-        </dot-button>
+        <dot-button variant="tertiary" @click="emit('confirm')"> Cancel </dot-button>
+        <dot-button :disabled="!selectedAccount" variant="primary" @click="saveAndClose"> Confirm </dot-button>
       </div>
     </div>
   </VueFinalModal>

components/dot/qr-scanner-modal.vue

@@ -2,15 +2,13 @@
   <VueFinalModal
     modal-id="qr-scanner-modal"
     class="flex items-center justify-center"
-    content-class="flex w-full h-full md:h-auto max-w-2xl mx-auto flex-col p-4 gap-4 bg-background-color border border-background-color-inverse shadow-text-color  shadow-[4px_4px]"
+    content-class="flex w-full h-full md:h-auto max-w-2xl mx-auto flex-col px-4 py-5 gap-4 bg-background-color rounded-3xl border border-background-color-inverse"
     overlay-transition="vfm-fade"
     content-transition="vfm-fade"
     @opened="onOpened()"
   >
-    <video ref="vid" class="flex-1 object-cover"></video>
-    <dot-button size="medium" variant="secondary" @click="closeModal()">
-      Cancel
-    </dot-button>
+    <video ref="vid" class="flex-1 rounded-xl object-cover"></video>
+    <dot-button size="medium" variant="secondary" @click="closeModal()"> Cancel </dot-button>
   </VueFinalModal>
 </template>
 
@@ -43,8 +41,5 @@ function onOpened() {
 }
 
 const vfm = useVfm();
-
-function closeModal() {
-  vfm.close("qr-scanner-modal");
-}
+const closeModal = () => vfm.close("qr-scanner-modal");
 </script>

components/dot/sign-modal.vue

@@ -0,0 +1,116 @@
+<template>
+  <VueFinalModal
+    modal-id="sign-modal"
+    class="flex items-center justify-center"
+    content-class="flex w-3/4 sm:w-2/3 md:w-1/2 xl:w-1/4 flex-col p-6 gap-4 bg-background-color rounded-2xl border border-background-color-inverse"
+    overlay-transition="vfm-fade"
+    content-transition="vfm-fade"
+  >
+    <div class="flex items-center justify-between pb-1">
+      <h1 class="text-xl font-semibold text-text-color">Confirm creation</h1>
+      <button @click="closeModal()">
+        <Icon name="mdi:close" size="32" class="text-text-color" />
+      </button>
+    </div>
+
+    <hr class="-mx-6" />
+
+    <template v-if="accountStore.hasSelectedAccount">
+      <p class="mt-2 text-text-color opacity-70">Connected as</p>
+
+      <div class="flex items-center gap-3">
+        <div class="h-7 w-7 rounded-full border-2 border-border-color"></div>
+        <p class="text-text-color">{{ currentAccount?.meta.name }}</p>
+      </div>
+    </template>
+
+    <client-only v-else>
+      <dot-connect />
+    </client-only>
+
+    <hr class="my-3" />
+
+    <template v-if="!isSigning">
+      <div class="flex items-center gap-5">
+        <div class="h-20 w-20 rounded-full border-2 border-border-color"></div>
+        <div class="flex flex-col gap-2">
+          <h1 class="text-xl text-text-color">{{ props.name }}</h1>
+          <p class="text-sm text-text-color opacity-70">Network: PolkadotHub</p>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <p class="text-sm text-text-color">Event Start</p>
+        <p class="text-right text-sm text-text-color">{{ props.startDate.toISOString().split("T").at(0) }}</p>
+        <p class="text-sm text-text-color">Event End</p>
+        <p class="text-right text-sm text-text-color">{{ props.endDate.toISOString().split("T").at(0) }}</p>
+        <p class="text-sm text-text-color">Claim Code</p>
+        <p class="text-right text-sm font-bold text-text-color">{{ props.secret }}</p>
+        <p class="text-sm text-text-color">Amount</p>
+        <p class="text-right text-sm font-bold text-text-color">{{ props.quantity }}</p>
+      </div>
+
+      <hr class="-mx-6 my-3" />
+
+      <div class="grid grid-cols-2 gap-3">
+        <p class="text-sm text-text-color">Total Deposit + Fees</p>
+        <p class="text-right text-sm text-text-color">
+          <span class="text-xs text-text-color opacity-60">$0.980</span>
+          <span class="ml-2 font-bold text-text-color">1 DOT</span>
+        </p>
+
+        <button class="col-span-2 flex items-center gap-2" @click="showBreakdown = !showBreakdown">
+          <p class="text-xs text-text-color opacity-50">Breakdown</p>
+          <Icon :name="`mdi:chevron-${showBreakdown ? 'up' : 'down'}`" size="20" class="text-text-color opacity-50" />
+        </button>
+
+        <template v-if="showBreakdown">
+          <p class="text-sm text-text-color">Free Minting Deposit</p>
+          <p class="text-right text-sm text-text-color">24 x 0.04 DOT</p>
+          <p class="text-sm text-text-color">Fees</p>
+          <p class="text-right text-sm text-text-color">0.02 DOT</p>
+        </template>
+      </div>
+
+      <dot-button :disabled="!canSign" variant="primary" size="large" @click="sign()"> Proceed to signing </dot-button>
+    </template>
+
+    <template v-else>
+      <p class="text-text-color">Signing ...</p>
+    </template>
+  </VueFinalModal>
+</template>
+
+<script lang="ts" setup>
+import { VueFinalModal, useVfm } from "vue-final-modal";
+import { useAccountStore } from "~/stores/account";
+
+const props = defineProps<{
+  name: string;
+  image: File;
+  startDate: Date;
+  endDate: Date;
+  quantity: number;
+  secret: string;
+}>();
+
+const accountStore = useAccountStore();
+const currentAccount = computed(() => accountStore.selected);
+
+const canSign = computed(() => accountStore.hasSelectedAccount);
+const isSigning = ref(false);
+
+const showBreakdown = ref(false);
+
+function sign() {
+  // TODO API call or smth
+  isSigning.value = true;
+
+  setTimeout(() => {
+    isSigning.value = false;
+  }, 1000);
+}
+
+const vfm = useVfm();
+const closeModal = () => vfm.close("sign-modal");
+</script>

components/dot/types.ts

@@ -1,3 +1,3 @@
-export type BtnVariant = "primary" | "secondary" | "tertiary";
+export type BtnVariant = "primary" | "secondary" | "tertiary" | "tertiary-light" | "tertiary-dark";
 
 export type BtnSize = "small" | "medium" | "large";

components/layout/nav.vue

@@ -6,7 +6,7 @@
       <span class="bottom"></span>
     </button>
     <transition name="fade">
-      <nav v-if="navOpen">
+      <nav v-if="navOpen" class="backdrop-blur-sm">
         <ul>
           <li v-for="link in links" :key="link.name" class="hover:bg-primary/10 cursor-pointer transition ease-in-out">
             <nuxt-link :to="link.href" @click="closeNav">

layouts/landing.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="app-base" class="relative bg-bg-persistent">
+    <main class="h-full min-h-screen">
+      <slot />
+    </main>
+    <layout-footer />
+  </div>
+</template>

pages/claim/[code].vue

@@ -12,9 +12,9 @@
 
     <div class="flex flex-col space-y-3 self-stretch">
       <template v-if="!claimed">
-        <div class="flex border border-border-color shadow-[4px_4px] shadow-text-color">
+        <div class="flex rounded-full border-2 border-border-color p-2 shadow-text-color">
           <button
-            class="flex-1 py-2 text-text-color"
+            class="flex-1 rounded-full py-2 text-text-color"
             :class="{
               'bg-background-color-inverse text-text-color-inverse': showAddressInput,
             }"
@@ -23,7 +23,7 @@
             Enter address
           </button>
           <button
-            class="flex-1 py-2 text-text-color"
+            class="flex-1 rounded-full py-2 text-text-color"
             :class="{
               'bg-background-color-inverse text-text-color-inverse': !showAddressInput,
             }"
@@ -45,18 +45,24 @@
           </dot-label>
         </client-only>
 
-        <div class="fixed -top-3 left-0 right-0 z-[60] flex h-7">
-          <div
-            class="absolute bottom-0 left-0 top-0 bg-pink-400 transition-all duration-[60000ms] ease-linear"
-            :style="`width: ${isClaiming ? '100%' : '0%'};`"
-          ></div>
-        </div>
-
         <dot-label v-if="claimFailed" :error="true" text="You already claimed this POAP" />
 
         <dot-button :disabled="!canClaim || isClaiming" variant="primary" size="medium" @click="claim">
           Claim
         </dot-button>
+
+        <div
+          class="flex h-10 rounded-full bg-stone-600/15 p-1"
+          :class="{
+            'opacity-100': isClaiming,
+            'opacity-0': !isClaiming,
+          }"
+        >
+          <div
+            class="rounded-full bg-k-primary transition-all duration-[60000ms] ease-linear"
+            :style="`width: ${isClaiming ? '100%' : '0%'};`"
+          ></div>
+        </div>
       </template>
 
       <template v-else>

pages/create/index.vue

@@ -39,7 +39,7 @@
         </div>
       </dot-label>
       <dot-label text="POAP Secret">
-        <dot-text-input placeholder="event2024" />
+        <dot-text-input v-model="secret" placeholder="event2024" :error="secretError" />
       </dot-label>
     </div>
     <dot-button :disabled="!isSubmittable" size="large" submit variant="primary" class="w-full"> Create </dot-button>
@@ -49,6 +49,8 @@
 <script lang="ts" setup>
 import { useField, useForm } from "vee-validate";
 import { toTypedSchema } from "@vee-validate/zod";
+import { useModal } from "vue-final-modal";
+import SignModal from "~/components/dot/sign-modal.vue";
 import * as zod from "zod";
 
 const validationSchema = toTypedSchema(
@@ -62,6 +64,7 @@ const validationSchema = toTypedSchema(
     startDate: zod.date({ message: "Start date is required" }),
     endDate: zod.date({ message: "End date is required" }),
     quantity: zod.number({ message: "Quantity is required" }).positive({ message: "Quantity must be positive" }),
+    secret: zod.string({ message: "Secret is required" }).min(1, { message: "Secret is required" }),
   }),
 );
 
@@ -81,6 +84,7 @@ const localStartDateError = ref<string>("");
 const { value: endDate, errorMessage: endDateError } = useField<Date>("endDate");
 const localEndDateError = ref<string>("");
 const { value: quantity, errorMessage: quantityError } = useField<number>("quantity");
+const { value: secret, errorMessage: secretError } = useField<string>("secret");
 
 // As `refine` doesnt work with `toTypedSchema` we need to do this manually
 watch([startDate, endDate], ([startDate, endDate]) => {
@@ -95,10 +99,25 @@ watch([startDate, endDate], ([startDate, endDate]) => {
 
 const logger = createLogger("CreatePage");
 
-const onSubmit = handleSubmit(({ description, endDate, image, quantity, startDate, name, externalUrl }) => {
+const onSubmit = handleSubmit(({ description, endDate, image, quantity, startDate, name, externalUrl, secret }) => {
   if (localStartDateError.value || localEndDateError.value) {
     return;
   }
+
+  const { open } = useModal({
+    component: SignModal,
+    attrs: {
+      name,
+      startDate,
+      endDate,
+      quantity,
+      image,
+      secret,
+    },
+  });
+
+  open();
+
   logger.success({
     description,
     endDate,
@@ -122,3 +141,11 @@ const isSubmittable = computed(
     !Object.keys(errors.value).length,
 );
 </script>
+
+<style>
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  /* https://gist.github.com/evilmarty/3021338 */
+  filter: invert(60%) sepia(100%) saturate(1854%) hue-rotate(100deg) brightness(80%) contrast(106%);
+}
+</style>