stereo.cat/frontend
2
1
Fork 0
Code Issues 4 Pull requests Projects 1 Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/components/dashboard/Settings.tsx
View file

@ -62,7 +62,7 @@ const StorageAndPlan = component$(() => {
<div class="overflow-clip flex bg-black/25 rounded-lg">
{(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">
{ title.value && <p>{title.value}</p> }

2
src/global.css
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;
}

10
src/routes/dashboard/index.tsx
View file

@ -6,6 +6,7 @@ import Actionbar from "~/components/dashboard/Actionbar";
import Settings from "~/components/dashboard/Settings";
import Thumbhash from "~/components/dashboard/Thumbhash";
import Titlebar from "~/components/dashboard/Titlebar";
import { SvgSpinnersBarsRotateFade } from "~/components/misc/Icons";
import { useNanostore$ } from "~/hooks/nanostores";
// import Dropzone from "~/components/Dropzone";
import { api } from "~/lib/api";
@ -201,14 +202,15 @@ const Files = component$(() => {
{hasMore.value && (
<div
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 && (
loading spinner?
)} */}
{loadingMore.value && (
<SvgSpinnersBarsRotateFade class="text-stereo text-3xl"/>
)}
</div>
)}
</div>
{!hasMore.value && <p class="text-center font-medium text-xl text-stereo/35 mb-16 mt-8">thats all folks!!!</p>}
</div>
);
});