Skip to content

feat(admin): Light theme and tiled home page - #8533

Merged
onewland merged 9 commits into
masterfrom
feat/admin-solarized-home-tiles
Oct 9, 2026
Merged

onewland merged 9 commits into
masterfrom
feat/admin-solarized-home-tiles

Conversation

@onewland

@onewland onewland commented Oct 9, 2026 •

Copy link
Copy Markdown
Contributor

Visual refresh for snuba admin.

Home page

  • The sidebar is replaced with a grid of tool tiles. Each tile shows an icon, the tool name and a one-line description, and the whole tile is a link (middle-click opens it in a new tab). Tiles lift and pick up a blue border on hover, and they follow the same tool permissions as the sidebar (now shared via isToolAllowed in data.tsx). If /tools fails to load, an error is shown instead of an empty grid.
  • Regions are shown as a row of buttons on the same line as their heading, colored and styled like the header banner (regionColor, with the main region treated as "SaaS").
  • "MEREDITH IS #1" moves out of the body and into a very light grey, diagonally tiled SVG background, shown on the home page only.
  • Other pages keep the sidebar; the header logo now links back to the home page.

Theme

  • High-contrast light palette in theme.tsx: near-black text on near-white surfaces, with white header, tiles and panels and a light grey sidebar.
  • Mantine and Bootstrap use their default light themes. The SQL editor gets a border so it stands out from the page.

Navigation

  • The app follows hashchange, so plain #tool links work. The browser back button now switches pages too.
  • Less-used tools (Snubsplain, SnQL to SQL, EAP Stats, Replacements) move to the end of the list.

Testing

  • Jest suite passes and the bundle builds.
  • Checked the home, Copy Tables, Querylog and System Queries pages in headless Chrome against mocked endpoints.

Screenshots:
before:
Screenshot 2026-10-09 at 1 31 24 PM

home after:
Screenshot 2026-10-09 at 2 21 31 PM

random page after (just to show that the sidebar still lives on the non-home page):
Screenshot 2026-10-09 at 2 21 51 PM

Potential future improvements in #8536

🤖 Generated with Claude Code

Replace the home page sidebar with a grid of tool tiles that have
descriptions and a hover effect, and show regions as a row of buttons
colored to match the header banner.

Switch the admin UI to a solarized dark palette, including the Mantine
and Bootstrap themes and the SQL editor, and move the "MEREDITH IS #1"
line into a low-contrast diagonal tiling on the page background.

Move the less used tools (Snubsplain, SnQL to SQL, EAP Stats,
Replacements) to the end of the list.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@onewland
onewland requested a review from a team as a code owner October 9, 2026 20:39

@MeredithAnya MeredithAnya left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

VERY MUCH APPROVE

Comment thread snuba/admin/static/welcome/index.tsx

@ElioDiNino ElioDiNino left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥 (don't show the frontend devs)

onewland and others added 3 commits October 9, 2026 13:49
If /tools failed or returned an unexpected body, the tool grid stayed
empty with no explanation. Catch the failure and show it under the
Tools heading.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Replace the solarized dark palette with near-black text on near-white
surfaces, dropping the Mantine and Bootstrap dark-theme overrides and
returning the SQL editor to its light syntax colors.

Draw the slogan tiling at a steeper angle, wrapping each copy so it
tiles seamlessly, and only show it on the home page.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@onewland onewland changed the title feat(admin): Solarized dark theme and tiled home page feat(admin): Light theme and tiled home page Oct 9, 2026
onewland and others added 2 commits October 9, 2026 14:24
The steeper angle made the background text hard to read.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Replace the saturated blue table header with a light slate blue and
dark text, give tables a white body, and use a border color that shows
on both the header and the body.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
onewland and others added 2 commits October 9, 2026 15:08
…d-home-tiles

# Conflicts:
#	snuba/admin/static/welcome/index.tsx
Right-align the button on the same line as the region pills and give it
the pills' type and height, outlined in a muted red so it doesn't read
as another region.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@onewland
onewland enabled auto-merge (squash) October 9, 2026 22:13
@onewland
onewland disabled auto-merge October 9, 2026 22:14
@onewland
onewland enabled auto-merge (squash) October 9, 2026 22:17
Comment thread snuba/admin/dist/index.html Outdated
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
<!-- imported css in index.tsx, so esbuild builds a bundle.css next to bundle.js -->
<link rel="stylesheet" href="./static/bundle.css" />
<style>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we pull this out into a css file?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Copy link
Copy Markdown
Contributor

YES!!! thank you.

Move the <style> block from index.html into static/styles.css and import
it from index.tsx after bootstrap, so esbuild bundles it into bundle.css
in the same precedence order as before.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@onewland
onewland merged commit b0c40dd into master Oct 9, 2026
69 checks passed
@onewland
onewland deleted the feat/admin-solarized-home-tiles branch October 9, 2026 23:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants