fix lightmode

This commit is contained in:
Emily
2025-01-16 16:47:35 +01:00
parent 0b90c2fe3c
commit e6e2340432
13 changed files with 51 additions and 47 deletions

View File

@@ -20,7 +20,7 @@ const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
<Transition name="drawer"> <Transition name="drawer">
<LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses" <LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses"
class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="drawerVisible"> class="bg-lyx-lightmode-background-light dark:bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="drawerVisible">
</LazyDrawerGeneric> </LazyDrawerGeneric>
</Transition> </Transition>

View File

@@ -122,8 +122,8 @@ function reloadPage() {
<CardTitled class="h-full w-full" title="Project id" <CardTitled class="h-full w-full" title="Project id"
sub="This is the identifier for this project, used to forward data"> sub="This is the identifier for this project, used to forward data">
<div class="flex items-center justify-between gap-4 mt-6"> <div class="flex items-center justify-between gap-4 mt-6">
<div class="p-2 bg-[#1c1b1b] rounded-md w-full"> <div class="p-2 bg-lyx-lightmode-widget dark:bg-[#1c1b1b] rounded-md w-full">
<div class="w-full text-[.9rem] text-[#acacac]"> {{ project?._id }} </div> <div class="w-full text-[.9rem] dark:text-[#acacac]"> {{ project?._id }} </div>
</div> </div>
<LyxUiButton type="secondary" @click="copyProjectId()"> Copy </LyxUiButton> <LyxUiButton type="secondary" @click="copyProjectId()"> Copy </LyxUiButton>
</div> </div>

View File

@@ -109,11 +109,11 @@ const showOnboarding = computed(() => {
<div v-if="page == 0" class="bg-lyx-background-light mt-[10vh] w-[50vw] min-w-[400px] h-fit p-8 rounded-md"> <div v-if="page == 0" class="bg-lyx-lightmode-background-light dark:bg-lyx-background-light mt-[10vh] w-[50vw] min-w-[400px] h-fit p-8 rounded-md">
<div class="text-lyx-text text-[1.4rem] text-center font-medium"> Getting Started </div> <div class="text-lyx-lightmode-text dark:text-lyx-text text-[1.4rem] text-center font-medium"> Getting Started </div>
<div class="text-lyx-text mt-4"> <div class="text-lyx-lightmode-text dark:text-lyx-text mt-4">
For the current project do you already have other Analytics tools implemented (e.g. GA4) or Litlyx is For the current project do you already have other Analytics tools implemented (e.g. GA4) or Litlyx is
going to be your first/main analytics? going to be your first/main analytics?
</div> </div>
@@ -122,7 +122,7 @@ const showOnboarding = computed(() => {
<div v-for="(e, i) of analyticsList"> <div v-for="(e, i) of analyticsList">
<div @click="selectIndex(i)" <div @click="selectIndex(i)"
:class="{ 'outline outline-[1px] outline-[#5680f8]': selectedIndex == i }" :class="{ 'outline outline-[1px] outline-[#5680f8]': selectedIndex == i }"
class="bg-lyx-widget-light text-center p-2 rounded-md cursor-pointer"> class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light text-center p-2 rounded-md cursor-pointer">
{{ e }} {{ e }}
</div> </div>
</div> </div>
@@ -140,11 +140,11 @@ const showOnboarding = computed(() => {
</div> </div>
</div> </div>
<div v-if="page == 1" class="bg-lyx-background-light mt-[10vh] w-[50vw] min-w-[400px] h-fit p-8 rounded-md"> <div v-if="page == 1" class="bg-lyx-lightmode-background-light dark:bg-lyx-background-light mt-[10vh] w-[50vw] min-w-[400px] h-fit p-8 rounded-md">
<div class="text-lyx-text text-[1.4rem] text-center font-medium"> Getting Started </div> <div class="text-lyx-lightmode-text dark:text-lyx-text text-[1.4rem] text-center font-medium"> Getting Started </div>
<div class="text-lyx-text mt-4"> <div class="text-lyx-lightmode-text dark:text-lyx-text mt-4">
What is your job title ? What is your job title ?
</div> </div>
@@ -152,7 +152,7 @@ const showOnboarding = computed(() => {
<div v-for="(e, i) of jobsList"> <div v-for="(e, i) of jobsList">
<div @click="selectIndex2(i)" <div @click="selectIndex2(i)"
:class="{ 'outline outline-[1px] outline-[#5680f8]': selectedIndex2 == i }" :class="{ 'outline outline-[1px] outline-[#5680f8]': selectedIndex2 == i }"
class="bg-lyx-widget-light text-center p-2 rounded-md cursor-pointer"> class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light text-center p-2 rounded-md cursor-pointer">
{{ e }} {{ e }}
</div> </div>
</div> </div>

View File

@@ -27,7 +27,6 @@ const chartOptions = ref<ChartOptions<'doughnut'>>({
position: 'top', position: 'top',
align: 'center', align: 'center',
labels: { labels: {
color: 'white',
font: { font: {
family: 'Poppins', family: 'Poppins',
size: 16 size: 16

View File

@@ -10,7 +10,7 @@ const { drawerComponent } = useDrawer();
<div class="p-8 overflow-y-auto"> <div class="p-8 overflow-y-auto">
<div @click="$emit('onCloseClick')" <div @click="$emit('onCloseClick')"
class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center"> class="cursor-pointer fixed top-4 right-4 rounded-full dark:bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
<i class="fas fa-close text-[1.6rem]"></i> <i class="fas fa-close text-[1.6rem]"></i>
</div> </div>

View File

@@ -198,16 +198,21 @@ function getPricingsData() {
<div class="poppins text-[2rem] font-semibold"> <div class="poppins text-[2rem] font-semibold">
Do you need help ? Do you need help ?
</div> </div>
<div class="poppins text-[1.2rem] text-text/90"> <div class="poppins text-[1.2rem]">
We respond in max. 1-2 days We respond in max. 1-2 days
</div> </div>
</div> </div>
<div class="mt-2"> <div class="flex flex-col gap-2">
<div class="rounded-lg px-10 py-3 bg-[#151515]"> <LyxUiButton type="secondary">
<a href="mailto:help@litlyx.com" class="poppins text-[1.3rem]"> <a href="mailto:help@litlyx.com" class="poppins text-[1.1rem]">
help@litlyx.com help@litlyx.com
</a> </a>
</div> </LyxUiButton>
<LyxUiButton type="secondary">
<a href="https://discord.com/invite/9cQykjsmWX" class="poppins text-[1.1rem]">
Discord support
</a>
</LyxUiButton>
</div> </div>
</div> </div>

View File

@@ -110,7 +110,7 @@ const canSearch = computed(() => {
</div> </div>
<div v-if="canSearch" class="h-full flex items-center text-[1.2rem]"> <div v-if="canSearch" class="h-full flex items-center text-[1.2rem]">
<div class="bg-lyx-widget-light flex items-center rounded-md pl-4"> <div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light flex items-center rounded-md pl-4">
<div><i class="far fa-search"></i></div> <div><i class="far fa-search"></i></div>
<input class="bg-transparent px-4 py-2 text-[1rem] outline-none" type="text" <input class="bg-transparent px-4 py-2 text-[1rem] outline-none" type="text"
placeholder="Filter by metadata name" v-model="currentSearchText"> placeholder="Filter by metadata name" v-model="currentSearchText">
@@ -121,7 +121,7 @@ const canSearch = computed(() => {
<div class="flex flex-wrap gap-2 lg:mt-4 mt-10"> <div class="flex flex-wrap gap-2 lg:mt-4 mt-10">
<div class="bg-lyx-widget-light text-lyx-text-dark px-3 py-2 rounded-md w-fit" <div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light text-lyx-lightmode-text dark:text-lyx-text-dark px-3 py-2 rounded-md w-fit"
v-for="item of metadataFieldGroupedFiltered"> v-for="item of metadataFieldGroupedFiltered">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<div> {{ item._id || 'OLD_EVENTS' }} </div> <div> {{ item._id || 'OLD_EVENTS' }} </div>

View File

@@ -71,7 +71,7 @@ async function analyzeEvent() {
</div> </div>
<div class="flex flex-col gap-2" v-if="userFlowData"> <div class="flex flex-col gap-2" v-if="userFlowData">
<div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-widget-light rounded-lg" <div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-lightmode-widget dark:bg-lyx-widget-light rounded-lg"
v-for="(count, referrer) in userFlowData"> v-for="(count, referrer) in userFlowData">
<div class="w-5 h-5 flex items-center justify-center"> <div class="w-5 h-5 flex items-center justify-center">
<img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`" <img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`"

View File

@@ -41,7 +41,7 @@ async function onUpgradeClick() {
<template> <template>
<div <div
class="relative bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]"> class="relative bg-lyx-lightmode-widget-light dark:bg-[#151515] outline outline-[1px] outline-lyx-lightmode-widget dark:outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
<div class="flex flex-col gap-3 text-center pt-3"> <div class="flex flex-col gap-3 text-center pt-3">
<div v-if="data.active" <div v-if="data.active"
@@ -56,7 +56,7 @@ async function onUpgradeClick() {
<div class="poppins text-4xl font-medium"> {{ data.price }} </div> <div class="poppins text-4xl font-medium"> {{ data.price }} </div>
</div> </div>
<div class="sep bg-[#262626] h-[1px] my-8"></div> <div class="sep bg-lyx-lightmode-widget dark:bg-[#262626] h-[1px] my-8"></div>
<div class="flex flex-col text-center h-[6rem] justify-center gap-2"> <div class="flex flex-col text-center h-[6rem] justify-center gap-2">
<div v-if="datas.length > 1"> <div v-if="datas.length > 1">
@@ -76,7 +76,7 @@ async function onUpgradeClick() {
</div> </div>
</div> </div>
<div class="sep bg-[#262626] h-[1px] my-8"></div> <div class="sep bg-lyx-lightmode-widget dark:bg-[#262626] h-[1px] my-8"></div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex gap-2" v-for="feature of data.features"> <div class="flex gap-2" v-for="feature of data.features">

View File

@@ -462,7 +462,6 @@ async function clearAllChats() {
font-weight: bold; font-weight: bold;
margin-top: 1.5em; margin-top: 1.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: white;
} }
p:last-of-type { p:last-of-type {

View File

@@ -49,11 +49,11 @@ async function resetPassword() {
<img class="w-[5rem]" :src="'logo.png'"> <img class="w-[5rem]" :src="'logo.png'">
</div> </div>
<div class="text-text text-[2.2rem] font-bold poppins"> <div class="text-lyx-lightmode-text dark:text-lyx-text text-[2.2rem] font-bold poppins">
Reset password Reset password
</div> </div>
<div class="text-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2"> <div class="text-lyx-lightmode-text dark:text-lyx-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
Enter your user account's verified email address and we will send you a temporary password. Enter your user account's verified email address and we will send you a temporary password.
</div> </div>
@@ -73,7 +73,7 @@ async function resetPassword() {
</div> </div>
<NuxtLink to="/login" <NuxtLink to="/login"
class="mt-4 text-center text-lyx-text-dark underline cursor-pointer z-[110]"> class="mt-4 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[110]">
Go back Go back
</NuxtLink> </NuxtLink>
@@ -86,7 +86,7 @@ async function resetPassword() {
Check your email inbox. Check your email inbox.
</div> </div>
<RouterLink tag="div" to="/login" <RouterLink tag="div" to="/login"
class="mt-6 text-center text-lyx-text-dark underline cursor-pointer z-[110]"> class="mt-6 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[110]">
Go back Go back
</RouterLink> </RouterLink>
</div> </div>

View File

@@ -154,6 +154,7 @@ async function signInWithCredentials() {
} }
} }
</script> </script>
@@ -161,21 +162,21 @@ async function signInWithCredentials() {
<div class="home w-full h-full"> <div class="home w-full h-full">
<div class="flex h-full"> <div class="flex h-full bg-lyx-lightmode-background dark:bg-lyx-background">
<div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]"> <div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]">
<div class="rotating-thing absolute top-0"></div> <!-- <div class="rotating-thing absolute top-0"></div> -->
<div class="mb-8 bg-black rounded-xl"> <div class="mb-8 bg-black rounded-xl">
<img class="w-[5rem]" :src="'logo.png'"> <img class="w-[5rem]" :src="'logo.png'">
</div> </div>
<div class="text-text text-[2.2rem] font-bold poppins"> <div class="text-lyx-lightmode-text dark:text-lyx-text text-[2.2rem] font-bold poppins">
Sign in Sign in
</div> </div>
<div class="text-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2"> <div class="text-lyx-lightmode-text/80 dark:text-lyx-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
Track web analytics and custom events Track web analytics and custom events
with extreme simplicity in under 30 sec. with extreme simplicity in under 30 sec.
<br> <br>
@@ -197,7 +198,7 @@ async function signInWithCredentials() {
<div class="flex justify-end"> <div class="flex justify-end">
<RouterLink tag="div" to="/forgot_password" <RouterLink tag="div" to="/forgot_password"
class="text-center text-lyx-text-dark underline cursor-pointer z-[110]"> class="text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[110]">
Forgot password? Forgot password?
</RouterLink> </RouterLink>
</div> </div>
@@ -209,17 +210,17 @@ async function signInWithCredentials() {
</div> </div>
<div @click="goBackToEmailLogin()" <div @click="goBackToEmailLogin()"
class="mt-4 text-center text-lyx-text-dark underline cursor-pointer z-[100]"> class="mt-4 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[100]">
Go back Go back
</div> </div>
</div> </div>
<div v-if="!isNoAuth && !isEmailLogin" class="flex flex-col gap-2"> <div v-if="!isNoAuth && !isEmailLogin" class="flex flex-col text-lyx-lightmode-text dark:text-lyx-text gap-2">
<div @click="login" <div @click="login"
class="hover:bg-lyx-primary cursor-pointer flex text-[1.3rem] gap-4 items-center border-[1px] border-gray-400 rounded-lg px-8 py-3 relative z-[2]"> class="hover:bg-lyx-primary bg-white dark:bg-transparent cursor-pointer flex text-[1.3rem] gap-4 items-center border-[1px] border-gray-400 rounded-lg px-8 py-3 relative z-[2]">
<div class="flex items-center"> <div class="flex items-center">
<i class="fab fa-google"></i> <i class="fab fa-google"></i>
</div> </div>
@@ -227,7 +228,7 @@ async function signInWithCredentials() {
</div> </div>
<div @click="isEmailLogin = true" <div @click="isEmailLogin = true"
class="hover:bg-[#262626] cursor-pointer flex text-[1.3rem] gap-4 items-center border-[1px] border-gray-400 rounded-lg px-8 py-3 relative z-[2]"> class="hover:bg-[#d3d3d3] dark:hover:bg-[#262626] bg-white dark:bg-transparent cursor-pointer flex text-[1.3rem] gap-4 items-center border-[1px] border-gray-400 rounded-lg px-8 py-3 relative z-[2]">
<div class="flex items-center"> <div class="flex items-center">
<i class="far fa-envelope"></i> <i class="far fa-envelope"></i>
</div> </div>
@@ -238,7 +239,7 @@ async function signInWithCredentials() {
<div class="flex flex-col gap-2 mt-4"> <div class="flex flex-col gap-2 mt-4">
<RouterLink tag="div" to="/register" <RouterLink tag="div" to="/register"
class="text-center text-lyx-text-dark underline cursor-pointer z-[100]"> class="text-center text-lyx-lightmode-text-dark dark:text-lyx-text-dark underline cursor-pointer z-[100]">
You don't have an account ? Sign up You don't have an account ? Sign up
</RouterLink> </RouterLink>
@@ -256,7 +257,7 @@ async function signInWithCredentials() {
</div> </div>
<div class="text-[.9rem] poppins mt-20 text-text-sub text-center relative z-[2]"> <div class="text-[.9rem] poppins mt-20 text-lyx-lightmode-text-dark dark:text-lyx-text-dark text-center relative z-[2]">
By continuing you are accepting By continuing you are accepting
<br> <br>
our our

View File

@@ -47,21 +47,21 @@ async function registerAccount() {
<div class="home w-full h-full"> <div class="home w-full h-full">
<div class="flex h-full"> <div class="flex h-full bg-lyx-lightmode-background dark:bg-lyx-background">
<div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]"> <div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]">
<div class="rotating-thing absolute top-0"></div> <!-- <div class="rotating-thing absolute top-0"></div> -->
<div class="mb-8 bg-black rounded-xl"> <div class="mb-8 bg-black rounded-xl">
<img class="w-[5rem]" :src="'logo.png'"> <img class="w-[5rem]" :src="'logo.png'">
</div> </div>
<div class="text-text text-[2.2rem] font-bold poppins"> <div class="text-lyx-lightmode-text dark:text-lyx-text text-[2.2rem] font-bold poppins">
Sign up Sign up
</div> </div>
<div class="text-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2"> <div class="text-lyx-lightmode-text dark:text-lyx-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
Track web analytics and custom events Track web analytics and custom events
with extreme simplicity in under 30 sec. with extreme simplicity in under 30 sec.
<br> <br>
@@ -95,7 +95,7 @@ async function registerAccount() {
</div> </div>
<RouterLink to="/login" <RouterLink to="/login"
class="mt-4 text-center text-lyx-text-dark underline cursor-pointer z-[100]"> class="mt-4 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[100]">
Go back to login Go back to login
</RouterLink> </RouterLink>
@@ -112,13 +112,13 @@ async function registerAccount() {
Please check your inbox to confirm your account and complete your registration. Please check your inbox to confirm your account and complete your registration.
</div> </div>
<RouterLink tag="div" to="/login" <RouterLink tag="div" to="/login"
class="mt-6 text-center text-lyx-text-dark underline cursor-pointer"> class="mt-6 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer">
Go back Go back
</RouterLink> </RouterLink>
</div> </div>
<div v-if="!emailSended" <div v-if="!emailSended"
class="text-[.9rem] poppins mt-5 xl:mt-20 text-text-sub text-center relative z-[2]"> class="text-[.9rem] poppins mt-5 xl:mt-20 text-lyx-lightmode-text dark:text-lyx-text-dark text-center relative z-[2]">
By continuing you are accepting By continuing you are accepting
<br> <br>
our our