fix: update scrollbar colors for consistency and improve loading spinner visibility

This commit is contained in:
grngxd 2025-08-09 12:14:17 +01:00
parent 82bda3850f
commit d7512bc151
3 changed files with 8 additions and 6 deletions

View file

@ -62,7 +62,7 @@ const StorageAndPlan = component$(() => {
<div class="overflow-clip flex bg-black/25 rounded-lg"> <div class="overflow-clip flex bg-black/25 rounded-lg">
{(title.value || description.value) ? ( {(title.value || description.value) ? (
<> <>
<div class="w-1.5" style={{ backgroundColor: color.value }} /> <div class="w-1" style={{ backgroundColor: color.value }} />
<div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg"> <div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
<div class="flex flex-col"> <div class="flex flex-col">
{ title.value && <p>{title.value}</p> } { title.value && <p>{title.value}</p> }

View file

@ -11,5 +11,5 @@
} }
* { * {
@apply scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-white/30 scrollbar-track-white/10; @apply scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-stereo/30 scrollbar-track-stereo/10;
} }

View file

@ -6,6 +6,7 @@ import Actionbar from "~/components/dashboard/Actionbar";
import Settings from "~/components/dashboard/Settings"; import Settings from "~/components/dashboard/Settings";
import Thumbhash from "~/components/dashboard/Thumbhash"; import Thumbhash from "~/components/dashboard/Thumbhash";
import Titlebar from "~/components/dashboard/Titlebar"; import Titlebar from "~/components/dashboard/Titlebar";
import { SvgSpinnersBarsRotateFade } from "~/components/misc/Icons";
import { useNanostore$ } from "~/hooks/nanostores"; import { useNanostore$ } from "~/hooks/nanostores";
// import Dropzone from "~/components/Dropzone"; // import Dropzone from "~/components/Dropzone";
import { api } from "~/lib/api"; import { api } from "~/lib/api";
@ -201,14 +202,15 @@ const Files = component$(() => {
{hasMore.value && ( {hasMore.value && (
<div <div
ref={sentinel} ref={sentinel}
class="absolute bottom-0 left-0 h-1/2 flex items-center justify-center w-full" class="absolute bottom-0 left-0 h-1/2 flex items-end justify-center pb-16 w-full"
> >
{/* {loadingMore.value && ( {loadingMore.value && (
loading spinner? <SvgSpinnersBarsRotateFade class="text-stereo text-3xl"/>
)} */} )}
</div> </div>
)} )}
</div> </div>
{!hasMore.value && <p class="text-center font-medium text-xl text-stereo/35 mb-16 mt-8">thats all folks!!!</p>}
</div> </div>
); );
}); });