Implement visual design uplift with dark landing page and refined UI styling

[Copilot]

Applies professional visual design improvements to match modern dev tool aesthetics (Chrome DevTools, VS Code) while preserving all existing functionality.

Changes

Landing Page (FileDropZone)

• Dark slate background (bg-slate-800 #1e293b) replaces light theme
• White typography with blue accent colors
• Button text: "Load SAZ File" → "Select File" for brevity
• Maintains drag-drop states, transitions, privacy messaging

Before/After:

Session Grid & Inspector

• Enhanced hover state: bg-blue-50/50 → bg-blue-50 for better visibility
• Color-coded status (2xx green, 3xx blue, 4xx-5xx red) and methods already implemented, retained
• White panels, blue tab indicators, compact 11px fonts retained

Main Viewer:

Session Hover:

Header & Layout

• App background: bg-background → bg-slate-50
• Header: explicit bg-white with blue-themed SAZ badge
• Minimal padding maintained

Test Updates

Updated button text expectations in 3 test files (FileDropZone.test.tsx, App.test.tsx, file-upload.spec.ts) to match "Select File" label.

Files Changed

6 files modified: 19 insertions, 19 deletions

• Core: FileDropZone.tsx, SessionGrid.tsx, App.tsx
• Tests: 3 files

All functionality preserved: file upload, validation, session navigation, sorting, filtering, keyboard shortcuts, inspector tabs, syntax highlighting.

Original prompt

Objective

Give the SAZ Viewer application a visual design uplift to match the professional look shown in the provided screenshots, while maintaining 100% functionality.

Design Requirements

Landing Page (FileDropZone)

Reference:

• Dark navy/slate background color (#1e293b or similar)
• Centered dashed border drop zone with proper hover/drag states
• Large centered icon (FileArchive icon from Phosphor)
• Clean, modern typography
• Bright blue CTA button ("Select File")
• Secondary "Load Example Dataset" button at bottom
• Smooth transitions and animations

Main Viewer Layout

Reference: and

Session Grid (Left Panel)

• Clean white background with minimal borders
• Very compact table layout with small fonts (11px)
• Resizable columns: #, Status, Method, URL
• Color-coded status codes:
  • 2xx: Emerald/Green (#10b981)
  • 3xx: Blue (#3b82f6)
  • 4xx-5xx: Red (#ef4444)
• Color-coded HTTP methods:
  • GET: Blue
  • POST: Green
  • PUT: Amber
  • DELETE: Red
  • PATCH: Purple
  • CONNECT: Teal
• Active row with left blue accent border (2px solid #3b82f6)
• Subtle hover state (light blue background #eff6ff)
• Search input and method filter dropdown at top
• Sortable columns with small arrow indicators
• Row borders in neutral gray

Inspector Panel (Right Panel)

• White background
• Clean tab interface with underline style indicators
• Active tab: blue bottom border (2px) and light blue background
• Tabs: Headers, Body (with sub-types: Raw, JSON, XML, Hex)
• Badge showing header count
• Status code and size display in header
• Monospace fonts for technical content
• Table layout for headers (key-value pairs)
• Syntax highlighting for JSON/XML
• Hex viewer for binary content

Header Bar

• White background with bottom border
• File name and icon on left
• Minimal padding (py-2.5)
• Clean typography

Technical Requirements

Styling Guidelines

• Use Tailwind CSS utility classes
• Maintain existing component structure
• Use consistent spacing (multiples of 4px)
• Ensure all interactive elements have hover/focus states
• Smooth transitions (200ms duration)
• Maintain accessibility standards

Functionality Requirements - NO REGRESSIONS

All existing functionality MUST continue to work:

1. File Upload

   • Drag and drop .saz files
   • Click to browse and select files
   • File validation
   • Loading states
   • Error handling

2. Session Grid

   • Display all sessions from SAZ file
   • Column resizing
   • Sorting by #, Status, Method, URL
   • Search/filter functionality
   • Method filtering dropdown
   • Keyboard navigation (up/down arrows)
   • Active session selection
   • Auto-scroll to active session

3. Inspector Panel

   • Switch between Request and Response views
   • All tabs functional: Headers, Raw, JSON, XML, Hex
   • Proper content-type detection
   • JSON formatting and syntax highlighting
   • XML syntax highlighting
   • Hex viewer for binary content
   • Display headers in table format
   • Show status codes and sizes

4. Keyboard Shortcuts

   • Up/Down arrow navigation
   • Any other existing shortcuts

Testing Requirements

• All existing E2E tests must pass
• Verify functionality after uploading a SAZ file:
  • File loads successfully
  • Sessions display correctly
  • Session selection works
  • All inspector tabs work
  • Search and filtering work
  • Sorting works
  • Column resizing works
  • Keyboard navigation works

Files to Modify

Primary files:

• src/components/FileDropZone.tsx - Landing page redesign
• src/components/SessionGrid.tsx - Session list refinements
• src/components/InspectorPanel.tsx - Inspector panel updates
• src/App.tsx - Header and layout adjustments
• src/index.css or src/main.css - Global style updates if needed

Success Criteria

✅ Visual design matches the screenshots provided
✅ All existing functionality works without regression
✅ E2E tests pass
✅ Smooth animations and transitions
✅ Consistent color coding throughout
✅ Professional, polished appearance
✅ Maintains accessibility standards

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.