[TOOL-3075] Dashboard: Adjust theming, Improved light mode #5956

MananTank · 2025-01-15T15:12:27Z

Fix "inverted look" of light mode - light mode now correctly has a slightly dark background and lighter cards on top

Instead of bg-muted/50, use bg-card instead. --card color is updated
For cards that are links, don't change the background color on hover - apply a subtle border change instead - added a --active-border for this - this looks great in both light and dark mode
Prefer using bg-accent for hover effects instead of bg-muted (even though they are currently both same color) for adding hover accent. Use bg-accent/50 for applying a very subtle accent - use cases: clickable table row

PR-Codex overview

This PR focuses on updating the styling of various components throughout the application to use a new background color scheme. It primarily replaces instances of bg-muted with bg-card and modifies hover effects for better visual consistency.

Detailed summary

Changed className from bg-muted/50 to bg-card in multiple components.
Updated hover effects from hover:bg-muted/50 to hover:bg-card.
Replaced bg-muted with bg-card in various lists and containers.
Adjusted text colors and other styles for consistency across components.

The following files were skipped due to too many changes: apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx, apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx, apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx, apps/dashboard/src/@/styles/globals.css, apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx, apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx, apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx, apps/dashboard/src/app/components/sdk-component-theme.ts, apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx, apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx, apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

vercel · 2025-01-15T15:12:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2025 1:16am

3 Skipped Deployments

Name	Status	Updated (UTC)
docs-v2	⬜️ Skipped (Inspect)	Jan 16, 2025 1:16am
thirdweb_playground	⬜️ Skipped (Inspect)	Jan 16, 2025 1:16am
wallet-ui	⬜️ Skipped (Inspect)	Jan 16, 2025 1:16am

linear · 2025-01-15T15:12:31Z

TOOL-3075 Fix Light Mode colors, Remove opacity based theming for subtle backgrounds

changeset-bot · 2025-01-15T15:12:32Z

⚠️ No Changeset found

Latest commit: be7759d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

MananTank · 2025-01-15T15:12:46Z

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge-queue - adds this PR to the back of the merge queue
hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-01-15T15:15:59Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	46.68 KB (0%)	934 ms (0%)	4.2 s (+27.26% 🔺)	5.2 s
thirdweb (cjs)	116.72 KB (0%)	2.4 s (0%)	5.8 s (-9.21% 🔽)	8.2 s
thirdweb (minimal + tree-shaking)	5.59 KB (0%)	112 ms (0%)	164 ms (-65.19% 🔽)	276 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	100 ms (+18.42% 🔺)	110 ms
thirdweb/react (minimal + tree-shaking)	19.24 KB (0%)	385 ms (0%)	826 ms (+57.2% 🔺)	1.3 s

codecov · 2025-01-15T23:47:26Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.82%. Comparing base (15178b2) to head (be7759d).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5956   +/-   ##
=======================================
  Coverage   54.82%   54.82%           
=======================================
  Files        1150     1150           
  Lines       61194    61194           
  Branches     5155     5155           
=======================================
  Hits        33549    33549           
  Misses      26918    26918           
  Partials      727      727

Flag	Coverage Δ		*Carryforward flag
legacy_packages	`65.68% <ø> (ø)`		Carriedforward from 15178b2
packages	`52.47% <ø> (ø)`

*This pull request uses carry forward flags. Click here to find out more.

graphite-app · 2025-01-15T23:57:29Z

Merge activity

Jan 15, 6:57 PM EST: A user added this pull request to the Graphite merge queue.
Jan 15, 7:25 PM EST: The Graphite merge queue couldn't merge this PR because it was not satisfying all requirements (Failed CI: 'Vercel – wallet-ui').
Jan 15, 8:07 PM EST: A user added this pull request to the Graphite merge queue.
Jan 15, 8:16 PM EST: A user merged this pull request with the Graphite merge queue.

