fix: raise contrast of loading/status text on the Change/Diffs tab (#1253)

* fix: raise contrast of loading/status text on the Change/Diffs tab

* refactor: update the code based on feedback

* fix: lint

__tests__/components/features/conversation/conversation-loading.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { ConversationLoading } from "#/components/features/conversation/conversation-loading";
+
+// react-i18next is mocked globally in vitest.setup.ts (t returns the key), so
+// the rendered text is the I18nKey itself (HOME$LOADING).
+describe("ConversationLoading", () => {
+  it("renders the loading message", () => {
+    // Arrange & Act
+    render(<ConversationLoading />);
+
+    // Assert — the loading status text is surfaced to the user
+    expect(screen.getByText("HOME$LOADING")).toBeInTheDocument();
+  });
+});

__tests__/routes/changes-tab.test.tsx

@@ -110,4 +110,23 @@ describe("Changes Tab", () => {
       screen.getByText("DIFF_VIEWER$NOT_A_GIT_REPO"),
     ).toBeInTheDocument();
   });
+
+  it("should show the loading message while git changes are loading", () => {
+    vi.mocked(useUnifiedGetGitChanges).mockReturnValue({
+      data: [],
+      isLoading: true,
+      isFetching: true,
+      isSuccess: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    vi.mocked(useAgentState).mockReturnValue({
+      curAgentState: AgentState.RUNNING,
+    });
+
+    render(<GitChanges />, { wrapper });
+
+    expect(screen.getByText("DIFF_VIEWER$LOADING")).toBeInTheDocument();
+  });
 });

src/components/features/chat/waiting-for-runtime-message.tsx

@@ -16,7 +16,7 @@ export function WaitingForRuntimeMessage({
     <div
       data-testid={testId}
       className={cn(
-        "w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light",
+        "w-full h-full flex items-center text-center justify-center text-2xl text-foreground",
         className,
       )}
     >

src/components/features/conversation/conversation-loading.tsx

@@ -18,10 +18,10 @@ export function ConversationLoading({ className }: ConversationLoadingProps) {
       )}
     >
       <LoaderCircle
-        className="h-8 w-8 shrink-0 animate-spin text-[var(--oh-text-secondary)]"
+        className="h-8 w-8 shrink-0 animate-spin text-foreground"
         aria-hidden
       />
-      <span className="text-base font-normal leading-5 text-[var(--oh-text-secondary)]">
+      <span className="text-base font-normal leading-5 text-foreground">
         {t(I18nKey.HOME$LOADING)}
       </span>
     </div>

src/routes/changes-tab.tsx

@@ -14,7 +14,7 @@ const GIT_REPO_ERROR_PATTERN = /not a git repository/i;
 
 function StatusMessage({ children }: React.PropsWithChildren) {
   return (
-    <div className="w-full h-full flex flex-col items-center text-center justify-center text-2xl text-tertiary-light">
+    <div className="w-full h-full flex flex-col items-center text-center justify-center text-2xl text-foreground">
       {children}
     </div>
   );