feat: add theming and design elements

[h4rkl]

Summary

This PR introduces end-to-end theming and visual refinements across the Mosaic UI. It establishes a consistent design language, upgrades our Radix/Tailwind setup, and adds a small set of reusable components (Badge, Loader) to refine the visual look and feel of the site.

Given the short timeframe the focus on design elements has mostly been on a few core elements and general styling. If we had more time for review and feedback we could push the boat out further.

Key changes

Area	Updated
Design tokens & utilities	* Tailwind config now consumes CSS variables for colour + radius * Added Inter (sans) & Fira Mono (code) as default fonts * Introduced CSS --mosaic-gradient-color + radial text-mask utility
Global styles	* Updated globals.css with light/dark palettes, base element resets, input/label defaults * Implemented .mosaic-text gradient header element treatment
New components	* <Badge> – variant-based pill for status & meta info * <Loader> – CSS-only mosaic themed animated spinner (module CSS)
Layout	* Header: gradient “mosaic” logotype, dynamic wallet button (SSR-safe), primary/secondary CTA logic * Footer: MIT licence link, GH / X / Solana icon links, SVG logo for light & dark
Pages	* Dashboard & Manage flows now use <Loader> placeholders and <Badge> for token symbols * Unified border radii (rounded over rounded-lg) and font weights for headings / labels
Assets & deps	* Added public/solanaLogoMark.svg * Pinned latest Radix, ShadCN, Wallet Adapter, CVA versions * Updated pnpm

Before/After Examples

---

Important

Enhances UI with theming, new components (Badge, Loader), and styling updates across the Mosaic application.

• Theming and Styling:
  • Updated globals.css with light/dark palettes and base element resets.
  • Tailwind config now uses CSS variables for color and radius.
  • Introduced --mosaic-gradient-color and radial text-mask utility.
• Components:
  • Added <Badge> component for status and meta info.
  • Added <Loader> component for animated loading spinner.
• Layout and Pages:
  • Updated header.tsx with dynamic wallet button and gradient logotype.
  • Updated footer.tsx with social media links and license info.
  • dashboard/page.tsx, dashboard/create/arcade-token/page.tsx, and dashboard/create/stablecoin/page.tsx now use <Loader> and <Badge>.
• Assets and Dependencies:
  • Added public/solanaLogoMark.svg.
  • Updated dependencies in package.json including Radix and Tailwind.

^{This description was created by for 3e03fb9. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 3e03fb9 in 1 minute and 32 seconds. Click for details.

• Reviewed 855 lines of code in 16 files
• Skipped 2 files when reviewing.
• Skipped posting 10 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. packages/ui/src/app/dashboard/create/arcade-token/page.tsx:169

• Draft comment:
  Consistent use of 'rounded' (instead of 'rounded-lg') aligns with updated design tokens. Confirm this change was intentional.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. packages/ui/src/app/dashboard/create/stablecoin/page.tsx:169

• Draft comment:
  Use of 'rounded' instead of 'rounded-lg' for the optional parameters container ensures consistent border radii.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, explaining the use of 'rounded' instead of 'rounded-lg'. It doesn't suggest a change or ask for confirmation of intent, nor does it point out a potential issue.

3. packages/ui/src/app/dashboard/manage/[address]/page.tsx:145

• Draft comment:
  Refactoring the inline spinner to use the reusable Loader component ensures consistency in loading indicators.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. packages/ui/src/app/dashboard/manage/[address]/page.tsx:240

• Draft comment:
  Typography update: 'font-medium' was removed from several label classes. Ensure that reduced emphasis still meets accessibility and design guidelines.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

5. packages/ui/src/app/dashboard/page.tsx:172

• Draft comment:
  The addition of the Badge component to display token symbols enhances clarity; verify that it meets contrast and sizing requirements.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

6. packages/ui/src/app/globals.css:88

• Draft comment:
  The .mosaic-text gradient effect introduces a unique visual style. Ensure that text remains legible and accessible across different backgrounds.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative and suggests ensuring legibility and accessibility, which violates the rule against asking the PR author to ensure certain behaviors. It doesn't provide a specific code suggestion or point out a specific issue.

7. packages/ui/src/app/layout.tsx:10

• Draft comment:
  Switching to Inter and Fira Mono creates a modern typographic system. Confirm the chosen font weights are supported and render well across devices.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to confirm that the chosen font weights are supported and render well across devices. This falls under asking the author to ensure behavior is intended or to double-check things, which is against the rules.

8. packages/ui/src/components/layout/header.tsx:36

• Draft comment:
  Dynamic import of WalletMultiButton as WalletButton is an effective SSR workaround. Validate that the inline styles match the overall theme.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 20% <= threshold 50% The comment is informative and suggests validating the inline styles, which is not specific enough to be actionable. It doesn't provide a specific code suggestion or ask for a specific test to be written.

9. packages/ui/tailwind.config.js:27

• Draft comment:
  Tailwind config now utilizes CSS variables for colors and custom keyframes. Ensure these settings integrate seamlessly with existing components.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is asking the PR author to ensure that the new Tailwind config integrates seamlessly with existing components. This falls under the category of asking the author to double-check or ensure something, which is against the rules.

10. packages/ui/src/components/ui/loader.module.css:15

• Draft comment:
  The Loader keyframe animation is detailed; consider its performance impact on lower-end devices if many instances are rendered concurrently.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

Workflow ID: wflow_WWgQ1i3gwrv4667o

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}