darkmode is now available
This commit is contained in:
@@ -16,7 +16,7 @@ interface DiffViewerProps {
|
||||
export function DiffViewer({ files }: DiffViewerProps) {
|
||||
if (!files.length) {
|
||||
return (
|
||||
<div className="text-center py-12 text-[#5E6C84] text-sm">
|
||||
<div className="text-center py-12 text-[var(--c-muted)] text-sm">
|
||||
No changes in this diff.
|
||||
</div>
|
||||
)
|
||||
@@ -36,9 +36,9 @@ function FileDiffBlock({ file }: { file: FileDiff }) {
|
||||
const lines = useMemo(() => parsePatch(file.patch), [file.patch])
|
||||
|
||||
return (
|
||||
<div className="border border-[#DFE1E6] rounded overflow-hidden font-mono text-xs">
|
||||
<div className="border border-[var(--c-border)] rounded overflow-hidden font-mono text-xs">
|
||||
{/* File header */}
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-[#F4F5F7] border-b border-[#DFE1E6] gap-2">
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-[var(--c-surface-muted)] border-b border-[var(--c-border)] gap-2">
|
||||
<button
|
||||
onClick={() => setCollapsed(c => !c)}
|
||||
className="flex items-center gap-2 text-left min-w-0"
|
||||
@@ -50,17 +50,17 @@ function FileDiffBlock({ file }: { file: FileDiff }) {
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
<span className="font-semibold text-[#172B4D] truncate">{file.path}</span>
|
||||
<span className="font-semibold text-[var(--c-text)] truncate">{file.path}</span>
|
||||
{file.oldPath && file.oldPath !== file.path && (
|
||||
<span className="text-[#5E6C84] text-[10px] shrink-0">← {file.oldPath}</span>
|
||||
<span className="text-[var(--c-muted)] text-[10px] shrink-0">← {file.oldPath}</span>
|
||||
)}
|
||||
</button>
|
||||
<div className="flex items-center gap-2 shrink-0 text-[11px]">
|
||||
{file.additions > 0 && (
|
||||
<span className="text-[#00875A] font-semibold">+{file.additions}</span>
|
||||
<span className="text-[var(--c-success)] font-semibold">+{file.additions}</span>
|
||||
)}
|
||||
{file.deletions > 0 && (
|
||||
<span className="text-[#DE350B] font-semibold">-{file.deletions}</span>
|
||||
<span className="text-[var(--c-danger)] font-semibold">-{file.deletions}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,10 +120,10 @@ function parsePatch(patch: string): ParsedLine[] {
|
||||
function DiffLine({ line }: { line: ParsedLine }) {
|
||||
if (line.type === 'hunk') {
|
||||
return (
|
||||
<tr className="bg-[#DEEBFF]">
|
||||
<td className="px-2 py-0.5 text-[#5E6C84] select-none w-10 text-right" />
|
||||
<td className="px-2 py-0.5 text-[#5E6C84] select-none w-10 text-right" />
|
||||
<td className="px-3 py-0.5 text-[#0052CC] font-semibold whitespace-pre">{line.content}</td>
|
||||
<tr className="bg-[var(--c-brand-tint)]">
|
||||
<td className="px-2 py-0.5 text-[var(--c-muted)] select-none w-10 text-right" />
|
||||
<td className="px-2 py-0.5 text-[var(--c-muted)] select-none w-10 text-right" />
|
||||
<td className="px-3 py-0.5 text-[var(--c-brand)] font-semibold whitespace-pre">{line.content}</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
@@ -131,14 +131,14 @@ function DiffLine({ line }: { line: ParsedLine }) {
|
||||
const bg = line.type === 'added'
|
||||
? 'bg-[#E3FCEF]'
|
||||
: line.type === 'removed'
|
||||
? 'bg-[#FFEBE6]'
|
||||
? 'bg-[var(--c-danger-tint)]'
|
||||
: ''
|
||||
|
||||
const gutter = line.type === 'added'
|
||||
? 'bg-[#ABF5D1] text-[#006644]'
|
||||
: line.type === 'removed'
|
||||
? 'bg-[#FFBDAD] text-[#BF2600]'
|
||||
: 'bg-[#F4F5F7] text-[#5E6C84]'
|
||||
? 'bg-[#FFBDAD] text-[var(--c-danger-dark)]'
|
||||
: 'bg-[var(--c-surface-muted)] text-[var(--c-muted)]'
|
||||
|
||||
const prefix = line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '
|
||||
|
||||
|
||||
Reference in New Issue
Block a user