From 90d93065340665fb171a0496b0f45c5aa0ad0d70 Mon Sep 17 00:00:00 2001 From: Shawn <5414767+playcations@users.noreply.github.com> Date: Sun, 31 Aug 2025 17:06:00 -0400 Subject: [PATCH] Apply missing FCO theming changes from backup branch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit From commit 71c63f9a6 '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 --- .../file-changes/FilesChangedOverview.tsx | 211 +++++++++++++----- .../src/i18n/locales/en/file-changes.json | 2 +- 2 files changed, 154 insertions(+), 59 deletions(-) diff --git a/webview-ui/src/components/file-changes/FilesChangedOverview.tsx b/webview-ui/src/components/file-changes/FilesChangedOverview.tsx index 8091a15443..3ec434cc10 100644 --- a/webview-ui/src/components/file-changes/FilesChangedOverview.tsx +++ b/webview-ui/src/components/file-changes/FilesChangedOverview.tsx @@ -179,29 +179,19 @@ const FilesChangedOverview: React.FC = () => { }, [filesChangedEnabled]) /** - * Formats line change counts for display based on file type + * Formats line change counts for display - shows only plus/minus numbers * @param file - The file change to format - * @returns Formatted string describing the changes + * @returns Formatted string with just the line change counts */ const formatLineChanges = (file: FileChange): string => { const added = file.linesAdded || 0 const removed = file.linesRemoved || 0 - if (file.type === "create") { - return t("file-changes:line_changes.added", { count: added }) - } else if (file.type === "delete") { - return t("file-changes:line_changes.deleted") - } else { - if (added > 0 && removed > 0) { - return t("file-changes:line_changes.added_removed", { added, removed }) - } else if (added > 0) { - return t("file-changes:line_changes.added", { count: added }) - } else if (removed > 0) { - return t("file-changes:line_changes.removed", { count: removed }) - } else { - return t("file-changes:line_changes.modified") - } - } + const parts = [] + if (added > 0) parts.push(`+${added}`) + if (removed > 0) parts.push(`-${removed}`) + + return parts.length > 0 ? parts.join(", ") : "" } // Memoize expensive total calculations @@ -222,11 +212,29 @@ const FilesChangedOverview: React.FC = () => { return (
+ className="files-changed-overview" + data-testid="files-changed-overview" + style={{ + border: "1px solid var(--vscode-panel-border)", + borderTop: 0, + borderRadius: 0, + padding: "6px 10px", + margin: 0, + backgroundColor: "var(--vscode-editor-background)", + }}> {/* Collapsible header */}
setIsCollapsed(!isCollapsed)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { @@ -244,11 +252,15 @@ const FilesChangedOverview: React.FC = () => { : t("file-changes:accessibility.expanded"), })} title={isCollapsed ? t("file-changes:header.expand") : t("file-changes:header.collapse")}> -
+
-

+

{t("file-changes:summary.count_with_changes", { count: files.length, changes: totalChanges, @@ -258,7 +270,7 @@ const FilesChangedOverview: React.FC = () => { {/* Action buttons always visible for quick access */}
e.stopPropagation()} // Prevent collapse toggle when clicking buttons > @@ -275,7 +296,16 @@ const FilesChangedOverview: React.FC = () => { disabled={isProcessing} tabIndex={0} data-testid="accept-all-button" - 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"}`} + style={{ + backgroundColor: "var(--vscode-button-background)", + color: "var(--vscode-button-foreground)", + border: "none", + borderRadius: "3px", + padding: "4px 8px", + fontSize: "13px", + cursor: isProcessing ? "not-allowed" : "pointer", + opacity: isProcessing ? 0.6 : 1, + }} title={t("file-changes:actions.accept_all")}> {t("file-changes:actions.accept_all")} @@ -285,7 +315,14 @@ const FilesChangedOverview: React.FC = () => { {/* Collapsible content area */} {!isCollapsed && (
{shouldVirtualize && (
@@ -357,41 +394,99 @@ const FileItem: React.FC = React.memo( ({ file, formatLineChanges, onViewDiff, onAcceptFile, onRejectFile, handleWithDebounce, isProcessing, t }) => (
-
-
+ style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + padding: "6px 8px", + marginBottom: "3px", + backgroundColor: "var(--vscode-list-hoverBackground)", + borderRadius: "3px", + fontSize: "13px", + minHeight: "32px", // Thinner rows + lineHeight: "1.3", + }}> +
+
{file.uri}
-
- {t(`file-changes:file_types.${file.type}`)} • {formatLineChanges(file)} -
-
- - - +
+
+ {formatLineChanges(file)} +
+
+ + + +
), diff --git a/webview-ui/src/i18n/locales/en/file-changes.json b/webview-ui/src/i18n/locales/en/file-changes.json index d8ce319366..c959645479 100644 --- a/webview-ui/src/i18n/locales/en/file-changes.json +++ b/webview-ui/src/i18n/locales/en/file-changes.json @@ -24,7 +24,7 @@ "modified": "modified" }, "summary": { - "count_with_changes": "({{count}}) Files Changed{{changes}}", + "count_with_changes": "{{count}} Files Changed{{changes}}", "changes_format": " ({{changes}})" }, "accessibility": {