Skip to content

Commit 851a7a4

Browse files
KartikGSKartikGS
committed
Fixes huggingface#746: dark mode - formatting
1 parent d00ecbb commit 851a7a4

File tree

4 files changed

+76
-30
lines changed

4 files changed

+76
-30
lines changed

‎src/lib/components/AssistantSettings.svelte

+17-9
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,9 @@
110110
}}
111111
>
112112
{#if assistant}
113-
<h2 class="text-xl font-semibold dark:text-gray-300">Edit assistant ({assistant?.name ?? ""})</h2>
113+
<h2 class="text-xl font-semibold dark:text-gray-300">
114+
Edit assistant ({assistant?.name ?? ""})
115+
</h2>
114116
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
115117
Modifying an existing assistant will propagate those changes to all users.
116118
</p>
@@ -208,7 +210,10 @@
208210

209211
<label>
210212
<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">
213+
<select
214+
name="modelId"
215+
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"
216+
>
212217
{#each models.filter((model) => !model.unlisted) as model}
213218
<option
214219
value={model.id}
@@ -227,27 +232,27 @@
227232
<input
228233
name="exampleInput1"
229234
bind:value={inputMessage1}
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"
235+
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"
231236
/>
232237
{#if !!inputMessage1 || !!inputMessage2}
233238
<input
234239
name="exampleInput2"
235240
bind:value={inputMessage2}
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"
241+
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"
237242
/>
238243
{/if}
239244
{#if !!inputMessage2 || !!inputMessage3}
240245
<input
241246
name="exampleInput3"
242247
bind:value={inputMessage3}
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"
248+
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"
244249
/>
245250
{/if}
246251
{#if !!inputMessage3 || !!inputMessage4}
247252
<input
248253
name="exampleInput4"
249254
bind:value={inputMessage4}
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"
255+
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"
251256
/>
252257
{/if}
253258
</div>
@@ -256,10 +261,12 @@
256261
</div>
257262

258263
<label class="flex flex-col">
259-
<span class="mb-1 text-sm font-semibold dark:text-gray-300"> Instructions (system prompt) </span>
264+
<span class="mb-1 text-sm font-semibold dark:text-gray-300">
265+
Instructions (system prompt)
266+
</span>
260267
<textarea
261268
name="preprompt"
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"
269+
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"
263270
placeholder="You'll act as..."
264271
value={assistant?.preprompt ?? ""}
265272
/>
@@ -270,7 +277,8 @@
270277
<div class="mt-5 flex justify-end gap-2">
271278
<a
272279
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 dark:text-gray-300 dark:bg-gray-700">Cancel</a
280+
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-300"
281+
>Cancel</a
274282
>
275283
<button
276284
type="submit"

‎src/routes/settings/+layout.svelte

+20-7
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
goto(previousPage);
5353
}}
5454
>
55-
<CarbonClose class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200" />
55+
<CarbonClose
56+
class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200"
57+
/>
5658
</button>
5759
</div>
5860
<div
@@ -64,7 +66,9 @@
6466
<a
6567
href="{base}/settings/{model.id}"
6668
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'}"
69+
{model.id === $page.params.model
70+
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
71+
: 'text-gray-500 dark:text-gray-400'}"
6872
>
6973
<div class="truncate">{model.displayName}</div>
7074
{#if model.id === $settings.activeModel}
@@ -78,14 +82,19 @@
7882
{/each}
7983
<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
8084
{#if data.enableAssistants}
81-
<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">
85+
<h3
86+
bind:this={assistantsSection}
87+
class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300"
88+
>
8289
Assistants
8390
</h3>
8491
{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
8592
<a
8693
href="{base}/settings/assistants/new"
8794
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'}"
95+
{$page.url.pathname === `${base}/settings/assistants/new`
96+
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
97+
: 'text-gray-500 dark:text-gray-400'}"
8998
>
9099
<CarbonAdd />
91100
<div class="truncate">Create new assistant</div>
@@ -95,7 +104,9 @@
95104
<a
96105
href="{base}/settings/assistants/{assistant._id.toString()}"
97106
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'}"
107+
{assistant._id.toString() === $page.params.assistantId
108+
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
109+
: 'text-gray-500 dark:text-gray-400'}"
99110
>
100111
{#if assistant.avatar}
101112
<img
@@ -122,7 +133,7 @@
122133
{/each}
123134
<a
124135
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 dark:hover:bg-gray-800 dark:text-gray-400"
136+
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:text-gray-400 dark:hover:bg-gray-800"
126137
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
127138
<div class="truncate">Browse Assistants</div>
128139
</a>
@@ -131,7 +142,9 @@
131142
<a
132143
href="{base}/settings"
133144
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'}"
145+
{$page.url.pathname === `${base}/settings`
146+
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
147+
: 'text-gray-500 dark:text-gray-400'}"
135148
>
136149
<UserIcon class="text-sm" />
137150
Application Settings

‎src/routes/settings/+page.svelte

+9-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
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 dark:text-gray-300">
24+
<div
25+
class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
26+
>
2527
<h2>Application Settings</h2>
2628
</div>
2729

@@ -77,14 +79,18 @@
7779
action="{base}/conversations?/delete"
7880
class="flex w-full flex-col gap-5 p-6 dark:bg-gray-900"
7981
>
80-
<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
82+
<div
83+
class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
84+
>
8185
<h2>Are you sure?</h2>
8286
<button
8387
type="button"
8488
class="group"
8589
on:click|stopPropagation={() => (isConfirmingDeletion = false)}
8690
>
87-
<CarbonClose class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200" />
91+
<CarbonClose
92+
class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200"
93+
/>
8894
</button>
8995
</div>
9096
<p class="text-gray-800 dark:text-gray-300">

‎src/routes/settings/assistants/[assistantId]/+page.svelte

+30-11
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@
4848
<h1 class="mr-2 inline text-xl font-semibold dark:text-gray-300">
4949
{assistant?.name}
5050
</h1>
51-
<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
51+
<span
52+
class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
5253
>public</span
5354
>
5455
</div>
@@ -66,9 +67,7 @@
6667
{assistant?.createdByName}
6768
</a>
6869
</p>
69-
<div
70-
class="flex items-center gap-4 whitespace-nowrap text-sm"
71-
>
70+
<div class="flex items-center gap-4 whitespace-nowrap text-sm">
7271
<button
7372
class="{isActive
7473
? 'bg-gray-100 text-gray-800 dark:bg-gray-300 dark:text-gray-900'
@@ -82,33 +81,51 @@
8281
{isActive ? "Active" : "Activate"}
8382
</button>
8483
{#if assistant?.createdByMe}
85-
<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
84+
<a
85+
href="{base}/settings/assistants/{assistant?._id}/edit"
86+
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
8687
><CarbonPen class="mr-1.5 inline text-xs" />Edit
8788
</a>
8889
<form method="POST" action="?/delete" use:enhance>
89-
<button type="submit" class="flex items-center underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
90+
<button
91+
type="submit"
92+
class="flex items-center text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
93+
>
9094
<CarbonTrash class="mr-1.5 inline text-xs" />Delete</button
9195
>
9296
</form>
9397
{:else}
9498
<form method="POST" action="?/unsubscribe" use:enhance>
95-
<button type="submit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
99+
<button
100+
type="submit"
101+
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
102+
>
96103
<CarbonTrash class="mr-1.5 inline text-xs" />Remove</button
97104
>
98105
</form>
99106
<form method="POST" action="?/edit" use:enhance class="hidden">
100-
<button type="submit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
107+
<button
108+
type="submit"
109+
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
110+
>
101111
<CarbonCopy class="mr-1.5 inline text-xs" />Duplicate</button
102112
>
103113
</form>
104114
{#if !assistant?.reported}
105115
<form method="POST" action="?/report" use:enhance>
106-
<button type="submit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
116+
<button
117+
type="submit"
118+
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
119+
>
107120
<CarbonFlag class="mr-1.5 inline text-xs" />Report</button
108121
>
109122
</form>
110123
{:else}
111-
<button type="button" disabled class="text-gray-700 hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300">
124+
<button
125+
type="button"
126+
disabled
127+
class="text-gray-700 hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300"
128+
>
112129
<CarbonFlag class="mr-1.5 inline text-xs" />Reported</button
113130
>
114131
{/if}
@@ -120,7 +137,9 @@
120137
<div>
121138
<h2 class="text-lg font-semibold dark:text-gray-300">Direct URL</h2>
122139

123-
<p class="pb-2 text-sm text-gray-500 dark:text-gray-400">Share this link for people to use your assistant.</p>
140+
<p class="pb-2 text-sm text-gray-500 dark:text-gray-400">
141+
Share this link for people to use your assistant.
142+
</p>
124143

125144
<div
126145
class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"

0 commit comments

Comments
 (0)