Vibe/VibeFinance
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

Bugfixes

Browse Source
This commit is contained in:
Jordy Hoogeveen
2026-09-15 14:02:17 +02:00
parent 750dc69e56
commit 0b67f346e1
19 changed files with 449 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/index.jsx
+16 -11
View File
@@ -1,5 +1,5 @@
import { useRef, useState, useCallback, useContext, createContext } from "react";
import { PURPLE, PURPLE_LIGHT, EMOJI_OPTIONS } from "../../constants/index.js";
import { EMOJI_OPTIONS } from "../../constants/index.js";
import { useApp } from "../../context/AppContext.jsx";
const DragContext = createContext(null);
@@ -18,11 +18,13 @@ export function VCard({ children, style = {} }) {
}
// ── VBadge ────────────────────────────────────────────────────────────────────
export function VBadge({ label, color = PURPLE }) {
export function VBadge({ label, color }) {
const { T } = useApp();
const kleur = color ?? T.accentTekst;
return (
<span style={{
background: `${color}22`, color,
border: `1px solid ${color}44`,
background: `${kleur}22`, color: kleur,
border: `1px solid ${kleur}44`,
borderRadius: 99, padding: "2px 10px",
fontSize: 11, fontWeight: 700,
}}>
@@ -32,16 +34,17 @@ export function VBadge({ label, color = PURPLE }) {
}
// ── TabBtn ────────────────────────────────────────────────────────────────────
export function TabBtn({ active, onClick, children, darkMode = true }) {
export function TabBtn({ active, onClick, children }) {
const { T } = useApp();
return (
<button
onClick={onClick}
style={{
padding: "8px 16px", border: "none", borderRadius: 8, cursor: "pointer",
fontSize: 13, fontWeight: active ? 700 : 500,
background: active ? `${PURPLE}22` : "transparent",
color: active ? PURPLE_LIGHT : (darkMode ? "#94a3b8" : "#64748b"),
borderBottom: active ? `2px solid ${PURPLE_LIGHT}` : "2px solid transparent",
background: active ? `${T.accent}22` : "transparent",
color: active ? T.accentTekst : T.muted,
borderBottom: active ? `2px solid ${T.accentTekst}` : "2px solid transparent",
transition: "all 0.15s",
}}
>
@@ -51,12 +54,14 @@ export function TabBtn({ active, onClick, children, darkMode = true }) {
}
// ── VProgressBar ──────────────────────────────────────────────────────────────
export function VProgressBar({ value, max, color = PURPLE }) {
export function VProgressBar({ value, max, color }) {
const { T } = useApp();
const kleur = color ?? T.accent;
const p = Math.min((value / (max || 1)) * 100, 100);
return (
<div style={{ height: 8, background: "rgba(255,255,255,0.07)", borderRadius: 99, overflow: "hidden" }}>
<div style={{
height: "100%", width: `${p}%`, background: color,
height: "100%", width: `${p}%`, background: kleur,
borderRadius: 99, transition: "width 0.5s ease",
}} />
</div>
@@ -527,7 +532,7 @@ export function EmptyState({ icon, text, hint, onClick, locked, T }) {
<div style={{ fontSize: 32, marginBottom: 10 }}>{icon}</div>
<div style={{ fontSize: 13, marginBottom: 4 }}>{text}</div>
{!locked && hint && (
<div style={{ fontSize: 12, color: PURPLE_LIGHT }}>{hint}</div>
<div style={{ fontSize: 12, color: T.accentTekst }}>{hint}</div>
)}
</div>
);