Skip to content

Commit 90d9306

Browse files
playcationsclaude
authored and
hannesrudolph
committed
Apply missing FCO theming changes from backup branch
From commit 71c63f9 'language files, theming, bug fix, Test improvements': Theming Updates: - Convert from Tailwind CSS classes to inline styles for consistent theming - Make Files Changed Overview match TodoList theming (slim and compact) - Simplify formatLineChanges to show only '+X, -Y' format (no translations) - Remove parentheses from count format in summary - Update FileItem to use thinner rows (32px instead of 60px) - Apply compact padding and margins throughout component Visual Changes: - Smaller button sizes and padding for compact look - Consistent inline styling using CSS variables - Better alignment with VS Code theming system - Matches TodoList component styling for unified look 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 390c500 commit 90d9306

File tree

2 files changed

+154
-59
lines changed

2 files changed

+154
-59
lines changed

‎webview-ui/src/components/file-changes/FilesChangedOverview.tsx‎

Lines changed: 153 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -179,29 +179,19 @@ const FilesChangedOverview: React.FC = () => {
179179
}, [filesChangedEnabled])
180180

181181
/**
182-
* Formats line change counts for display based on file type
182+
* Formats line change counts for display - shows only plus/minus numbers
183183
* @param file - The file change to format
184-
* @returns Formatted string describing the changes
184+
* @returns Formatted string with just the line change counts
185185
*/
186186
const formatLineChanges = (file: FileChange): string => {
187187
const added = file.linesAdded || 0
188188
const removed = file.linesRemoved || 0
189189

190-
if (file.type === "create") {
191-
return t("file-changes:line_changes.added", { count: added })
192-
} else if (file.type === "delete") {
193-
return t("file-changes:line_changes.deleted")
194-
} else {
195-
if (added > 0 && removed > 0) {
196-
return t("file-changes:line_changes.added_removed", { added, removed })
197-
} else if (added > 0) {
198-
return t("file-changes:line_changes.added", { count: added })
199-
} else if (removed > 0) {
200-
return t("file-changes:line_changes.removed", { count: removed })
201-
} else {
202-
return t("file-changes:line_changes.modified")
203-
}
204-
}
190+
const parts = []
191+
if (added > 0) parts.push(`+${added}`)
192+
if (removed > 0) parts.push(`-${removed}`)
193+
194+
return parts.length > 0 ? parts.join(", ") : ""
205195
}
206196

