Skip to content

Commit

Permalink
Fixes huggingface#746: dark mode - formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@KartikGS
KartikGS committed Feb 6, 2024
1 parent 85c44b6 commit be637cd
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 30 deletions.
26 changes: 17 additions & 9 deletions src/lib/components/AssistantSettings.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,9 @@
}}
>
{#if assistant}
<h2 class="text-xl font-semibold dark:text-gray-300">Edit assistant ({assistant?.name ?? ""})</h2>
<h2 class="text-xl font-semibold dark:text-gray-300">
Edit assistant ({assistant?.name ?? ""})
</h2>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Modifying an existing assistant will propagate those changes to all users.
</p>
Expand Down Expand Up @@ -208,7 +210,10 @@

<label>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Model</span>
<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">
<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"
>
{#each models.filter((model) => !model.unlisted) as model}
<option
value={model.id}
Expand All @@ -227,27 +232,27 @@
<input
name="exampleInput1"
bind:value={inputMessage1}
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"
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"
/>
{#if !!inputMessage1 || !!inputMessage2}
<input
name="exampleInput2"
bind:value={inputMessage2}
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"
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"
/>
{/if}
{#if !!inputMessage2 || !!inputMessage3}
<input
name="exampleInput3"
bind:value={inputMessage3}
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"
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"
/>
{/if}
{#if !!inputMessage3 || !!inputMessage4}
<input
name="exampleInput4"
bind:value={inputMessage4}
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"
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"
/>
{/if}
</div>
Expand All @@ -256,10 +261,12 @@
</div>

<label class="flex flex-col">
<span class="mb-1 text-sm font-semibold dark:text-gray-300"> Instructions (system prompt) </span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">
Instructions (system prompt)
</span>
<textarea
name="preprompt"
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"
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"
placeholder="You'll act as..."
value={assistant?.preprompt ?? ""}
/>
Expand All @@ -270,7 +277,8 @@
<div class="mt-5 flex justify-end gap-2">
<a
href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
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
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-300"
>Cancel</a
>
<button
type="submit"
Expand Down
27 changes: 20 additions & 7 deletions src/routes/settings/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@
goto(previousPage);
}}
>
<CarbonClose class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200" />
<CarbonClose
class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200"
/>
</button>
</div>
<div
Expand All @@ -64,7 +66,9 @@
<a
href="{base}/settings/{model.id}"
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
{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'}"
{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'}"
>
<div class="truncate">{model.displayName}</div>
{#if model.id === $settings.activeModel}
Expand All @@ -78,14 +82,19 @@
{/each}
<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
{#if data.enableAssistants}
<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">
<h3
bind:this={assistantsSection}
class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300"
>
Assistants
</h3>
{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
<a
href="{base}/settings/assistants/new"
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
{$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'}"
{$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'}"
>
<CarbonAdd />
<div class="truncate">Create new assistant</div>
Expand All @@ -95,7 +104,9 @@
<a
href="{base}/settings/assistants/{assistant._id.toString()}"
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
{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'}"
{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'}"
>
{#if assistant.avatar}
<img
Expand All @@ -122,7 +133,7 @@
{/each}
<a
href="{base}/assistants"
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"
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"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
<div class="truncate">Browse Assistants</div>
</a>
Expand All @@ -131,7 +142,9 @@
<a
href="{base}/settings"
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
{$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'}"
{$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'}"
>
<UserIcon class="text-sm" />
Application Settings
Expand Down
12 changes: 9 additions & 3 deletions src/routes/settings/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
</script>

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

Expand Down Expand Up @@ -77,14 +79,18 @@
action="{base}/conversations?/delete"
class="flex w-full flex-col gap-5 p-6 dark:bg-gray-900"
>
<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
<div
class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
>
<h2>Are you sure?</h2>
<button
type="button"
class="group"
on:click|stopPropagation={() => (isConfirmingDeletion = false)}
>
<CarbonClose class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200" />
<CarbonClose
class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200"
/>
</button>
</div>
<p class="text-gray-800 dark:text-gray-300">
Expand Down
41 changes: 30 additions & 11 deletions src/routes/settings/assistants/[assistantId]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@
<h1 class="mr-2 inline text-xl font-semibold dark:text-gray-300">
{assistant?.name}
</h1>
<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
<span
class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
>public</span
>
</div>
Expand All @@ -66,9 +67,7 @@
{assistant?.createdByName}
</a>
</p>
<div
class="flex items-center gap-4 whitespace-nowrap text-sm"
>
<div class="flex items-center gap-4 whitespace-nowrap text-sm">
<button
class="{isActive
? 'bg-gray-100 text-gray-800 dark:bg-gray-300 dark:text-gray-900'
Expand All @@ -82,33 +81,51 @@
{isActive ? "Active" : "Activate"}
</button>
{#if assistant?.createdByMe}
<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"
<a
href="{base}/settings/assistants/{assistant?._id}/edit"
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
><CarbonPen class="mr-1.5 inline text-xs" />Edit
</a>
<form method="POST" action="?/delete" use:enhance>
<button type="submit" class="flex items-center underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
<button
type="submit"
class="flex items-center text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
>
<CarbonTrash class="mr-1.5 inline text-xs" />Delete</button
>
</form>
{:else}
<form method="POST" action="?/unsubscribe" use:enhance>
<button type="submit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
<button
type="submit"
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
>
<CarbonTrash class="mr-1.5 inline text-xs" />Remove</button
>
</form>
<form method="POST" action="?/edit" use:enhance class="hidden">
<button type="submit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
<button
type="submit"
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
>
<CarbonCopy class="mr-1.5 inline text-xs" />Duplicate</button
>
</form>
{#if !assistant?.reported}
<form method="POST" action="?/report" use:enhance>
<button type="submit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
<button
type="submit"
class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
>
<CarbonFlag class="mr-1.5 inline text-xs" />Report</button
>
</form>
{:else}
<button type="button" disabled class="text-gray-700 hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300">
<button
type="button"
disabled
class="text-gray-700 hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300"
>
<CarbonFlag class="mr-1.5 inline text-xs" />Reported</button
>
{/if}
Expand All @@ -120,7 +137,9 @@
<div>
<h2 class="text-lg font-semibold dark:text-gray-300">Direct URL</h2>

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

<div
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"
Expand Down

0 comments on commit be637cd

Please sign in to comment.