fix: refine GitHub rate limit card (#2668)

apps/web/components/github/github-access-help.tsx

@@ -19,12 +19,14 @@ export function GitHubAccessHelp({
   title,
   description,
   content,
+  icon,
   onOpen,
 }: {
   label: string;
   title: string;
   description: string;
   content?: ReactNode;
+  icon?: ReactNode;
   onOpen?: () => void;
 }) {
   const usesTouchDrawer = useTouchDrawer();
@@ -43,7 +45,7 @@ export function GitHubAccessHelp({
       aria-expanded={usesTouchDrawer ? open : undefined}
       aria-label={label}
     >
-      <IconInfoCircle className="h-4 w-4" />
+      {icon ?? <IconInfoCircle className="h-4 w-4" />}
     </Button>
   );
   const trigger = usesTouchDrawer ? (

apps/web/components/github/github-rate-limit.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import type { Locale } from "date-fns";
-import { IconAlertTriangle } from "@tabler/icons-react";
+import { IconAlertTriangle, IconGauge } from "@tabler/icons-react";
 import { Alert, AlertDescription } from "@kandev/ui/alert";
 import type { GitHubRateLimitInfo, GitHubRateLimitSnapshot } from "@/lib/types/github";
 import { GitHubAccessHelp } from "./github-access-help";
@@ -75,6 +75,7 @@ export function GitHubRateLimitDisplay({
       label={t("github:showGithubApiLimits")}
       title={t("github:githubApiLimits")}
       description={t("github:currentGithubApiRateAndQuery")}
+      icon={<IconGauge className="h-4 w-4" data-testid="github-rate-limit-icon" />}
       content={
         snapshots.length > 0 ? (
           <RateLimitDetails snapshots={snapshots} exhausted={exhausted} />

apps/web/components/github/github-settings.tsx

@@ -261,7 +261,7 @@ export function GitHubConnectionSection({ workspaceId }: { workspaceId: string }
           description={t("github:credentialUsedForRepositorySyncWatches")}
         >
           <Card data-testid="github-workspace-access-card">
-            <CardContent className="pt-6">
+            <CardContent className="pt-0">
               <GitHubAutomationSettings workspaceId={workspaceId} />
             </CardContent>
           </Card>

apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts

@@ -86,6 +86,12 @@ test.describe("GitHub workspace settings", () => {
     ]);
     await stubGitHubRateLimits(testPage, workspaceId);
     await testPage.goto(`/settings/workspaces/${workspaceId}/integrations/github`);
+    const accessCard = testPage.getByTestId("github-workspace-access-card");
+    const accessContent = accessCard.locator('[data-slot="card-content"]');
+    const accessContentPaddingTop = await accessContent.evaluate(
+      (element) => getComputedStyle(element).paddingTop,
+    );
+    expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24);
     const automation = testPage.getByTestId("github-workspace-automation");
     await expect(automation.getByTestId("github-task-access-summary")).toContainText(
       "Inherit executor Git credentials",
@@ -114,6 +120,9 @@ test.describe("GitHub workspace settings", () => {
     ).toBeVisible();
     const rateLimitHelp = automation.getByRole("button", { name: "Show GitHub API limits" });
     await expect(rateLimitHelp).toBeVisible();
+    await expect(rateLimitHelp.getByTestId("github-rate-limit-icon")).toHaveClass(
+      /tabler-icon-gauge/,
+    );
     await rateLimitHelp.hover();
     const rateLimitTooltip = testPage.getByRole("tooltip", { name: /API rate limit/ });
     await expect(rateLimitTooltip).toContainText(

apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts

@@ -18,6 +18,12 @@ test.describe("GitHub workspace settings on mobile", () => {
     ]);
     await stubGitHubRateLimits(testPage, workspaceId);
     await testPage.goto(`/settings/workspaces/${workspaceId}/integrations/github`);
+    const accessCard = testPage.getByTestId("github-workspace-access-card");
+    const accessContent = accessCard.locator('[data-slot="card-content"]');
+    const accessContentPaddingTop = await accessContent.evaluate(
+      (element) => getComputedStyle(element).paddingTop,
+    );
+    expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24);
     const automation = testPage.getByTestId("github-workspace-automation");
     await expect(automation.getByTestId("github-task-access-summary")).toContainText(
       "Inherit executor Git credentials",
@@ -50,6 +56,9 @@ test.describe("GitHub workspace settings on mobile", () => {
     await testPage.keyboard.press("Escape");
     const rateLimitHelp = automation.getByRole("button", { name: "Show GitHub API limits" });
     await expect(rateLimitHelp).toBeVisible();
+    await expect(rateLimitHelp.getByTestId("github-rate-limit-icon")).toHaveClass(
+      /tabler-icon-gauge/,
+    );
     const rateLimitHelpBox = await rateLimitHelp.boundingBox();
     expect(rateLimitHelpBox?.height).toBeGreaterThanOrEqual(44);
     await rateLimitHelp.tap();

apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts

@@ -12,6 +12,10 @@ test.describe("Mobile GitHub integration settings", () => {
     const accessCard = testPage.getByTestId("github-workspace-access-card");
     await expect(accessCard).toBeVisible();
     await expect(accessCard).toHaveAttribute("data-slot", "card");
+    const accessContentPaddingTop = await accessCard
+      .locator('[data-slot="card-content"]')
+      .evaluate((element) => getComputedStyle(element).paddingTop);
+    expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24);
     await expect(testPage.locator("#github-enabled")).toHaveAttribute("aria-checked", "true");
     expect(
       await testPage.evaluate(