Skip to content

GitLab

Commit 8942d0d0 authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

refac: styling

parent eb1e176f
Hide whitespace changes
Inline Side-by-side
Showing with 29 additions and 27 deletions
src/lib/components/admin/Settings.svelte
View file @ 8942d0d0
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab ===
'general' 'general'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
...@@ -70,8 +70,8 @@ ...@@ -70,8 +70,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'users' 'users'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'users'; selectedTab = 'users';
}} }}
...@@ -94,8 +94,8 @@ ...@@ -94,8 +94,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'connections' 'connections'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'connections'; selectedTab = 'connections';
}} }}
...@@ -118,8 +118,8 @@ ...@@ -118,8 +118,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'models' 'models'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'models'; selectedTab = 'models';
}} }}
...@@ -144,8 +144,8 @@ ...@@ -144,8 +144,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'documents' 'documents'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'documents'; selectedTab = 'documents';
}} }}
...@@ -174,8 +174,8 @@ ...@@ -174,8 +174,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'web' 'web'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'web'; selectedTab = 'web';
}} }}
...@@ -198,8 +198,8 @@ ...@@ -198,8 +198,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'interface' 'interface'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'interface'; selectedTab = 'interface';
}} }}
...@@ -224,8 +224,8 @@ ...@@ -224,8 +224,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'audio' 'audio'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'audio'; selectedTab = 'audio';
}} }}
...@@ -251,8 +251,8 @@ ...@@ -251,8 +251,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'images' 'images'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'images'; selectedTab = 'images';
}} }}
...@@ -277,8 +277,8 @@ ...@@ -277,8 +277,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'pipelines' 'pipelines'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'pipelines'; selectedTab = 'pipelines';
}} }}
...@@ -307,8 +307,8 @@ ...@@ -307,8 +307,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'db' 'db'
? 'bg-gray-200 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-850'}" : ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'db'; selectedTab = 'db';
}} }}
......
src/lib/components/admin/Settings/Interface.svelte
View file @ 8942d0d0
...@@ -273,24 +273,26 @@ ...@@ -273,24 +273,26 @@
</div> </div>
<div class="grid lg:grid-cols-2 flex-col gap-1.5"> <div class="grid lg:grid-cols-2 flex-col gap-1.5">
{#each promptSuggestions as prompt, promptIdx} {#each promptSuggestions as prompt, promptIdx}
<div class=" flex dark:bg-gray-850 rounded-xl py-1.5"> <div
class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5"
>
<div class="flex flex-col flex-1 pl-1"> <div class="flex flex-col flex-1 pl-1">
<div class="flex border-b dark:border-gray-800 w-full"> <div class="flex border-b border-gray-100 dark:border-gray-800 w-full">
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-800" class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')} placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
bind:value={prompt.title[0]} bind:value={prompt.title[0]}
/> />
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-800" class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')} placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
bind:value={prompt.title[1]} bind:value={prompt.title[1]}
/> />
</div> </div>
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-800" class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')} placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')}
bind:value={prompt.content} bind:value={prompt.content}
/> />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment