fix(web): restore full-color round user avatars in Cmd+K typeahead (#2837)

* fix(web): restore full-color round user avatars in Cmd+K typeahead

Keep org avatars square and muted in the navbar search dropdown while showing user profile photos in full color with circular framing.

* fix(web): limit typeahead user color restore to profile photos

Keep muted glyph fallbacks for users without avatars while preserving full-color circular photos and explicit muted square org treatment.

src/__tests__/ui-design-contract.test.ts

@@ -288,4 +288,27 @@ describe("restored UI design contract", () => {
       "grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr))",
     );
   });
+
+  it("keeps typeahead creator avatars round for users and square for orgs", () => {
+    const css = styles();
+
+    expect(cssRule(css, ".navbar-search-typeahead-icon .marketplace-icon-user")).toContain(
+      "border-radius: 999px",
+    );
+    expect(cssRule(css, ".navbar-search-typeahead-icon .marketplace-icon-org")).toContain(
+      "border-radius: 8px",
+    );
+    expect(
+      cssRule(css, ".navbar-search-typeahead-icon .marketplace-icon-user .marketplace-icon-image"),
+    ).toContain("filter: none");
+    expect(
+      cssRule(css, ".navbar-search-typeahead-icon .marketplace-icon-org .marketplace-icon-image"),
+    ).toContain("filter: grayscale(1)");
+    expect(
+      cssRule(
+        css,
+        ".navbar-search-typeahead-icon .marketplace-icon-user:has(.marketplace-icon-image)",
+      ),
+    ).toContain("background: transparent");
+  });
 });

src/styles.css

@@ -28045,6 +28045,30 @@ a[class*="rounded-full"] {
   opacity: 0.82;
 }
 
+.navbar-search-typeahead-icon .marketplace-icon-user {
+  border-radius: 999px;
+}
+
+.navbar-search-typeahead-icon .marketplace-icon-org {
+  border-radius: 8px;
+}
+
+.navbar-search-typeahead-icon .marketplace-icon-org .marketplace-icon-glyph,
+.navbar-search-typeahead-icon .marketplace-icon-org .marketplace-icon-image {
+  filter: grayscale(1);
+  opacity: 0.82;
+}
+
+.navbar-search-typeahead-icon .marketplace-icon-user .marketplace-icon-image {
+  filter: none;
+  opacity: 1;
+}
+
+.navbar-search-typeahead-icon .marketplace-icon-user:has(.marketplace-icon-image) {
+  background: transparent !important;
+  border: none !important;
+}
+
 .navbar-search-typeahead-icon .marketplace-icon-glyph {
   width: 15px;
   height: 15px;