daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve diff viewer color styling for better theme support (Vibe Kanban) (#1894)

Browse Source 
* improve diff styles

* diffs

* review comment styles
This commit is contained in:
Louis Knight-Webb
2026-01-10 11:10:02 +00:00
committed by GitHub
parent bd09ba8bd0
commit 5ee40bf322
4 changed files with 95 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/ui-new/containers/CommentWidgetLine.tsx
View File

@@ -43,27 +43,29 @@ export function CommentWidgetLine({
}, [value, draft, setDraft, widgetKey, onSave, addComment]);
return (
<div className="p-base rounded-sm border border-brand bg-brand/10 font-sans">
<WYSIWYGEditor
value={value}
onChange={setValue}
placeholder={t('comments.addPlaceholder')}
className="w-full text-normal min-h-[60px]"
projectId={projectId}
onCmdEnter={handleSave}
autoFocus
/>
<div className="mt-half flex gap-half">
<PrimaryButton
variant="default"
onClick={handleSave}
disabled={!value.trim()}
>
{t('comments.addReviewComment')}
</PrimaryButton>
<PrimaryButton variant="secondary" onClick={handleCancel}>
{t('actions.cancel')}
</PrimaryButton>
<div className="p-base bg-panel font-sans text-base">
<div className="p-base rounded-sm bg-brand/20 border border-brand">
<WYSIWYGEditor
value={value}
onChange={setValue}
placeholder={t('comments.addPlaceholder')}
className="w-full text-normal min-h-[60px]"
projectId={projectId}
onCmdEnter={handleSave}
autoFocus
/>
<div className="mt-half flex gap-half">
<PrimaryButton
variant="default"
onClick={handleSave}
disabled={!value.trim()}
>
{t('comments.addReviewComment')}
</PrimaryButton>
<PrimaryButton variant="secondary" onClick={handleCancel}>
{t('actions.cancel')}
</PrimaryButton>
</div>
</div>
</div>
);

62
frontend/src/components/ui-new/containers/ReviewCommentRenderer.tsx
View File

@@ -41,41 +41,45 @@ export function ReviewCommentRenderer({
if (isEditing) {
return (
<div className="p-base rounded-sm border border-brand bg-brand/10 font-sans">
<WYSIWYGEditor
value={editText}
onChange={setEditText}
placeholder={t('comments.editPlaceholder')}
className="w-full text-normal min-h-[60px]"
projectId={projectId}
onCmdEnter={handleSave}
autoFocus
/>
<div className="mt-half flex gap-half">
<PrimaryButton
variant="default"
onClick={handleSave}
disabled={!editText.trim()}
>
{t('actions.saveChanges')}
</PrimaryButton>
<PrimaryButton variant="tertiary" onClick={handleCancel}>
{t('actions.cancel')}
</PrimaryButton>
<div className="p-base bg-panel font-sans text-base">
<div className="p-base rounded-sm bg-brand/20 border border-brand">
<WYSIWYGEditor
value={editText}
onChange={setEditText}
placeholder={t('comments.editPlaceholder')}
className="w-full text-sm text-normal min-h-[60px]"
projectId={projectId}
onCmdEnter={handleSave}
autoFocus
/>
<div className="mt-half flex gap-half">
<PrimaryButton
variant="default"
onClick={handleSave}
disabled={!editText.trim()}
>
{t('actions.saveChanges')}
</PrimaryButton>
<PrimaryButton variant="tertiary" onClick={handleCancel}>
{t('actions.cancel')}
</PrimaryButton>
</div>
</div>
</div>
);
}
return (
<div className="p-base rounded-sm border border-brand bg-brand/10 font-sans">
<WYSIWYGEditor
value={comment.text}
disabled={true}
className="text-sm"
onEdit={handleEdit}
onDelete={handleDelete}
/>
<div className="p-base bg-panel font-sans text-base">
<div className="p-base rounded-sm bg-brand/20 border border-brand">
<WYSIWYGEditor
value={comment.text}
disabled={true}
className="text-sm"
onEdit={handleEdit}
onDelete={handleDelete}
/>
</div>
</div>
);
}