darkmode is now available

This commit is contained in:
2026-05-07 13:42:46 +02:00
parent ec309eb626
commit 8cb918b064
36 changed files with 588 additions and 489 deletions
@@ -48,7 +48,7 @@ export function MobileComment({ open, onClose, filePath, lineNumber, children }:
<div
ref={sheetRef}
className={cn(
'fixed bottom-0 left-0 right-0 z-50 bg-white rounded-t-2xl shadow-xl',
'fixed bottom-0 left-0 right-0 z-50 bg-[var(--c-surface)] rounded-t-2xl shadow-xl',
'transition-transform duration-300 ease-out',
'pb-[env(safe-area-inset-bottom)]',
open ? 'translate-y-0' : 'translate-y-full',
@@ -59,18 +59,18 @@ export function MobileComment({ open, onClose, filePath, lineNumber, children }:
>
{/* Handle */}
<div className="flex justify-center pt-3 pb-1">
<div className="w-10 h-1 rounded-full bg-[#DFE1E6]" />
<div className="w-10 h-1 rounded-full bg-[var(--c-border)]" />
</div>
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-[#DFE1E6]">
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--c-border)]">
<div className="min-w-0">
<p className="text-xs font-semibold text-[#172B4D] truncate">{filePath}</p>
<p className="text-xs text-[#5E6C84]">Line {lineNumber}</p>
<p className="text-xs font-semibold text-[var(--c-text)] truncate">{filePath}</p>
<p className="text-xs text-[var(--c-muted)]">Line {lineNumber}</p>
</div>
<button
onClick={onClose}
className="flex items-center justify-center w-8 h-8 rounded hover:bg-[#F4F5F7] text-[#5E6C84]"
className="flex items-center justify-center w-8 h-8 rounded hover:bg-[var(--c-surface-muted)] text-[var(--c-muted)]"
aria-label="Close"
>
<svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
@@ -86,17 +86,17 @@ export function MobileComment({ open, onClose, filePath, lineNumber, children }:
autoFocus
rows={4}
placeholder="Leave a comment on this line…"
className="w-full border border-[#DFE1E6] rounded p-3 text-sm resize-none focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
className="w-full border border-[var(--c-border)] rounded p-3 text-sm resize-none focus:outline-none focus:border-[var(--c-brand-focus)] focus:ring-1 focus:ring-[var(--c-brand-focus)]"
/>
)}
<div className="flex justify-end gap-2 mt-3">
<button
onClick={onClose}
className="px-4 py-2 text-sm rounded border border-[#DFE1E6] text-[#172B4D] hover:bg-[#F4F5F7] min-h-[44px]"
className="px-4 py-2 text-sm rounded border border-[var(--c-border)] text-[var(--c-text)] hover:bg-[var(--c-surface-muted)] min-h-[44px]"
>
Cancel
</button>
<button className="px-4 py-2 text-sm rounded bg-[#0052CC] text-white hover:bg-[#0065FF] min-h-[44px]">
<button className="px-4 py-2 text-sm rounded bg-[var(--c-brand)] text-white hover:bg-[var(--c-brand-hover)] min-h-[44px]">
Save
</button>
</div>