improve

TODO

@@ -1 +1,4 @@
-- Email login (remove/fix github login)
+- Email login (remove/fix github login)
+
+- Remove github login
+

dashboard/components/pricing/PricingCard.vue

@@ -1,82 +0,0 @@
-<script lang="ts" setup>
-
-export type PricingCardProp = {
-    title: string,
-    cost: string,
-    features: string[],
-    desc: string,
-    active: boolean,
-    planId: number,
-    isDowngrade: boolean
-}
-
-const props = defineProps<{ data: PricingCardProp }>();
-
-const activeProject = useActiveProject();
-
-async function onUpgradeClick() {
-    const res = await $fetch<string>(`/api/pay/${activeProject.value?._id.toString()}/create`, {
-        ...signHeaders({ 'content-type': 'application/json' }),
-        method: 'POST',
-        body: JSON.stringify({ planId: props.data.planId })
-    })
-    if (!res) alert('Something went wrong');
-    window.open(res);
-}
-
-</script>
-
-<template>
-    <div class="p-6 bg-[#303030] rounded-xl pricing-card flex flex-col">
-
-        <div class="flex flex-col">
-            <div class="text-[1.1rem] font-semibold mb-4">
-                {{ data.title }}
-            </div>
-            <div class="flex gap-1 items-end mb-2">
-                <div class="text-[1.1rem] font-semibold">
-                    €{{ data.cost }}
-                </div>
-                <div class="text-text-sub text-[.9rem] mb-[.15rem]">
-                    per month
-                </div>
-            </div>
-            <div v-if="data.active" class="text-[1rem] bg-[#1f1f22] rounded-md py-2 text-center">
-                Current active plan
-            </div>
-            <div @click="onUpgradeClick()" v-if="!data.active && !data.isDowngrade"
-                class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
-                Upgrade
-            </div>
-            <div @click="onUpgradeClick()" v-if="!data.active && data.isDowngrade"
-                class="cursor-pointer text-[1rem] font-semibold bg-[#1f1f22] text-red-400 rounded-md py-2 text-center">
-                Downgrade
-            </div>
-        </div>
-
-        <div class="bg-gray-400 h-[1px] w-full my-4"></div>
-
-        <div class="flex flex-col gap-1 grow">
-            <div class="flex gap-2 items-center" v-for="feature of data.features">
-                <i class="fas fa-check"></i>
-                <div>
-                    {{ feature }}
-                </div>
-            </div>
-
-        </div>
-
-        <div class="bg-gray-400 h-[1px] w-full my-4"></div>
-
-        <div class="text-text-sub text-[.9rem] h-[20%]">
-            {{ data.desc }}
-        </div>
-    </div>
-</template>
-
-
-<style scoped lang="scss">
-.pricing-card * {
-    font-family: "Poppins";
-}
-</style>

dashboard/components/pricing/PricingCardGeneric.vue

