The settings page strips a third-party widget so it looks native
The portal settings page renders Clerk's UserProfile component — a pre-built account management widget with password changes, email updates, and session controls. Out of the box it ships with its own card styling, shadows, borders, and padding. That visual identity clashes with the glass aesthetic the rest of the portal uses. The fix is four CSS overrides in an appearance prop. rootBox gets w-full so the widget spans the container instead of centering at a fixed width. card gets bg-transparent shadow-none border-0 p-0 — four resets that strip the card down to raw content. The result is that Clerk's inputs, buttons, and section headings float inside a GlassCard wrapper as though they were built for this portal. No custom auth management UI, no reimplemented password flow, no hand-rolled session list. Above the Clerk embed, the page renders the client profile from the database in a definition list — dl, dt, dd — with three rows: name, email, and company. The dt elements are fixed at 80 pixels wide using w-20 so the labels align in a column. The email field reads from three sources in priority order — client.email from the Prisma record, then user.emailAddresses[0].emailAddress from the Clerk session, then a dash character as the terminal fallback. Two data sources, one page, and a third-party widget that looks like it was built in-house because four CSS strings say so.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.