Fix "inverted look" of light mode - light mode now correctly has a slightly dark background and lighter cards on top * Instead of `bg-muted/50`, use `bg-card` instead. `--card` color is updated * For cards that are links, don't change the background color on hover - apply a subtle border change instead - added a `--active-border` for this - this looks great in both light and dark mode * Prefer using `bg-accent` for hover effects instead of `bg-muted` (even though they are currently both same color) for adding hover accent. Use `bg-accent/50` for applying a very subtle accent - use cases: clickable table row  --- ## PR-Codex overview This PR focuses on updating the styling of various components across the application to enhance visual consistency. It replaces instances of `bg-muted` with `bg-card` and modifies hover effects to improve user experience. ### Detailed summary - Replaced `bg-muted/50` with `bg-card` in various components. - Updated hover effects from `hover:bg-muted/50` to `hover:bg-card`. - Changed button backgrounds and hover states for improved aesthetics. - Adjusted class names for consistency across UI elements. > The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx`, `apps/dashboard/src/@/styles/globals.css`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx`, `apps/dashboard/src/app/components/sdk-component-theme.ts`, `apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx`, `apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx`, `apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

Fix "inverted look" of light mode - light mode now correctly has a slightly dark background and lighter cards on top * Instead of `bg-muted/50`, use `bg-card` instead. `--card` color is updated * For cards that are links, don't change the background color on hover - apply a subtle border change instead - added a `--active-border` for this - this looks great in both light and dark mode * Prefer using `bg-accent` for hover effects instead of `bg-muted` (even though they are currently both same color) for adding hover accent. Use `bg-accent/50` for applying a very subtle accent - use cases: clickable table row  --- ## PR-Codex overview This PR focuses on updating the styles of various components in the application to replace the `bg-muted` class with `bg-card`, enhancing the visual consistency across the UI. ### Detailed summary - Changed `className` from `bg-muted/50` to `bg-card` in multiple components. - Updated hover effects from `hover:bg-muted` to `hover:bg-card`. - Modified background colors in various layouts to use `bg-card` instead of `bg-muted`. - Adjusted button and input styles for consistent theming. > The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx`, `apps/dashboard/src/@/styles/globals.css`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx`, `apps/dashboard/src/app/components/sdk-component-theme.ts`, `apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx`, `apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx`, `apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

Fix "inverted look" of light mode - light mode now correctly has a slightly dark background and lighter cards on top * Instead of `bg-muted/50`, use `bg-card` instead. `--card` color is updated * For cards that are links, don't change the background color on hover - apply a subtle border change instead - added a `--active-border` for this - this looks great in both light and dark mode * Prefer using `bg-accent` for hover effects instead of `bg-muted` (even though they are currently both same color) for adding hover accent. Use `bg-accent/50` for applying a very subtle accent - use cases: clickable table row  --- ## PR-Codex overview This PR focuses on updating the styling of various components across the application to enhance visual consistency. It replaces instances of `bg-muted` with `bg-card` and modifies hover effects to improve user experience. ### Detailed summary - Replaced `bg-muted/50` with `bg-card` in various components. - Updated hover effects from `hover:bg-muted/50` to `hover:bg-card`. - Changed button backgrounds and hover states for improved aesthetics. - Adjusted class names for consistency across UI elements. > The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx`, `apps/dashboard/src/@/styles/globals.css`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx`, `apps/dashboard/src/app/components/sdk-component-theme.ts`, `apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx`, `apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx`, `apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

vercel bot temporarily deployed to Preview – docs-v2 January 15, 2025 15:12 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground January 15, 2025 15:12 Inactive

vercel bot temporarily deployed to Preview – wallet-ui January 15, 2025 15:12 Inactive

github-actions bot assigned MananTank Jan 15, 2025

github-actions bot added the Dashboard Involves changes to the Dashboard. label Jan 15, 2025

MananTank marked this pull request as ready for review January 15, 2025 15:13

MananTank requested review from a team as code owners January 15, 2025 15:13

vercel bot deployed to Preview – thirdweb-www January 15, 2025 15:20 View deployment

MananTank force-pushed the TOOL-3075 branch from 40ae8b8 to 3a8fd9f Compare January 15, 2025 16:41

vercel bot temporarily deployed to Preview – docs-v2 January 15, 2025 16:41 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground January 15, 2025 16:41 Inactive

vercel bot temporarily deployed to Preview – wallet-ui January 15, 2025 16:41 Inactive

vercel bot deployed to Preview – thirdweb-www January 15, 2025 16:49 View deployment

joaquim-verges approved these changes Jan 15, 2025

View reviewed changes

MananTank force-pushed the TOOL-3075 branch from 3a8fd9f to e659c4d Compare January 15, 2025 21:34

