Skip to content

Commit 61c01b4

Browse files
skeptrunedevcdxker
skeptrunedev
authored and
cdxker
committed
feat(search-component): enhance styling and font integration for improved UI consistency
1 parent b1ef3cd commit 61c01b4

File tree

5 files changed

+25
-14
lines changed

5 files changed

+25
-14
lines changed

‎clients/search-component/example/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@
3434
/>
3535
<meta property="og:type" content="" />
3636
<meta property="og:image" content="https://cdn.trieve.ai/trieve-og.png" />
37+
<link rel="preconnect" href="https://fonts.googleapis.com" />
38+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
39+
<link
40+
href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
41+
rel="stylesheet"
42+
/>
3743
<title>Design Muse by Trieve</title>
3844
</head>
3945
<body>

‎clients/search-component/example/src/index.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
@tailwind utilities;
44

55
:root {
6-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
6+
font-family: var(--tv-prop-brand-font-family), system-ui, Avenir, Helvetica,
7+
Arial, sans-serif;
78
line-height: 1.5;
89
font-weight: 400;
910

‎clients/search-component/example/src/routes/searchpage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,13 +237,13 @@ export default function ECommerce() {
237237
<>
238238
<div className="min-w-screen max-w-[96rem] mx-auto min-h-screen relative p-2">
239239
<div className="w-full flex justify-between my-2 py-4 px-2 border-b">
240-
<p className="text-3xl font-semibold">Design Muse</p>
240+
<p className="text-3xl font-bold">Design Muse</p>
241241
<a
242242
href={tutorialUrl}
243243
target="_blank"
244244
rel="noopener noreferrer"
245245
data-slot="button"
246-
className="cursor-pointer justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md px-3 has-[>svg]:px-2.5 flex items-center gap-1 hover:bg-neutral-100"
246+
className="cursor-pointer justify-center whitespace-nowrap text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-xl px-3 has-[>svg]:px-2.5 flex items-center gap-1 hover:bg-neutral-100 font-semibold"
247247
>
248248
<svg
249249
xmlns="http://www.w3.org/2000/svg"
@@ -271,6 +271,7 @@ export default function ECommerce() {
271271
inline={true}
272272
defaultSearchMode="chat"
273273
allowSwitchingModes={false}
274+
brandFontFamily="Karla"
274275
brandColor="#000"
275276
type="ecommerce"
276277
searchOptions={{

‎clients/search-component/src/TrieveModal/index.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1551,7 +1551,7 @@ body {
15511551
}
15521552

15531553
label {
1554-
@apply tv-cursor-pointer tv-text-sm;
1554+
@apply tv-cursor-pointer;
15551555
}
15561556
}
15571557

@@ -1568,15 +1568,15 @@ body {
15681568
&[data-prev-complete="false"] {
15691569
.trieve-inference-filters-step-header {
15701570
.trieve-inference-filters-step-number {
1571-
background-color: var(--tv-zinc-400);
1571+
background-color: #86868b;
15721572
}
15731573

15741574
.trieve-inference-filters-step-title {
1575-
color: var(--tv-zinc-400);
1575+
color: #86868b;
15761576
}
15771577

15781578
.trieve-inference-filters-step-description {
1579-
color: var(--tv-zinc-400);
1579+
color: #86868b;
15801580
}
15811581
}
15821582
}
@@ -1590,12 +1590,12 @@ body {
15901590
}
15911591

15921592
.trieve-inference-filters-step-title {
1593-
@apply tv-text-lg tv-font-medium;
1593+
@apply tv-text-xl tv-font-bold;
15941594
}
15951595
}
15961596

15971597
.trieve-inference-filters-step-description {
1598-
@apply tv-mt-0.5 tv-text-gray-500;
1598+
@apply tv-mt-0.5 tv-text-[#86868b] tv-font-bold;
15991599
}
16001600

16011601
.trieve-inference-filters-step-input-container {
@@ -1606,7 +1606,7 @@ body {
16061606
}
16071607

16081608
.trieve-image-input-container {
1609-
@apply tv-border-dashed tv-border-2 tv-rounded-lg tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;
1609+
@apply tv-border-dashed tv-border-2 tv-rounded-xl tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;
16101610

16111611
display: none;
16121612

@@ -1646,7 +1646,7 @@ body {
16461646
}
16471647

16481648
.trieve-image-input-placeholder {
1649-
@apply tv-text-sm tv-mt-6 tv-max-w-[75%] tv-text-center;
1649+
@apply tv-mt-6 tv-max-w-[75%] tv-text-center;
16501650
}
16511651
}
16521652

@@ -1685,7 +1685,7 @@ body {
16851685

16861686
.trieve-text-input-textarea-container {
16871687
.trieve-text-input-textarea {
1688-
@apply tv-block tv-w-full tv-rounded-md tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 sm:tv-text-sm/6;
1688+
@apply tv-block tv-w-full tv-rounded-xl tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 tv-text-black;
16891689

16901690
&:focus,
16911691
&:hover {
@@ -1699,7 +1699,7 @@ body {
16991699
@apply tv-flex tv-w-full tv-mt-4;
17001700

17011701
.trieve-text-input-button {
1702-
@apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-md tv-gap-x-1;
1702+
@apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-xl tv-gap-x-1;
17031703

17041704
background-color: var(--tv-prop-brand-color);
17051705
color: white;
@@ -1754,7 +1754,7 @@ body {
17541754
}
17551755

17561756
button.trieve-inference-filters-step-tag {
1757-
@apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-lg tv-cursor-pointer tv-bg-zinc-100;
1757+
@apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-xl tv-cursor-pointer tv-bg-zinc-100;
17581758

17591759
&[data-active="true"] {
17601760
background-color: var(--tv-prop-brand-color);

‎server/src/public/search-component-code.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@
6161
{% if params.brandColor -%}
6262
brandColor: "{{ params.brandColor }}",
6363
{% endif -%}
64+
{% if params.brandFontFamily -%}
65+
brandFontFamily: "{{ params.brandFontFamily }}",
66+
{% endif -%}
6467
{% if params.placeholder -%}
6568
placeholder: "{{ params.placeholder }}",
6669
{% endif -%}

0 commit comments

Comments
 (0)