refac: styling

This commit is contained in:
Timothy J. Baek 2024-10-03 23:41:17 -07:00
parent 90ef9f751a
commit 75fae69def
6 changed files with 39 additions and 6 deletions

View File

@ -144,6 +144,7 @@
files = files.filter((item) => item.status !== null);
}
};
const inputFilesHandler = async (inputFiles) => {
inputFiles.forEach((file) => {
console.log(file, file.name.split('.').at(-1));

View File

@ -48,7 +48,7 @@
dispatch('click');
}}
>
<div class="p-3 bg-white/10 text-white rounded-xl">
<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
{#if status === 'processed'}
<svg
xmlns="http://www.w3.org/2000/svg"
@ -105,7 +105,7 @@
{/if}
</div>
<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
<div class="flex flex-col justify-center -space-y-0.5 ml-1 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
{name}
</div>

View File

@ -0,0 +1,20 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
stroke="currentColor"
class={className}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width={strokeWidth}
d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"
/>
</svg>

View File

@ -27,6 +27,8 @@
import { processFile } from '$lib/apis/retrieval';
import AddContentMenu from './Collection/AddContentMenu.svelte';
import AddTextContentModal from './Collection/AddTextContentModal.svelte';
import Check from '$lib/components/icons/Check.svelte';
import FloppyDisk from '$lib/components/icons/FloppyDisk.svelte';
let largeScreen = true;
@ -410,10 +412,20 @@
<div class="flex-1 flex justify-start max-h-full overflow-hidden pl-3">
{#if selectedFile}
<div class=" flex flex-col w-full h-full">
<div class=" flex-shrink-0 mb-2">
<div class=" text-xl line-clamp-1">
<div class=" flex-shrink-0 mb-2 flex items-center">
<div class=" flex-1 text-xl line-clamp-1">
{selectedFile?.meta?.name}
</div>
<div>
<Tooltip content="Save">
<button
class="self-center w-fit text-sm py-1 px-2.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-lg"
>
Save
</button>
</Tooltip>
</div>
</div>
<div class=" flex-grow">

View File

@ -35,7 +35,7 @@
>
<Tooltip content={$i18n.t('Add Content')}>
<button
class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
class=" px-2 py-2 rounded-xl border border-gray-50 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
on:click={(e) => {
e.stopPropagation();
show = true;

View File

@ -14,7 +14,7 @@
<FileItem
className="w-full"
colorClassName="{selectedFileId === file.id
? 'bg-gray-850'
? ' bg-gray-50 dark:bg-gray-850'
: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
{file}
name={file.meta.name}