fix(ux): single search field, clearer disabled states, brand/radius consistency, affordance + visual polish - #154
Merged
Merged
Conversation
…redundancy, empty-banner hint
UX + visual polish (P2 long tail):
- Explore: drop the top-bar global "Search Certified" field on /explore.
The page already renders its own contextual "Search Certified" input
(which doubles as the cross-kind filter), so both showed at every
width >=800px — a duplicate. Explore now owns the single search field.
- Button: make the disabled state of filled variants (primary /
destructive) unambiguous. Half-opacity left the brand fill looking
"active"; disabled filled buttons now drop to a flat sunken fill +
muted text + subtle border that clearly reads as inert. Outline / text
variants (secondary / ghost) keep the lighter opacity dim, and the
loading state keeps opacity so the spinner stays legible. Enabled
appearance is unchanged. Covers Publish activity / Publish project /
Sync from Bluesky, which all use the shared <Button>.
- Marketing nav: signed-out /welcome now drops the desktop top bar
entirely. The landing is self-contained (hero "Sign in with Certified"
CTA + footer), so the top bar's search + Explore/Apps/Help icon row +
a second "Sign in" were redundant. Signed-in viewers keep the bar to
navigate out.
- Edit-profile: the empty banner box gets a neutral guidance hint
("Add a banner image ... 3:1") instead of a featureless gradient
rectangle. Decorative (aria-hidden) since the "Change banner" button
already carries the accessible affordance.
Deliberately out of scope (other PRs own the file): the project_new
title placeholder weight and the disabled "Save changes" pill both live
in cert-detail.css / profile-edit.css. Apps-grid card hover affordance
and the icon-wrap radius are already spec-compliant on staging (var(--radius),
hover lift/shadow); the remaining icon-corner mismatch is baked into the
source logo images, not CSS.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
P2 UX + visual-polish long tail. Each change is minimal and clearly-correct; ambiguous / other-PR-owned items are deliberately skipped (see below).
1. Duplicate "Search Certified" inputs (tablet/desktop)
/explorerendered two "Search Certified" fields at every width ≥800px: the desktop top-bar's globalGlobalSearch, plus the explore page's own in-page search (which doubles as the cross-kind filter). The top-bar copy is now suppressed on/exploreso the page owns the single contextual search field.2. Disabled buttons read ambiguously
The shared
<Button>dimmed every disabled state toopacity-50, which left filled variants (primary / destructive) looking half-active. Disabled filled buttons now drop to a flat sunken fill + muted text + subtle border (tokens only) — unmistakably inert. Outline/text variants (secondary / ghost) keep the lighter opacity dim, and theloadingstate keeps opacity so the spinner stays legible. Enabled appearance is unchanged. This covers Publish activity, Publish project, and Sync from Bluesky, which all use the shared<Button>.3. Marketing nav redundancy
Signed-out
/welcomeshowed the full desktop top bar (global search + Explore/Apps/Help icon row + a top-right Sign in) on top of the landing's own hero Sign in with Certified CTA. On the self-contained marketing landing that bar is redundant, so it now drops out for signed-out viewers. Signed-in viewers keep it to navigate out. (The mobile<Navbar>already renders/welcomeas a transparent overlay when signed out.)4. Empty edit-profile banner
The empty banner box was a featureless gradient rectangle. It now shows a neutral guidance hint ("Add a banner image — shown across the top of your profile (3:1)"). Decorative (
aria-hidden) because the "Change banner" button already carries the accessible affordance.Deliberately skipped (with reason)
/apps): already spec-compliant on staging — the tile has a hover lift/shadow/border +cursor:pointer(it's an<a>), and.apps-store__icon-wrapalready usesvar(--radius)(2px). The only remaining icon-corner mismatch is baked into the source partner-logo images (e.g. Ma Earth's rounded JPEG), which CSS can't normalize.cert-detail.css/profile-edit.css, owned by other PRs (PR3 / PR2). Not touched./abouttablet line-length: the legal-page reading-width cap (880px) is a documented intentional choice inlayout.css(PR4-adjacent); tightening it is ambiguous, so skipped./workspaceroute: left in place (out of scope to delete).Verification gate (all green)
npm run lint→ 0 errors, 66 warnings (identical to staging baseline — no new warnings)npx tsc --noEmit→ 0 errorsnpm run typecheck:test→ 0 errorsnpm test→ 605 passed (83 files)/explore, clear disabled-primary in the dev gallery, no redundant top bar on signed-out/welcome.Constraints honored
Radius
var(--radius)/999px/50% only (no off-spec radii touched or introduced); breakpoints 800/1100/1300; tokens for colors; reused the shared<Button>primitive for the disabled fix.🤖 Generated with Claude Code