vercel bot temporarily deployed to Preview – wallet-ui January 15, 2025 21:34 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 15, 2025 21:34 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground January 15, 2025 21:34 Inactive

vercel bot deployed to Preview – thirdweb-www January 15, 2025 21:41 View deployment

MananTank force-pushed the TOOL-3075 branch from e659c4d to 80104ec Compare January 15, 2025 21:53

vercel bot temporarily deployed to Preview – wallet-ui January 15, 2025 21:53 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 15, 2025 21:53 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground January 15, 2025 21:53 Inactive

vercel bot deployed to Preview – thirdweb-www January 15, 2025 22:01 View deployment

vercel bot deployed to Preview – thirdweb-www January 15, 2025 23:32 View deployment

MananTank mentioned this pull request Jan 16, 2025

[TOOL-3056]: Add Engine transactions bar chart, Make shadcn table header sticky #5963

Merged

MananTank force-pushed the TOOL-3075 branch from b801cde to f28103a Compare January 16, 2025 00:15

vercel bot temporarily deployed to Preview – thirdweb_playground January 16, 2025 00:15 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 16, 2025 00:15 Inactive

vercel bot temporarily deployed to Preview – wallet-ui January 16, 2025 00:15 Inactive

vercel bot deployed to Preview – thirdweb-www January 16, 2025 00:22 View deployment

MananTank force-pushed the TOOL-3075 branch from f28103a to 8a3fc3c Compare January 16, 2025 00:22

vercel bot deployed to Preview – wallet-ui January 16, 2025 00:22 View deployment

vercel bot deployed to Preview – docs-v2 January 16, 2025 00:22 View deployment

vercel bot deployed to Preview – thirdweb_playground January 16, 2025 00:22 View deployment

vercel bot deployed to Preview – thirdweb-www January 16, 2025 00:25 View deployment

MananTank force-pushed the TOOL-3075 branch from 8a3fc3c to be7759d Compare January 16, 2025 01:08

vercel bot temporarily deployed to Preview – thirdweb_playground January 16, 2025 01:08 Inactive

vercel bot temporarily deployed to Preview – docs-v2 January 16, 2025 01:08 Inactive

vercel bot temporarily deployed to Preview – wallet-ui January 16, 2025 01:08 Inactive

vercel bot deployed to Preview – thirdweb-www January 16, 2025 01:16 View deployment

graphite-app bot merged commit be7759d into main Jan 16, 2025
32 checks passed

graphite-app bot deleted the TOOL-3075 branch January 16, 2025 01:16

vercel bot temporarily deployed to Production – wallet-ui January 16, 2025 01:16 Inactive

vercel bot temporarily deployed to Production – thirdweb_playground January 16, 2025 01:16 Inactive

vercel bot temporarily deployed to Production – docs-v2 January 16, 2025 01:16 Inactive

vercel bot deployed to Production – thirdweb-www January 16, 2025 01:24 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[TOOL-3075] Dashboard: Adjust theming, Improved light mode #5956

[TOOL-3075] Dashboard: Adjust theming, Improved light mode #5956

Uh oh!

MananTank commented Jan 15, 2025 •

edited by pr-codex bot

Loading

Uh oh!

vercel bot commented Jan 15, 2025 •

edited

Loading

Uh oh!

linear bot commented Jan 15, 2025

Uh oh!

changeset-bot bot commented Jan 15, 2025 •

edited

Loading

Uh oh!

MananTank commented Jan 15, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jan 15, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jan 15, 2025 •

edited

Loading

Uh oh!

graphite-app bot commented Jan 15, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[TOOL-3075] Dashboard: Adjust theming, Improved light mode #5956

[TOOL-3075] Dashboard: Adjust theming, Improved light mode #5956

Uh oh!

Conversation

MananTank commented Jan 15, 2025 • edited by pr-codex bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR-Codex overview

Detailed summary

Uh oh!

vercel bot commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear bot commented Jan 15, 2025

Uh oh!

changeset-bot bot commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

MananTank commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

codecov bot commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

graphite-app bot commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MananTank commented Jan 15, 2025 •

edited by pr-codex bot

Loading

vercel bot commented Jan 15, 2025 •

edited

Loading

changeset-bot bot commented Jan 15, 2025 •

edited

Loading

MananTank commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

codecov bot commented Jan 15, 2025 •

edited

Loading

graphite-app bot commented Jan 15, 2025 •

edited

Loading