Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: add full dark mode compatibility to demo page #2991

Merged
merged 1 commit into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion clients/search-component/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"import": "./dist/vanilla/index.js"
}
},
"version": "0.2.40",
"version": "0.2.41",
"license": "MIT",
"homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
"scripts": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const AIInitialMessage = () => {
.split(" ")
.slice(0, 3)
.join(" ")}
</span>
</span>{" "}
{(currentGroup?.name || props.brandName || "Trieve")
.replace(/<[^>]*>/g, "")
.split(" ")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export const ChatMessage = ({
)}
<p
className="tag"
// style mostly transparent brand color
style={{
backgroundColor: props.brandColor
? `${props.brandColor}18`
Expand Down
25 changes: 23 additions & 2 deletions clients/search-component/src/TrieveModal/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,14 @@ body {
padding: 1rem;
scroll-snap-align: start;
box-sizing: border-box;

a {
@apply rounded px-2 text-xs py-1 bg-zinc-200/50;

&:hover {
background-color: var(--tv-zinc-200);
}
}
}

.carousel-item-hidden {
Expand Down Expand Up @@ -751,7 +759,7 @@ body {
}

.item {
@apply select-none cursor-pointer py-2 text-left flex items-start gap-2 w-full text-sm outline-none rounded-lg px-5 overflow-ellipsis;
@apply select-none cursor-pointer py-2 text-left flex items-start gap-2 w-full h-full text-sm outline-none rounded-lg px-5 overflow-ellipsis;

background-color: var(--tv-zinc-50);

Expand Down Expand Up @@ -1004,11 +1012,24 @@ body {
@apply flex flex-wrap gap-2 mt-4;

a {
color: var(--tv-zinc-300);
color: var(--tv-zinc-200);
background-color: var(--tv-zinc-700);

&:hover {
color: var(--tv-zinc-50);
background-color: var(--tv-zinc-800);
}
}
}

.carousel-item {
a {
color: var(--tv-zinc-200);
background-color: var(--tv-zinc-700);

&:hover {
color: var(--tv-zinc-50);
background-color: var(--tv-zinc-800);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions server/src/public/navbar.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="bg-white border-b">
<nav class="border-b">
<div
class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row md:gap-4 lg:gap-6"
>
Expand Down Expand Up @@ -39,7 +39,7 @@
class="flex flex-wrap items-center gap-4 justify-center sm:justify-right -mt-2 sm:mt-0"
>
<a
class="flex items-center gap-1 text-black"
class="flex items-center gap-1"
target="_blank"
href="mailto:[email protected]"
>
Expand Down
18 changes: 14 additions & 4 deletions server/src/public/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@
--brand-color: #a33eb5;
--brand-color: {{params.brandColor}};
--hero-bg-color: {{params.heroPattern.backgroundColor}};
--hero-fg-color: {{params.heroPattern.foregroundColor}};
--theme-text-color: {{'white' if (params.theme == 'dark') else 'black'}};
}

*,
Expand All @@ -96,6 +98,8 @@

nav {
border-color: var(--brand-color);
background-color: var(--hero-bg-color);
color: var(--theme-text-color);

a:hover {
color: var(--brand-color);
Expand Down Expand Up @@ -223,11 +227,13 @@
border: 1px solid var(--brand-color);
border-radius: 0rem 0.25rem 0.25rem 0.25rem;
padding: 0.9rem;
background-color: white;
background-color: var(--hero-bg-color);
color: var(--theme-text-color);
}

pre {
padding: 0rem;
border-radius: 0.25rem;
}

#tab-buttons {
Expand All @@ -238,11 +244,11 @@
}

.tab-button {
background-color: #ffffff;
background-color: var(--hero-bg-color);
border-radius: 0.25rem 0.25rem 0rem 0rem;
border: 1px solid var(--brand-color);
border-bottom-color: transparent;
color: black;
color: var(--theme-text-color);
padding: 0.4rem;
padding-top: 0.5rem;
font-size: 0.9rem;
Expand Down Expand Up @@ -281,10 +287,14 @@
color: var(--brand-color);

&:hover {
background-color: #F3F4F6;
background-color: transparent;
}
}

button.text-brand-color:hover {
background-color: color-mix(in srgb, white, black 20%);
}

.bg-brand-color {
background-color: var(--brand-color);

Expand Down
12 changes: 7 additions & 5 deletions server/src/public/product.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="max-w-full">
<div
id="product-display"
class="mx-auto py-4 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8"
class="mx-auto py-6 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8"
>
<section class="lg:flex gap-2 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
<div class="lg:w-1/2">
Expand All @@ -13,7 +13,9 @@
</div>

<div class="mx-auto mt-4 lg:mt-0 lg:w-1/2">
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
<h1
class="text-brand-color text-2xl font-bold tracking-tight sm:text-3xl"
>
{{ params.singleProductOptions.productName }}
</h1>

Expand All @@ -31,7 +33,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
</div>

<div class="mt-4 border-t border-gray-200">
<h3 class="text-sm font-medium text-gray-900 mt-4">
<h3 class="text-brand-color text-sm font-medium mt-4">
<span class="text-brand-color"
><i class="fa-solid fa-wand-magic-sparkles"></i
></span>
Expand Down Expand Up @@ -64,7 +66,7 @@ <h3 class="text-sm font-medium text-gray-900 mt-4">
<div class="recs-section">
<h2
id="related-heading"
class="text-xl font-bold text-gray-900 mt-8 w-fit"
class="text-brand-color text-xl font-bold mt-8 w-fit"
>
Related products
</h2>
Expand Down Expand Up @@ -172,7 +174,7 @@ <h4 class="text-sm text-gray-500 mt-2 w-fit">
/>
</div>
<div class="mt-4">
<h3 class="rec-title line-clamp-1 text-sm font-medium text-gray-900">${title}</h3>
<h3 class="text-brand-color line-clamp-1 text-sm font-medium">${title}</h3>
<h6 class="rec-price mt-1 text-sm text-gray-700">${price}</h6>
<p class="rec-description line-clamp-1 mt-1 text-sm text-gray-500">${description}</p>
</div>
Expand Down
21 changes: 3 additions & 18 deletions server/static/output.css
Original file line number Diff line number Diff line change
Expand Up @@ -800,11 +800,6 @@ video {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.object-cover {
-o-object-fit: cover;
object-fit: cover;
Expand Down Expand Up @@ -849,9 +844,9 @@ video {
padding-bottom: 0.75rem;
}

.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.pl-0\.5 {
Expand Down Expand Up @@ -898,11 +893,6 @@ video {
letter-spacing: -0.025em;
}

.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
Expand All @@ -913,11 +903,6 @@ video {
color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
Expand Down