big UI changes

2026-08-19 11:40:36 -05:00
parent 82d6864afe
commit d2c343b2b7
18 changed files with 1045 additions and 137 deletions
@@ -0,0 +1,66 @@
+import { expect, test } from "@playwright/test";
+import { collectBrowserIssues, login } from "./helpers";
+
+test.describe("cross-page UI polish", () => {
+  test("rounds notification panels and normalizes graph fields", async ({ page }) => {
+    const browserIssues = collectBrowserIssues(page);
+    await login(page);
+
+    await page.goto("/notifications");
+    const notificationRadius = await page.locator("#keyword-section").evaluate((element) =>
+      Number.parseFloat(getComputedStyle(element).borderTopLeftRadius),
+    );
+    const deliveryRadius = await page.locator("details.notification-section").first().evaluate((element) =>
+      Number.parseFloat(getComputedStyle(element).borderTopLeftRadius),
+    );
+    expect(notificationRadius).toBeGreaterThanOrEqual(14);
+    expect(deliveryRadius).toBeGreaterThanOrEqual(14);
+
+    await page.goto("/graph");
+    const graphColors = await page.evaluate(() => {
+      const field = document.querySelector(".graph-field");
+      const input = document.querySelector("#graph-search");
+      const select = document.querySelector("#graph-status");
+      if (!field || !input || !select) throw new Error("Graph controls are missing");
+      return {
+        field: getComputedStyle(field).backgroundColor,
+        input: getComputedStyle(input).backgroundColor,
+        select: getComputedStyle(select).backgroundColor,
+      };
+    });
+    expect(graphColors.input).toBe("rgba(0, 0, 0, 0)");
+    expect(graphColors.field).toBe(graphColors.select);
+
+    await page.locator("#graph-search").fill("example");
+    await expect(page.locator("#graph-search")).toHaveValue("example");
+    expect(browserIssues).toEqual([]);
+  });
+
+  test("spaces the File Share empty state and fits on mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    const browserIssues = collectBrowserIssues(page);
+    await login(page);
+    await page.goto("/file-share");
+
+    const emptyState = page.locator(".file-share-empty");
+    await expect(emptyState).toBeVisible();
+    const filePickerColors = await page.locator("#upload-file").evaluate((element) => ({
+      field: getComputedStyle(element).backgroundColor,
+      button: getComputedStyle(element, "::file-selector-button").backgroundColor,
+    }));
+    expect(filePickerColors.button).toBe("rgba(0, 0, 0, 0)");
+    expect(filePickerColors.field).not.toBe(filePickerColors.button);
+    await page.locator("#upload-file").hover();
+    const iconBox = await emptyState.locator("i").boundingBox();
+    const labelBox = await emptyState.locator("span").boundingBox();
+    expect(iconBox).not.toBeNull();
+    expect(labelBox).not.toBeNull();
+    expect(labelBox!.y - (iconBox!.y + iconBox!.height)).toBeGreaterThanOrEqual(11);
+
+    const overflow = await page.evaluate(() =>
+      document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+    expect(browserIssues).toEqual([]);
+  });
+});