jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: adaptive light mode

Browse source
This commit is contained in:
WanQuanXie 2024-05-24 20:29:49 +08:00
parent f9664d48e7
commit 996cc1b674
18 changed files with 149 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

24
ui/components/MessageSources.tsx
View file

@ -20,12 +20,12 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
{sources.slice(0, 3).map((source, i) => (
<a
className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
key={i}
href={source.metadata.url}
target="_blank"
>
<p className="text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
<p className="dark:text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
{source.metadata.title}
</p>
<div className="flex flex-row items-center justify-between">
@ -37,11 +37,11 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
alt="favicon"
className="rounded-lg h-4 w-4"
/>
<p className="text-xs text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
<p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
{source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')}
</p>
</div>
<div className="flex flex-row items-center space-x-1 text-white/50 text-xs">
<div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
<div className="bg-white/50 h-[4px] w-[4px] rounded-full" />
<span>{i + 1}</span>
</div>
@ -51,7 +51,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
{sources.length > 3 && (
<button
onClick={openModal}
className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 rounded-lg px-4 py-2 flex flex-col justify-between space-y-2"
className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) transition duration-200 rounded-lg px-4 py-2 flex flex-col justify-between space-y-2"
>
<div className="flex flex-row items-center space-x-1">
{sources.slice(3, 6).map((source, i) => (
@ -65,7 +65,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
/>
))}
</div>
<p className="text-xs text-white/50">
<p className="text-xs text-black/50 dark:text-white/50">
View {sources.length - 3} more
</p>
</button>
@ -83,19 +83,19 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
leaveFrom="opacity-100 scale-200"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-[#111111] border border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title className="text-lg font-medium leading-6 text-white">
<Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-primaryLight dark:bg-primaryDark border border-light dark:border-dark p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title className="text-lg font-medium leading-6 dark:text-white">
Sources
</Dialog.Title>
<div className="grid grid-cols-2 gap-2 overflow-auto max-h-[300px] mt-2 pr-2">
{sources.map((source, i) => (
<a
className="bg-[#111111] hover:bg-[#1c1c1c] border border-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) border border-light dark:border-dark transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
key={i}
href={source.metadata.url}
target="_blank"
>
<p className="text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
<p className="dark:text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
{source.metadata.title}
</p>
<div className="flex flex-row items-center justify-between">
@ -107,14 +107,14 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
alt="favicon"
className="rounded-lg h-4 w-4"
/>
<p className="text-xs text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
<p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
{source.metadata.url.replace(
/.+\/\/|www.|\..+/g,
'',
)}
</p>
</div>
<div className="flex flex-row items-center space-x-1 text-white/50 text-xs">
<div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
<div className="bg-white/50 h-[4px] w-[4px] rounded-full" />
<span>{i + 1}</span>
</div>