ui style changes

[thehumanworks]

No description provided.

[Copilot]

Pull request overview

Updates the renderer UI styling toward a flatter, rounded aesthetic while also switching the terminal monospace font to FiraCode Nerd Font Mono.

Changes:

• Replace Terminess Nerd Font Mono usage with FiraCode Nerd Font Mono across CSS + xterm config.
• Adjust theme surface tokens and component styles (gradients, blur, rounded corners; remove clip-path “blade/notch” shapes).
• Restyle workspace sidebar and canvas controls; add a Cursor rule doc capturing the new styling conventions.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/renderer/src/styles.css	Switch mono font-face + mono token; tweak surfaces (sidebar gradient), add blur and rounded corners; remove clip-path shapes; flatten active/secondary surfaces.
src/renderer/src/components/WorkspaceSidebar.tsx	Restyle sidebar items/buttons; change collapse affordance; adjust active indicator behavior.
src/renderer/src/components/TerminalPane.tsx	Update xterm fontFamily fallback list to align with new mono font choice.
src/renderer/src/components/Canvas.tsx	Restyle canvas toolbar controls and add brand label in the canvas controls area.
.cursor/rules/minimalist-ui-styling.mdc	Document new minimalist/rounded styling guidance for CSS/TSX.

Comments suppressed due to low confidence (1)

src/renderer/src/styles.css:335

• The comments around .blade, .blade-compact, and .notch still describe angled/"cut" shapes (clip-path notches) but the implementation now uses border-radius. Please update these comments so they match the current styling behavior; otherwise they’ll mislead future edits (e.g., references to “point cuts” / “angled notches” / “angled shell”).

  /*
   * Full bladed shell — both leading and trailing edges are cut at 12px.
   * Text needs at least ~18px horizontal padding on each side so it
   * cannot collide with the angled notches when the element is narrow.
   */
  .blade {
    border-radius: 18px;
    padding-left: max(1.125rem, 18px);
    padding-right: max(1.125rem, 18px);
  }

  /* When a blade wraps a single icon/glyph we still need the point cuts
   * but can collapse the textual side padding to stay compact. */
  .blade-compact {
    border-radius: 18px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .notch {
    border-radius: 12px;
  }

  /*
   * Fully rounded pill used for the workspace list entries in the sidebar.
   * Kept separate from .notch so the angled shell on terminal windows and
   * modals is unaffected.
   */

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

SECONDARY_BUTTON styling no longer includes any disabled-state treatment, but the "Delete" button is still rendered with disabled={props.workspaces.length === 1}. As a result, the disabled button may look enabled (no opacity/cursor change). Add explicit disabled styling (e.g., opacity/cursor and suppress hover) or keep using a class that applies consistent [disabled] styles.

Suggested change

	"app-region-no-drag rounded-[10px] min-h-9 min-w-0 px-1.5 text-[10px] font-medium tracking-[0.01em] text-center cursor-pointer overflow-hidden whitespace-nowrap text-ellipsis text-muted hover:text-fg hover:bg-[var(--surface-item-hover-bg)] transition-colors";
	"app-region-no-drag rounded-[10px] min-h-9 min-w-0 px-1.5 text-[10px] font-medium tracking-[0.01em] text-center cursor-pointer overflow-hidden whitespace-nowrap text-ellipsis text-muted hover:text-fg hover:bg-[var(--surface-item-hover-bg)] transition-colors disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-muted disabled:hover:bg-transparent";

[Copilot]

The new collapse/expand control is an absolutely-positioned <div> with onClick. This is not keyboard-accessible and has no role/ARIA label, so it’s not reachable for screen-reader/keyboard users. Consider using a <button> (or adding role="button", tabIndex={0}, keyboard handlers, and an aria-label) and ensure the hit target remains comfortably large.

Suggested change

	<div
	className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-50 hover:bg-fg/10 transition-colors app-region-no-drag"
	onClick={props.onToggleCollapsed}
	<button
	type="button"
	className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-50 hover:bg-fg/10 transition-colors app-region-no-drag"
	onClick={props.onToggleCollapsed}
	aria-label={props.collapsed ? "Expand sidebar" : "Collapse sidebar"}