Skip to content

Commit d741c2a

Browse files
KartikGSKartikGS
committed
Fixes huggingface#746: settings page dark mode - rebase
1 parent 6d68eb5 commit d741c2a

File tree

5 files changed

+81
-81
lines changed

5 files changed

+81
-81
lines changed

‎src/lib/components/AssistantSettings.svelte

+22-22
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,13 @@
110110
}}
111111
>
112112
{#if assistant}
113-
<h2 class="text-xl font-semibold">Edit assistant ({assistant?.name ?? ""})</h2>
114-
<p class="mb-6 text-sm text-gray-500">
113+
<h2 class="text-xl font-semibold dark:text-gray-300">Edit assistant ({assistant?.name ?? ""})</h2>
114+
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
115115
Modifying an existing assistant will propagate those changes to all users.
116116
</p>
117117
{:else}
118-
<h2 class="text-xl font-semibold">Create new assistant</h2>
119-
<p class="mb-6 text-sm text-gray-500">
118+
<h2 class="text-xl font-semibold dark:text-gray-300">Create new assistant</h2>
119+
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
120120
Create and share your own AI Assistant. All assistants are <span
121121
class="rounded-full border px-2 py-0.5 leading-none">public</span
122122
>
@@ -126,7 +126,7 @@
126126
<div class="mx-1 grid flex-1 grid-cols-2 gap-4 max-sm:grid-cols-1">
127127
<div class="flex flex-col gap-4">
128128
<div>
129-
<span class="mb-1 block pb-2 text-sm font-semibold">Avatar</span>
129+
<span class="mb-1 block pb-2 text-sm font-semibold dark:text-gray-300">Avatar</span>
130130
<input
131131
type="file"
132132
accept="image/*"
@@ -166,7 +166,7 @@
166166
files = null;
167167
deleteExistingAvatar = true;
168168
}}
169-
class="mx-auto w-max text-center text-xs text-gray-600 hover:underline"
169+
class="mx-auto w-max text-center text-xs text-gray-600 hover:underline dark:text-gray-400"
170170
>
171171
Delete
172172
</button>
@@ -175,7 +175,7 @@
175175
<div class="mb-1 flex w-max flex-row gap-4">
176176
<label
177177
for="avatar"
178-
class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100"
178+
class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:bg-gray-700"
179179
>
180180
<CarbonUpload class="mr-2 text-xs " /> Upload
181181
</label>
@@ -185,30 +185,30 @@
185185
</div>
186186

187187
<label>
188-
<span class="mb-1 text-sm font-semibold">Name</span>
188+
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Name</span>
189189
<input
190190
name="name"
191-
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
191+
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
192192
placeholder="My awesome model"
193193
value={assistant?.name ?? ""}
194194
/>
195195
<p class="text-xs text-red-500">{getError("name", form)}</p>
196196
</label>
197197

198198
<label>
199-
<span class="mb-1 text-sm font-semibold">Description</span>
199+
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Description</span>
200200
<textarea
201201
name="description"
202-
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
202+
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
203203
placeholder="He knows everything about python"
204204
value={assistant?.description ?? ""}
205205
/>
206206
<p class="text-xs text-red-500">{getError("description", form)}</p>
207207
</label>
208208