@@ -15,7 +15,7 @@ export type PricingCardProp = {
 
 const props = defineProps<{ datas: PricingCardProp[], defaultIndex?: number }>();
 
-const activeProject = useActiveProject();
+const { project } = useProject();
 
 const currentIndex = ref<number>(props.defaultIndex || 0);
 
@@ -24,8 +24,13 @@ const data = computed(() => {
 })
 
 async function onUpgradeClick() {
-    const res = await $fetch<string>(`/api/pay/${activeProject.value?._id.toString()}/create`, {
+    const res = await $fetch<string>(`/api/pay/create`, {
-        ...signHeaders({ 'content-type': 'application/json' }),
+        headers: useComputedHeaders({
+            useSnapshotDates: false,
+            custom: {
+                'content-type': 'application/json'
+            }
+        }).value,
         method: 'POST',
         body: JSON.stringify({ planId: data.value.planId })
     })
@@ -67,7 +72,10 @@ async function onUpgradeClick() {
                 }" :min="0" :max="datas.length - 1" v-model="currentIndex">
                 </URange>
             </div>
-            <div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
+            <div :class="{ '!text-[.8rem] !text-lyx-text-darker': sub.includes('€') }" class="poppins text-[.9rem]"
+                v-for="sub of data.subs">
+                {{ sub }}
+            </div>
         </div>
 
         <div class="sep bg-[#262626] h-[1px] my-8"></div>
@@ -82,20 +90,27 @@ async function onUpgradeClick() {
         </div>
 
         <div class="mt-10 flex">
-            <div class="w-full" v-if="data.planId > -1">
+
-                <div @click="onUpgradeClick()" v-if="!data.active && !data.isDowngrade"
+            <div class="w-full flex" v-if="data.planId > -1">
-                    class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
+
+
+                <LyxUiButton class="rounded-md py-2 w-full text-center" type="primary" @click="onUpgradeClick()"
+                    v-if="!data.active && !data.isDowngrade">
                     Upgrade
-                </div>
+                </LyxUiButton>
-                <div @click="onUpgradeClick()" v-if="!data.active && data.isDowngrade"
+
-                    class="w-full cursor-pointer text-[1rem] font-semibold bg-[#1f1f22] text-red-400 rounded-md py-2 text-center">
+                <LyxUiButton class="rounded-md py-2 w-full text-center" type="danger" @click="onUpgradeClick()"
+                    v-if="!data.active && data.isDowngrade">
                     Downgrade
-                </div>
+                </LyxUiButton>
+
             </div>
-            <NuxtLink v-if="data.planId === -1" :to="data.link || 'https://dashboard.litlyx.com'"
+
-                class="bg-[#222A42] cursor-pointer outline outline-[1px] outline-[#5680F8] w-full !rounded-md text-center text-[.9rem] !py-2 ">
+            <LyxUiButton v-if="data.planId === -1" :to="data.link || 'https://dashboard.litlyx.com'"
+                class="rounded-md py-2 w-full text-center" type="primary">
                 {{ data.cta }}
-            </NuxtLink>
+            </LyxUiButton>
+
         </div>
 
     </div>

dashboard/components/pricing/PricingDrawer.vue

@@ -15,7 +15,7 @@ function getPricingsData() {
             price: '€0 / mo',
             subs: [
                 'Up to 5000 visits/events per month',
-                'CPM 0€ per visit/event'
+
             ],
             features: [
                 'Email support',
@@ -274,7 +274,7 @@ async function onLifetimeUpgradeClick() {
                 </div>
             </div>
             <div class="mt-2">
-                <div class="rounded-lg px-10 py-3 bg-[#303030]">
+                <div class="rounded-lg px-10 py-3 bg-[#151515]">
                     <a href="mailto:help@litlyx.com" class="poppins text-[1.3rem]">
                         help@litlyx.com
                     </a>

dashboard/components/settings/billing.vue

@@ -127,23 +127,23 @@ const { visible } = usePricingDrawer();
         <SettingsTemplate v-if="!invoicesPending && !planPending" :entries="entries">
             <template #info>
                 <div v-if="!isGuest">
-                    <div class="flex flex-col gap-2">
+                    <div class="flex flex-col gap-4">
-                        <LyxUiInput class="px-2 py-1" placeholder="Address line 1" v-model="currentBillingInfo.line1">
+                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1" v-model="currentBillingInfo.line1">
                         </LyxUiInput>
-                        <LyxUiInput class="px-2 py-1" placeholder="Address line 2" v-model="currentBillingInfo.line2">
+                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2" v-model="currentBillingInfo.line2">
                         </LyxUiInput>
-                        <div class="flex gap-2 w-full">
+                        <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-1 w-full" placeholder="Country"
+                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Country"
                                 v-model="currentBillingInfo.country">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-1 w-full" placeholder="Postal code"
+                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Postal code"
                                 v-model="currentBillingInfo.postal_code">
                             </LyxUiInput>
                         </div>
-                        <div class="flex gap-2 w-full">
+                        <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-1 w-full" placeholder="City" v-model="currentBillingInfo.city">
+                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City" v-model="currentBillingInfo.city">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-1 w-full" placeholder="State" v-model="currentBillingInfo.state">
+                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State" v-model="currentBillingInfo.state">
                             </LyxUiInput>
                         </div>
                     </div>
@@ -157,28 +157,22 @@ const { visible } = usePricingDrawer();
             <template #plan>
                 <LyxUiCard v-if="planData" class="flex flex-col w-full">
                     <div class="flex flex-col gap-6 px-8 grow">
-                        <div class="flex justify-between flex-col sm:flex-row">
+                        <div class="flex justify-between items-center flex-col sm:flex-row">
                             <div class="flex flex-col">
                                 <div class="flex gap-3 items-center">
                                     <div class="poppins font-semibold text-[1.1rem]">
                                         {{ planData.premium ? 'Premium plan' : 'Basic plan' }}
                                     </div>
                                     <div
-                                        class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
+                                        class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-sm">
                                         {{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
                                     </div>
                                 </div>
-                                <div class="poppins text-text-sub text-[.9rem]">
-                                    Our free plan for testing the product.
-                                </div>
                             </div>
                             <div class="flex items-center gap-1">
                                 <div class="poppins font-semibold text-[2rem]"> €
                                     {{ getPremiumPrice(planData.premium_type) }} </div>
                                 <div class="poppins text-text-sub mt-2"> per month </div>
-                                <div class="flex items-center ml-2">
-                                    <i class="far fa-info-circle text-[.8rem]"></i>
-                                </div>
                             </div>
                         </div>
                         <div class="flex flex-col">
@@ -201,11 +195,9 @@ const { visible } = usePricingDrawer();
                             <div class="poppins"> Expire date:</div>
                             <div> {{ prettyExpireDate }}</div>
                         </div>
-                        <div v-if="!isGuest" @click="visible = true"
+                        <LyxUiButton v-if="!isGuest" @click="visible = true" type="primary">
-                            class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
+                            Upgrade plan
-                            <div class="poppins"> Upgrade plan </div>
+                        </LyxUiButton>
-                            <i class="fas fa-arrow-up-right"></i>
-                        </div>
                     </div>
                 </LyxUiCard>
             </template>

dashboard/pages/dashboard/events.vue

@@ -95,11 +95,18 @@ function goToUpgrade() {
                 <div> It can take a few minutes </div>
             </div>
             <div class="w-[15rem] flex flex-col gap-0">
-                <USelectMenu v-model="selectedTimeFrom" :options="options"></USelectMenu>
+                <USelectMenu :uiMenu="{
+                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
+                    base: '!bg-lyx-widget',
+                    option: {
+                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-widget-lighter'
+                    }
+                }" v-model="selectedTimeFrom" :options="options"></USelectMenu>
             </div>
 
             <div v-if="isPremium" @click="downloadCSV()"
-                class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
+                class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-1 rounded-lg">
                 Download CSV
             </div>
 

dashboard/pages/dashboard/visits.vue

@@ -100,11 +100,18 @@ function goToUpgrade() {
                 <div> It can take a few minutes </div>
             </div>
             <div class="w-[15rem] flex flex-col gap-0">
-                <USelectMenu v-model="selectedTimeFrom" :options="options"></USelectMenu>
+                <USelectMenu :uiMenu="{
+                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
+                    base: '!bg-lyx-widget',
+                    option: {
+                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-widget-lighter'
+                    }
+                }" v-model="selectedTimeFrom" :options="options"></USelectMenu>
             </div>
 
             <div v-if="isPremium" @click="downloadCSV()"
-                class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
+                class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-1 rounded-lg">
                 Download CSV
             </div>
 

dashboard/pages/events.vue

@@ -30,7 +30,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
             </div>
             <div>
                 <LyxUiButton type="secondary" to="https://docs.litlyx.com/custom-events">
-                    Go to docs
+                    Trigger your first event
                 </LyxUiButton>
             </div>
         </LyxUiCard>