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

style: update text color for better visibility in StorageAndPlan component

Browse source 
style: enhance global scrollbar styling
This commit is contained in:
grngxd 2025-08-08 23:20:41 +01:00
parent 30b3ae5044
commit 82bda3850f
2 changed files with 14 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,13 +28,16 @@ const StorageAndPlan = component$(() => {
<svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6v2a6 6 0 01-12 0V8a6 6 0 016-6zm0 2a4 4 0 00-4 4v2a4 4 0 008 0V8a4 4 0 00-4-4z"/></svg>
<p class="text-white/80">current plan: <span class="text-stereo font-semibold">pro+</span></p>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v10H4V5zm2 2v6h8V7H6z"/></svg>
<p class="text-white/80">storage used: <span class="font-semibold text-white">3.8</span> / <span class="text-white/50">15 GB</span></p>
</div>
<div class="w-full h-2 bg-white/10 rounded-full overflow-hidden mt-1 mb-2">
<div class="h-full bg-stereo rounded-full w-[calc(3.8/15*100%)]" />
</div>
<p class="text-sm text-white/40">upgrade your plan for more features</p>
</div>
@ -84,7 +87,7 @@ const StorageAndPlan = component$(() => {
<div class="flex flex-col gap-2">
<div class="flex flex-col">
<p class="text-sm text-white/70">title</p>
<p class="text-sm text-white/50">title</p>
<input
type="text"
class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
@ -95,7 +98,7 @@ const StorageAndPlan = component$(() => {
</div>
<div class="flex flex-col">
<p class="text-sm text-white/70">description</p>
<p class="text-sm text-white/50">description</p>
<textarea
class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
placeholder="enter a description..."
@ -106,7 +109,7 @@ const StorageAndPlan = component$(() => {
</div>
<div class="flex flex-col">
<p class="text-sm text-white/70">color</p>
<p class="text-sm text-white/50">color</p>
<input
type="color"
class="bg-black/40 rounded-lg w-full"

8
src/global.css
View file

@ -1,7 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import "tailwindcss";
@plugin 'tailwind-scrollbar' {
nocompatible: true;
}
@theme {
--font-sans: 'DM Sans', sans-serif;
--color-stereo: #ff264e;
}
* {
@apply scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-white/30 scrollbar-track-white/10;
}