Skip to content

Modernize UI with Material Design styling#824

Open
donework wants to merge 1 commit into
MindWorkAI:mainfrom
donework:feature/ui-styling
Open

Modernize UI with Material Design styling#824
donework wants to merge 1 commit into
MindWorkAI:mainfrom
donework:feature/ui-styling

Conversation

@donework

Copy link
Copy Markdown
Contributor

Summary

This PR modernizes the visual appearance of MindWork AI Studio to align more closely with Material Design principles. The goal was to move away from hard borders and flat headings towards a consistent elevation-based hierarchy, a unified color language, and more polished UI elements throughout the app.

  • Added an animated banner carousel to the home page: 9 thematic SVG banners rotate every 10 seconds with a fade transition; the active banner label and tab indicator strip are overlaid directly on the image
  • Added a primary-colored full-width page header bar across all pages, replacing the plain h3 headings with a consistent, modern bar that extends edge-to-edge
  • Added "MindWork AI Studio" text to the splash screen below the app icon
  • Replaced border-based card separation throughout the app (expansion panels, assistant blocks, workspace sidebar, supporters page) with MudBlazor elevation — creates a clearer visual hierarchy without hard outlines
  • Applied a custom MudTheme with a green primary palette and adjusted background colors for both light and dark mode
  • Modernized the navbar: rounded pill-shaped nav links with a primary-colored active state
  • Styled the chat splitter bar: thin and muted at rest, primary color on hover

Test plan

  • Home page: banner rotates automatically, label and tab indicators update correctly, fade animation plays
  • All pages: page header bar is visible, full-width, and text is legible in light and dark mode
  • Splash screen: "MindWork AI Studio" text appears below the app icon on startup
  • Assistants page: cards render with elevation, primary-colored action buttons
  • Chat page: splitter bar visible on hover, workspace sidebar has elevation shadow instead of border
  • Supporters page: "Our Titans" block and contributor cards use elevation hierarchy
  • Light and dark mode: all changes look correct in both themes

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.

1 participant