Skip to content

Commit

Permalink
Fixes huggingface#746: settings page in dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@KartikGS
KartikGS committed Feb 5, 2024
1 parent 2468399 commit 85c44b6
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 81 deletions.
44 changes: 22 additions & 22 deletions src/lib/components/AssistantSettings.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,13 @@
}}
>
{#if assistant}
<h2 class="text-xl font-semibold">Edit assistant ({assistant?.name ?? ""})</h2>
<p class="mb-6 text-sm text-gray-500">
<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>
{:else}
<h2 class="text-xl font-semibold">Create new assistant</h2>
<p class="mb-6 text-sm text-gray-500">
<h2 class="text-xl font-semibold dark:text-gray-300">Create new assistant</h2>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Create and share your own AI Assistant. All assistants are <span
class="rounded-full border px-2 py-0.5 leading-none">public</span
>
Expand All @@ -126,7 +126,7 @@
<div class="mx-1 grid flex-1 grid-cols-2 gap-4 max-sm:grid-cols-1">
<div class="flex flex-col gap-4">
<div>
<span class="mb-1 block pb-2 text-sm font-semibold">Avatar</span>
<span class="mb-1 block pb-2 text-sm font-semibold dark:text-gray-300">Avatar</span>
<input
type="file"
accept="image/*"
Expand Down Expand Up @@ -166,7 +166,7 @@
files = null;
deleteExistingAvatar = true;
}}
class="mx-auto w-max text-center text-xs text-gray-600 hover:underline"
class="mx-auto w-max text-center text-xs text-gray-600 hover:underline dark:text-gray-400"
>
Delete
</button>
Expand All @@ -175,7 +175,7 @@
<div class="mb-1 flex w-max flex-row gap-4">
<label
for="avatar"
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"
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"
>
<CarbonUpload class="mr-2 text-xs " /> Upload
</label>
Expand All @@ -185,30 +185,30 @@
</div>

<label>
<span class="mb-1 text-sm font-semibold">Name</span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Name</span>
<input
name="name"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
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"
placeholder="My awesome model"
value={assistant?.name ?? ""}
/>
<p class="text-xs text-red-500">{getError("name", form)}</p>
</label>

<label>
<span class="mb-1 text-sm font-semibold">Description</span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Description</span>
<textarea
name="description"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
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"
placeholder="He knows everything about python"
value={assistant?.description ?? ""}
/>
<p class="text-xs text-red-500">{getError("description", form)}</p>
</label>

<label>
<span class="mb-1 text-sm font-semibold">Model</span>
<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2">
<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">
{#each models.filter((model) => !model.unlisted) as model}
<option
value={model.id}
Expand All @@ -222,32 +222,32 @@
</label>

<label>
<span class="mb-1 text-sm font-semibold">User start messages</span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">User start messages</span>
<div class="flex flex-col gap-2 md:max-h-32">
<input
name="exampleInput1"
bind:value={inputMessage1}
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
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"
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"
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"
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 +256,10 @@
</div>

<label class="flex flex-col">
<span class="mb-1 text-sm font-semibold"> 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"
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,13 +270,13 @@
<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">Cancel</a
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
>
<button
type="submit"
disabled={loading}
aria-disabled={loading}
class="rounded-full bg-black px-8 py-2 font-semibold md:px-20"
class="rounded-full bg-black px-8 py-2 font-semibold md:px-20 dark:bg-gray-300 dark:text-gray-900"
class:bg-gray-200={loading}
class:text-gray-600={loading}
class:text-white={!loading}
Expand Down
34 changes: 17 additions & 17 deletions src/routes/settings/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,34 +42,34 @@
use:clickOutside={() => {
goto(previousPage);
}}
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]"
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"
>
<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
<h2 class="text-xl font-bold">Settings</h2>
<h2 class="text-xl font-bold dark:text-gray-300">Settings</h2>
<button
class="btn rounded-lg"
on:click={() => {
goto(previousPage);
}}
>
<CarbonClose class="text-xl text-gray-900 hover:text-black" />
<CarbonClose class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200" />
</button>
</div>
<div
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"
>
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3>
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">Models</h3>

{#each data.models.filter((el) => !el.unlisted) as model}
<a
href="{base}/settings/{model.id}"
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
{model.id === $page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
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'}"
>
<div class="truncate">{model.displayName}</div>
{#if model.id === $settings.activeModel}
<div
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
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"
>
Active
</div>
Expand All @@ -78,14 +78,14 @@
{/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">
<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 text-gray-500 hover:bg-gray-100 md:rounded-xl
{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
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'}"
>
<CarbonAdd />
<div class="truncate">Create new assistant</div>
Expand All @@ -94,8 +94,8 @@
{#each data.assistants as assistant}
<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 text-gray-500 hover:bg-gray-100 md:rounded-xl
{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
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'}"
>
{#if assistant.avatar}
<img
Expand All @@ -113,7 +113,7 @@
<div class="truncate">{assistant.name}</div>
{#if assistant._id.toString() === $settings.activeModel}
<div
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
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"
>
Active
</div>
Expand All @@ -122,16 +122,16 @@
{/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"
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"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
<div class="truncate">Browse Assistants</div>
</a>
{/if}

<a
href="{base}/settings"
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
{$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
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'}"
>
<UserIcon class="text-sm" />
Application Settings
Expand All @@ -143,7 +143,7 @@

{#if $settings.recentlySaved}
<div
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"
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"
>
<CarbonCheckmark class="text-green-500" />
Saved
Expand Down
22 changes: 11 additions & 11 deletions src/routes/settings/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</script>

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

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

<p class="text-sm text-gray-500">
<p class="text-sm text-gray-500 dark:text-gray-400">
Sharing your data will help improve the training data and make open models better over time.
</p>
{/if}
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="mt-6 flex items-center">
<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
Hide emoticons in conversation topics
</div>
</label>
Expand All @@ -55,13 +55,13 @@
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
target="_blank"
rel="noreferrer"
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
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"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
>
<button
on:click|preventDefault={() => (isConfirmingDeletion = true)}
type="submit"
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
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"
><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
>
</div>
Expand All @@ -75,24 +75,24 @@
}}
method="post"
action="{base}/conversations?/delete"
class="flex w-full flex-col gap-5 p-6"
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">
<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" />
<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">
<p class="text-gray-800 dark:text-gray-300">
This action will delete all your conversations. This cannot be undone.
</p>
<button
type="submit"
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"
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"
>
Confirm deletion
</button>
Expand Down
Loading

0 comments on commit 85c44b6

Please sign in to comment.