209209
<label>
210-
<span class="mb-1 text-sm font-semibold">Model</span>
211-
<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2">
210+
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Model</span>
211+
<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
212212
{#each models.filter((model) => !model.unlisted) as model}
213213
<option
214214
value={model.id}
@@ -222,32 +222,32 @@
222222
</label>
223223

224224
<label>
225-
<span class="mb-1 text-sm font-semibold">User start messages</span>
225+
<span class="mb-1 text-sm font-semibold dark:text-gray-300">User start messages</span>
226226
<div class="flex flex-col gap-2 md:max-h-32">
227227
<input
228228
name="exampleInput1"
229229
bind:value={inputMessage1}
230-
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
230+
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
231231
/>
232232
{#if !!inputMessage1 || !!inputMessage2}
233233
<input
234234
name="exampleInput2"
235235
bind:value={inputMessage2}
236-
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
236+
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
237237
/>
238238
{/if}
239239
{#if !!inputMessage2 || !!inputMessage3}
240240
<input
241241
name="exampleInput3"
242242
bind:value={inputMessage3}
243-
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
243+
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
244244
/>
245245
{/if}
246246
{#if !!inputMessage3 || !!inputMessage4}
247247
<input
248248
name="exampleInput4"
249249
bind:value={inputMessage4}
250-
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
250+
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
251251
/>
252252
{/if}
253253
</div>
@@ -256,10 +256,10 @@
256256
</div>
257257

258258
<label class="flex flex-col">
259-
<span class="mb-1 text-sm font-semibold"> Instructions (system prompt) </span>
259+
<span class="mb-1 text-sm font-semibold dark:text-gray-300"> Instructions (system prompt) </span>
260260
<textarea
261261
name="preprompt"
262-
class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
262+
class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
263263
placeholder="You'll act as..."
264264
value={assistant?.preprompt ?? ""}
265265
/>
@@ -270,13 +270,13 @@
270270
<div class="mt-5 flex justify-end gap-2">
271271
<a
272272
href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
273-
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600">Cancel</a
273+
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:text-gray-300 dark:bg-gray-700">Cancel</a
274274
>
275275
<button
276276
type="submit"
277277
disabled={loading}
278278
aria-disabled={loading}
279-
class="rounded-full bg-black px-8 py-2 font-semibold md:px-20"
279+
class="rounded-full bg-black px-8 py-2 font-semibold md:px-20 dark:bg-gray-300 dark:text-gray-900"
280280
class:bg-gray-200={loading}
281281
class:text-gray-600={loading}
282282
class:text-white={!loading}

‎src/routes/settings/+layout.svelte

+17-17
Original file line numberDiff line numberDiff line change
@@ -42,34 +42,34 @@
4242
use:clickOutside={() => {
4343
goto(previousPage);
4444
}}
45-
class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
45+
class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh] dark:bg-gray-900"
4646
>
4747
<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
48-
<h2 class="text-xl font-bold">Settings</h2>
48+
<h2 class="text-xl font-bold dark:text-gray-300">Settings</h2>
4949
<button
5050
class="btn rounded-lg"
5151
on:click={() => {
5252
goto(previousPage);
5353
}}
5454
>
55-
<CarbonClose class="text-xl text-gray-900 hover:text-black" />
55+
<CarbonClose class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200" />
5656
</button>
5757
</div>
5858
<div
5959
class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
6060
>
61-
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3>
61+
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">Models</h3>
6262

6363
{#each data.models.filter((el) => !el.unlisted) as model}
6464
<a
6565
href="{base}/settings/{model.id}"
66-
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
67-
{model.id === $page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
66+
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
67+
{model.id === $page.params.model ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
6868
>
6969
<div class="truncate">{model.displayName}</div>
7070
{#if model.id === $settings.activeModel}
7171
<div
72-
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
72+
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white dark:bg-gray-300 dark:text-gray-900"
7373
>
7474
Active
7575
</div>
@@ -78,14 +78,14 @@
7878
{/each}
7979
<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
8080
{#if data.enableAssistants}
81-
<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
81+
<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">
8282
Assistants
8383
</h3>
8484
{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
8585
<a
8686
href="{base}/settings/assistants/new"
87-
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
88-
{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
87+
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
88+
{$page.url.pathname === `${base}/settings/assistants/new` ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
8989
>
9090
<CarbonAdd />
9191
<div class="truncate">Create new assistant</div>
@@ -94,8 +94,8 @@
9494
{#each data.assistants as assistant}
9595
<a
9696
href="{base}/settings/assistants/{assistant._id.toString()}"
97-
class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
98-
{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
97+
class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
98+
{assistant._id.toString() === $page.params.assistantId ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
9999
>
100100
{#if assistant.avatar}
101101
<img
@@ -113,7 +113,7 @@
113113
<div class="truncate">{assistant.name}</div>
114114
{#if assistant._id.toString() === $settings.activeModel}
115115
<div
116-
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
116+
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white dark:bg-gray-300 dark:text-gray-900"
117117
>
118118
Active
119119
</div>
@@ -122,16 +122,16 @@
122122
{/each}
123123
<a
124124
href="{base}/assistants"
125-
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl"
125+
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800 dark:text-gray-400"
126126
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
127127
<div class="truncate">Browse Assistants</div>
128128
</a>
129129
{/if}
130130

131131
<a
132132
href="{base}/settings"
133-
class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
134-
{$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
133+
class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 max-md:order-first md:rounded-xl dark:hover:bg-gray-800
134+
{$page.url.pathname === `${base}/settings` ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
135135
>
136136
<UserIcon class="text-sm" />
137137
Application Settings
@@ -143,7 +143,7 @@
143143

144144
{#if $settings.recentlySaved}
145145
<div
146-
class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
146+
class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300"
147147
>
148148
<CarbonCheckmark class="text-green-500" />
149149
Saved

‎src/routes/settings/+page.svelte

+11-11
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</script>
2222

2323
<div class="flex w-full flex-col gap-5">
24-
<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
24+
<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
2525
<h2>Application Settings</h2>
2626
</div>
2727

@@ -33,19 +33,19 @@
3333
name="shareConversationsWithModelAuthors"
3434
bind:checked={$settings.shareConversationsWithModelAuthors}
3535
/>
36-
<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
36+
<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
3737
Share conversations with model authors
3838
</div>
3939
</label>
4040

41-
<p class="text-sm text-gray-500">
41+
<p class="text-sm text-gray-500 dark:text-gray-400">
4242
Sharing your data will help improve the training data and make open models better over time.
4343
</p>
4444
{/if}
4545
<!-- svelte-ignore a11y-label-has-associated-control -->
4646
<label class="mt-6 flex items-center">
4747
<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
48-
<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
48+
<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
4949
Hide emoticons in conversation topics
5050
</div>
5151
</label>
@@ -55,13 +55,13 @@
5555
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
5656
target="_blank"
5757
rel="noreferrer"
58-
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
58+
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-700 dark:hover:decoration-gray-300"
5959
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
6060
>
6161
<button
6262
on:click|preventDefault={() => (isConfirmingDeletion = true)}
6363
type="submit"
64-
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
64+
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-700 dark:hover:decoration-gray-300"
6565
><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
6666
>
6767
</div>
@@ -75,24 +75,24 @@
7575
}}
7676
method="post"
7777
action="{base}/conversations?/delete"
78-
class="flex w-full flex-col gap-5 p-6"
78+
class="flex w-full flex-col gap-5 p-6 dark:bg-gray-900"
7979
>
80-
<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
80+
<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
8181
<h2>Are you sure?</h2>
8282
<button
8383
type="button"
8484
class="group"
8585
on:click|stopPropagation={() => (isConfirmingDeletion = false)}
8686
>
87-
<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
87+
<CarbonClose class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200" />
8888
</button>
8989
</div>
90-
<p class="text-gray-800">
90+
<p class="text-gray-800 dark:text-gray-300">
9191
This action will delete all your conversations. This cannot be undone.
9292
</p>
9393
<button
9494
type="submit"
95-
class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
95+
class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring dark:text-gray-300 dark:ring-offset-gray-900"
9696
>
9797
Confirm deletion
9898
</button>

0 commit comments

Comments
 (0)