207197
// Memoize expensive total calculations
@@ -222,11 +212,29 @@ const FilesChangedOverview: React.FC = () => {
222212

223213
return (
224214
<div
225-
className="files-changed-overview border border-vscode-panel-border rounded p-3 my-2 bg-vscode-editor-background"
226-
data-testid="files-changed-overview">
215+
className="files-changed-overview"
216+
data-testid="files-changed-overview"
217+
style={{
218+
border: "1px solid var(--vscode-panel-border)",
219+
borderTop: 0,
220+
borderRadius: 0,
221+
padding: "6px 10px",
222+
margin: 0,
223+
backgroundColor: "var(--vscode-editor-background)",
224+
}}>
227225
{/* Collapsible header */}
228226
<div
229-
className={`flex justify-between items-center ${isCollapsed ? "" : "mb-3 border-b border-vscode-panel-border pb-2"} cursor-pointer select-none`}
227+
style={{
228+
display: "flex",
229+
justifyContent: "space-between",
230+
alignItems: "center",
231+
marginTop: "0 2px",
232+
//marginBottom: isCollapsed ? "0" : "6px",
233+
borderBottom: isCollapsed ? "none" : "1px solid var(--vscode-panel-border)",
234+
// paddingBottom: "0px",
235+
cursor: "pointer",
236+
userSelect: "none",
237+
}}
230238
onClick={() => setIsCollapsed(!isCollapsed)}
231239
onKeyDown={(e) => {
232240
if (e.key === "Enter" || e.key === " ") {
@@ -244,11 +252,15 @@ const FilesChangedOverview: React.FC = () => {
244252
: t("file-changes:accessibility.expanded"),
245253
})}
246254
title={isCollapsed ? t("file-changes:header.expand") : t("file-changes:header.collapse")}>
247-
<div className="flex items-center gap-2">
255+
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
248256
<span
249-
className={`codicon ${isCollapsed ? "codicon-chevron-right" : "codicon-chevron-down"} text-[12px] transition-transform`}
257+
className={`codicon ${isCollapsed ? "codicon-chevron-right" : "codicon-chevron-down"}`}
258+
style={{
259+
fontSize: "12px",
260+
transition: "transform 0.2s ease",
261+
}}
250262
/>
251-
<h3 className="m-0 text-sm font-bold" data-testid="files-changed-header">
263+
<h3 style={{ margin: 0, fontSize: "14px", fontWeight: "bold" }} data-testid="files-changed-header">
252264
{t("file-changes:summary.count_with_changes", {
253265
count: files.length,
254266
changes: totalChanges,
@@ -258,15 +270,24 @@ const FilesChangedOverview: React.FC = () => {
258270

259271
{/* Action buttons always visible for quick access */}
260272
<div
261-
className="flex gap-2"
273+
style={{ display: "flex", gap: "8px" }}
262274
onClick={(e) => e.stopPropagation()} // Prevent collapse toggle when clicking buttons
263275
>
264276
<button
265277
onClick={() => handleWithDebounce(handleRejectAll)}
266278
disabled={isProcessing}
267279
tabIndex={0}
268280
data-testid="reject-all-button"
269-
className={`bg-vscode-button-secondaryBackground text-vscode-button-secondaryForeground border border-vscode-button-border rounded px-2 py-1 text-xs ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
281+
style={{
282+
backgroundColor: "var(--vscode-button-secondaryBackground)",
283+
color: "var(--vscode-button-secondaryForeground)",
284+
border: "none",
285+
borderRadius: "3px",
286+
padding: "4px 8px",
287+
fontSize: "13px",
288+
cursor: isProcessing ? "not-allowed" : "pointer",
289+
opacity: isProcessing ? 0.6 : 1,
290+
}}
270291
title={t("file-changes:actions.reject_all")}>
271292
{t("file-changes:actions.reject_all")}
272293
</button>
@@ -275,7 +296,16 @@ const FilesChangedOverview: React.FC = () => {
275296
disabled={isProcessing}
276297
tabIndex={0}
277298
data-testid="accept-all-button"
278-
className={`bg-vscode-button-background text-vscode-button-foreground border border-vscode-button-border rounded px-2 py-1 text-xs ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
299+
style={{
300+
backgroundColor: "var(--vscode-button-background)",
301+
color: "var(--vscode-button-foreground)",
302+
border: "none",
303+
borderRadius: "3px",
304+
padding: "4px 8px",
305+
fontSize: "13px",
306+
cursor: isProcessing ? "not-allowed" : "pointer",
307+
opacity: isProcessing ? 0.6 : 1,
308+
}}
279309
title={t("file-changes:actions.accept_all")}>
280310
{t("file-changes:actions.accept_all")}
281311
</button>
@@ -285,7 +315,14 @@ const FilesChangedOverview: React.FC = () => {
285315
{/* Collapsible content area */}
286316
{!isCollapsed && (
287317
<div
288-
className={`max-h-[300px] overflow-y-auto transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0" : "opacity-100"} relative`}
318+
style={{
319+
maxHeight: "300px",
320+
overflowY: "auto",
321+
transition: "opacity 0.2s ease-in-out",
322+
opacity: isCollapsed ? 0 : 1,
323+
position: "relative",
324+
paddingTop: "8px",
325+
}}
289326
onScroll={handleScroll}>
290327
{shouldVirtualize && (
291328
<div style={{ height: totalHeight, position: "relative" }}>
@@ -357,41 +394,99 @@ const FileItem: React.FC<FileItemProps> = React.memo(
357394
({ file, formatLineChanges, onViewDiff, onAcceptFile, onRejectFile, handleWithDebounce, isProcessing, t }) => (
358395
<div
359396
data-testid={`file-item-${file.uri}`}
360-
className="flex justify-between items-center px-2 py-1.5 mb-1 bg-vscode-list-hoverBackground rounded text-[13px] min-h-[60px]">
361-
<div className="flex-1 min-w-0">
362-
<div className="text-xs text-vscode-editor-foreground overflow-hidden text-ellipsis whitespace-nowrap">
397+
style={{
398+
display: "flex",
399+
justifyContent: "space-between",
400+
alignItems: "center",
401+
padding: "6px 8px",
402+
marginBottom: "3px",
403+
backgroundColor: "var(--vscode-list-hoverBackground)",
404+
borderRadius: "3px",
405+
fontSize: "13px",
406+
minHeight: "32px", // Thinner rows
407+
lineHeight: "1.3",
408+
}}>
409+
<div style={{ flex: 1, minWidth: 0 }}>
410+
<div
411+
style={{
412+
fontFamily: "var(--vscode-editor-font-family)",
413+
fontSize: "13px",
414+
color: "var(--vscode-editor-foreground)",
415+
overflow: "hidden",
416+
textOverflow: "ellipsis",
417+
whiteSpace: "nowrap",
418+
fontWeight: 500,
419+
}}>
363420
{file.uri}
364421
</div>
365-
<div className="text-[11px] text-vscode-descriptionForeground mt-0.5">
366-
{t(`file-changes:file_types.${file.type}`)} • {formatLineChanges(file)}
367-
</div>
368422
</div>
369423

370-
<div className="flex gap-1 ml-2">
371-
<button
372-
onClick={() => handleWithDebounce(() => onViewDiff(file.uri))}
373-
disabled={isProcessing}
374-
title={t("file-changes:actions.view_diff")}
375-
data-testid={`diff-${file.uri}`}
376-
className={`bg-transparent text-vscode-button-foreground border border-vscode-button-border rounded px-1.5 py-0.5 text-[11px] min-w-[50px] ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}>
377-
{t("file-changes:actions.view_diff")}
378-
</button>
379-
<button
380-
onClick={() => handleWithDebounce(() => onRejectFile(file.uri))}
381-
disabled={isProcessing}
382-
title={t("file-changes:actions.reject_file")}
383-
data-testid={`reject-${file.uri}`}
384-
className={`bg-vscode-button-secondaryBackground text-vscode-button-secondaryForeground border border-vscode-button-border rounded px-1.5 py-0.5 text-[11px] min-w-[20px] ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}>
385-
✗
386-
</button>
387-
<button
388-
onClick={() => handleWithDebounce(() => onAcceptFile(file.uri))}
389-
disabled={isProcessing}
390-
title={t("file-changes:actions.accept_file")}
391-
data-testid={`accept-${file.uri}`}
392-
className={`bg-vscode-button-background text-vscode-button-foreground border border-vscode-button-border rounded px-1.5 py-0.5 text-[11px] min-w-[20px] ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}>
393-
✓
394-
</button>
424+
<div style={{ display: "flex", alignItems: "center", gap: "8px", marginLeft: "8px" }}>
425+
<div
426+
style={{
427+
fontSize: "12px",
428+
color: "var(--vscode-descriptionForeground)",
429+
whiteSpace: "nowrap",
430+
flexShrink: 0,
431+
}}>
432+
{formatLineChanges(file)}
433+
</div>
434+
<div style={{ display: "flex", gap: "4px" }}>
435+
<button
436+
onClick={() => handleWithDebounce(() => onViewDiff(file.uri))}
437+
disabled={isProcessing}
438+
title={t("file-changes:actions.view_diff")}
439+
data-testid={`diff-${file.uri}`}
440+
style={{
441+
backgroundColor: "transparent",
442+
color: "var(--vscode-button-foreground)",
443+
border: "1px solid var(--vscode-button-border)",
444+
borderRadius: "3px",
445+
padding: "2px 6px",
446+
fontSize: "11px",
447+
cursor: isProcessing ? "not-allowed" : "pointer",
448+
minWidth: "50px",
449+
opacity: isProcessing ? 0.6 : 1,
450+
}}>
451+
{t("file-changes:actions.view_diff")}
452+
</button>
453+
<button
454+
onClick={() => handleWithDebounce(() => onRejectFile(file.uri))}
455+
disabled={isProcessing}
456+
title={t("file-changes:actions.reject_file")}
457+
data-testid={`reject-${file.uri}`}
458+
style={{
459+
backgroundColor: "var(--vscode-button-secondaryBackground)",
460+
color: "var(--vscode-button-secondaryForeground)",
461+
border: "1px solid var(--vscode-button-border)",
462+
borderRadius: "3px",
463+
padding: "2px 6px",
464+
fontSize: "11px",
465+
cursor: isProcessing ? "not-allowed" : "pointer",
466+
minWidth: "20px",
467+
opacity: isProcessing ? 0.6 : 1,
468+
}}>
469+
✗
470+
</button>
471+
<button
472+
onClick={() => handleWithDebounce(() => onAcceptFile(file.uri))}
473+
disabled={isProcessing}
474+
title={t("file-changes:actions.accept_file")}
475+
data-testid={`accept-${file.uri}`}
476+
style={{
477+
backgroundColor: "var(--vscode-button-background)",
478+
color: "var(--vscode-button-foreground)",
479+
border: "1px solid var(--vscode-button-border)",
480+
borderRadius: "3px",
481+
padding: "2px 6px",
482+
fontSize: "11px",
483+
cursor: isProcessing ? "not-allowed" : "pointer",
484+
minWidth: "20px",
485+
opacity: isProcessing ? 0.6 : 1,
486+
}}>
487+
✓
488+
</button>
489+
</div>
395490
</div>
396491
</div>
397492
),

‎webview-ui/src/i18n/locales/en/file-changes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"modified": "modified"
2525
},
2626
"summary": {
27-
"count_with_changes": "({{count}}) Files Changed{{changes}}",
27+
"count_with_changes": "{{count}} Files Changed{{changes}}",
2828
"changes_format": " ({{changes}})"
2929
},
3030
"accessibility": {

0 commit comments

Comments
 (0)