add lightmode

This commit is contained in:
Emily
2025-01-15 16:31:10 +01:00
parent d1abe1a91f
commit a6d1797a4f
27 changed files with 147 additions and 185 deletions

View File

@@ -268,7 +268,9 @@ async function clearAllChats() {
</div>
<div class="flex flex-col xl:grid xl:grid-cols-2 gap-4 mt-6">
<div v-for="prompt of defaultPrompts" @click="currentText = prompt"
class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
class="
bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none
cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
{{ prompt }}
</div>
</div>
@@ -280,7 +282,7 @@ async function clearAllChats() {
<div class="flex w-full flex-col" v-for="(message, messageIndex) of currentChatMessages">
<div v-if="message.role === 'user'" class="flex justify-end w-full poppins text-[1.1rem]">
<div class="bg-lyx-widget-light px-5 py-3 rounded-lg">
<div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light px-5 py-3 rounded-lg">
{{ message.content }}
</div>
</div>
@@ -290,7 +292,7 @@ async function clearAllChats() {
<div class="flex items-center justify-center shrink-0">
<img class="h-[3.5rem] w-auto" :src="'analyst.png'">
</div>
<div class="max-w-[70%] text-text/90 ai-message">
<div class="max-w-[70%] text-lyx-lightmode-text dark:text-text/90 ai-message">
<vue-markdown v-if="message.content" :source="message.content" :options="{
html: true,
@@ -364,9 +366,9 @@ async function clearAllChats() {
<div class="flex gap-2 items-center md:absolute fixed bottom-8 left-0 w-full px-10 xl:px-28">
<input @keydown="onKeyDown" v-model="currentText"
class="bg-lyx-widget-light w-full focus:outline-none px-4 py-2 rounded-lg" type="text">
class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light w-full dark:focus:outline-none px-4 py-2 rounded-lg outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none" type="text">
<div @click="sendMessage()"
class="bg-lyx-widget-light hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
class="bg-lyx-lightmode-widget-light hover:bg-lyx-lightmode-widget dark:bg-lyx-widget-light dark:hover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
<i class="far fa-arrow-up"></i>
</div>
<div @click="menuOpen = !menuOpen"
@@ -381,7 +383,8 @@ async function clearAllChats() {
<div :class="{
'absolute top-0 left-0 w-full': menuOpen,
'hidden xl:flex': !menuOpen
}" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
}"
class="flex-[2] bg-lyx-lightmode-background border-l-[1px] dark:bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
<div class="gap-2 flex flex-col">
<div class="xl:hidden absolute right-6 top-2 text-[1.5rem]">
@@ -396,7 +399,8 @@ async function clearAllChats() {
<div class="flex items-center gap-2">
<div class="bg-accent w-5 h-5 rounded-full animate-pulse">
</div>
<div class="manrope font-semibold text-text-dirty"> {{ chatsRemaining }} remaining requests
<div class="manrope font-semibold text-lyx-lightmode-text dark:text-text-dirty"> {{
chatsRemaining }} remaining requests
</div>
</div>
<LyxUiButton type="primary" class="text-[.9rem] text-center " @click="showDrawer('PRICING')">
@@ -414,7 +418,7 @@ async function clearAllChats() {
<div class="px-2">
<div @click="openChat()"
class="bg-lyx-widget-light cursor-pointer hover:bg-lyx-widget rounded-lg px-4 py-3 poppins flex gap-4 items-center">
class="bg-lyx-lightmode-widget-light hover:bg-lyx-lightmode-widget dark:bg-lyx-widget-light cursor-pointer dark:hover:bg-lyx-widget rounded-lg px-4 py-3 poppins flex gap-4 items-center outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none">
<div> <i class="fas fa-plus"></i> </div>
<div> New chat </div>
</div>
@@ -424,7 +428,7 @@ async function clearAllChats() {
<div class="overflow-y-auto">
<div class="flex flex-col gap-2 px-2">
<div :class="{ '!bg-accent/60': chat._id.toString() === currentChatId }"
class="flex text-lyx-text-dark text-[.9rem] font-light rounded-lg items-center gap-4 w-full px-4 bg-lyx-widget-light hover:bg-lyx-widget"
class="flex text-lyx-lightmode-text-dark dark:text-lyx-text-dark text-[.9rem] font-light rounded-lg items-center gap-4 w-full px-4 bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none"
v-for="chat of viewChatsList">
<i @click="deleteChat(chat._id.toString())"
class="far fa-trash hover:text-gray-300 cursor-pointer"></i>

View File

@@ -73,7 +73,7 @@ const showWarning = computed(() => {
const { showDrawer } = useDrawer();
function goToUpgrade() {
showDrawer('PRICING');
showDrawer('PRICING');
}
</script>
@@ -86,7 +86,7 @@ function goToUpgrade() {
<div class="w-full h-dvh flex flex-col">
<div v-if="creatingCsv"
class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-black/60 backdrop-blur-[4px]">
class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-lyx-lightmode-background-light dark:bg-black/60 backdrop-blur-[4px]">
<div class="poppins text-[2rem]">
Creating csv...
</div>
@@ -101,11 +101,11 @@ function goToUpgrade() {
</div>
<div class="w-[15rem] flex flex-col gap-0">
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
}
}" v-model="selectedTimeFrom" :options="options"></USelectMenu>
</div>
@@ -125,14 +125,14 @@ function goToUpgrade() {
<UTable v-if="tableData" class="utable px-8" :ui="{
wrapper: 'overflow-auto w-full h-full',
thead: 'sticky top-0 bg-menu',
wrapper: 'overflow-auto w-full h-full',
thead: 'sticky top-0 bg-lyx-lightmode-background-light dark:bg-menu',
td: {
color: 'text-[#ffffffb3]',
base: 'border-r border-l border-gray-300/20'
color: 'text-lyx-lightmode-text dark:text-[#ffffffb3]',
base: 'border-r border-l border-lyx-lightmode-widget dark:border-gray-300/20'
},
th: { color: 'text-text-sub' },
tbody: 'divide-y divide-gray-300/20',
th: { color: 'text-lyx-lightmode-text dark:text-text-sub' },
tbody: 'divide-y divide-lyx-lightmode-widget dark:divide-gray-300/20',
divide: '',
}" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">

View File

@@ -91,7 +91,7 @@ function goToUpgrade() {
<div class="w-full h-dvh flex flex-col">
<div v-if="creatingCsv"
class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-black/60 backdrop-blur-[4px]">
class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-lyx-lightmode-background-light dark:bg-black/60 backdrop-blur-[4px]">
<div class="poppins text-[2rem]">
Creating csv...
</div>
@@ -106,11 +106,11 @@ function goToUpgrade() {
</div>
<div class="w-[15rem] flex flex-col gap-0">
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
}
}" v-model="selectedTimeFrom" :options="options"></USelectMenu>
</div>
@@ -131,13 +131,13 @@ function goToUpgrade() {
<UTable v-if="tableData" class="utable px-8" :ui="{
wrapper: 'overflow-auto w-full h-full',
thead: 'sticky top-0 bg-menu',
thead: 'sticky top-0 bg-lyx-lightmode-background-light dark:bg-menu',
td: {
color: 'text-[#ffffffb3]',
base: 'border-r border-l border-gray-300/20'
color: 'text-lyx-lightmode-text dark:text-[#ffffffb3]',
base: 'border-r border-l border-lyx-lightmode-widget dark:border-gray-300/20'
},
th: { color: 'text-text-sub' },
tbody: 'divide-y divide-gray-300/20',
th: { color: 'text-lyx-lightmode-text dark:text-text-sub' },
tbody: 'divide-y divide-lyx-lightmode-widget dark:divide-gray-300/20',
divide: '',
}" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">

View File

@@ -56,6 +56,7 @@ async function createProject() {
}
</script>
@@ -69,7 +70,7 @@ async function createProject() {
<div class="flex flex-col items-center justify-center pt-[12rem] gap-12 relative z-[10]">
<div class="text-[3rem] font-semibold text-center">
<div class="text-[3rem] font-semibold text-center text-lyx-lightmode-text dark:text-lyx-text">
Create your {{ isFirstProject ? 'first' : '' }} project
</div>
@@ -78,15 +79,20 @@ async function createProject() {
</div>
<div class="w-[20rem] flex flex-col gap-2">
<div class="text-lg text-text-sub font-semibold">
<div class="text-lg text-lyx-lightmode-text-dark dark:text-text-sub font-semibold">
{{ isFirstProject ? 'Choose a name' : 'Project name' }}
</div>
<CInput placeholder="ProjectName" :readonly="creating" v-model="projectName"></CInput>
<!-- <CInput placeholder="ProjectName" :readonly="creating" v-model="projectName"></CInput> -->
<LyxUiInput class="py-2 px-2" placeholder="Insert" :readonly="creating" v-model="projectName">
</LyxUiInput>
</div>
<div>
<CButton :loading="creating" @click="createProject()" :disabled="projectName.length < 2"
class="rounded-lg w-[10rem] text-md font-semibold" label="Create"></CButton>
<LyxUiButton type="primary" @click="createProject()" :disabled="projectName.length < 2">
Create
</LyxUiButton>
</div>
</div>

View File

@@ -33,7 +33,7 @@ const columns = [
<div class="home w-full h-full px-10 pt-6 overflow-y-auto">
<div class="flex gap-2 items-center text-text/90 justify-end">
<div class="flex gap-2 items-center text-lyx-lightmode-text dark:text-text/90 justify-end">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div class="poppins font-regular text-[1rem]"> AI Anomaly Detector </div>
<div class="flex items-center">
@@ -47,7 +47,7 @@ const columns = [
<template #scan-data="{ row }">
<div class="text-lyx-text-dark">
<div class="text-lyx-lightmode-text dark:text-lyx-text-dark">
{{ new Date(row.data.created_at).toLocaleString() }}
</div>
</template>
@@ -59,7 +59,7 @@ const columns = [
</template>
<template #data-data="{ row }">
<div class="text-lyx-text-dark">
<div class="text-lyx-lightmode-text dark:text-lyx-text-dark">
<div v-if="row.type === 'domain'">
{{ row.data.domain }}
</div>