feat: modernize contract analyzer UI

[rawberto94]

User description

Summary

• Add side-by-side layout with gradient backdrop for contract analysis
• Refine file upload component with glassmorphism styling
• Make analysis panel scrollable for lengthy insights

Testing

• npm test (fails: Missing script "test")

---

https://chatgpt.com/codex/tasks/task_e_6898ecb6afa08328b24f22d8776ffd3b

---

PR Type

Enhancement

---

Description

• Modernize contract analyzer UI with side-by-side layout

• Add gradient backdrop and glassmorphism styling

• Make analysis panel scrollable for better UX

• Remove tab navigation for simplified interface

---

Diagram Walkthrough

flowchart LR
  A["Old Single Column Layout"] --> B["New Side-by-Side Layout"]
  B --> C["File Upload Panel"]
  B --> D["Analysis Results Panel"]
  E["Gradient Background"] --> B
  F["Glassmorphism Effects"] --> C
  F --> D

Loading

File Walkthrough

Relevant files

Enhancement

ContractAnalyzer.tsx Complete UI redesign with modern layout                                    src/components/contract/ContractAnalyzer.tsx Replace single-column layout with side-by-side grid layout Add gradient background and glassmorphism styling Remove tab navigation and simplify interface Add centered heading and modern card design +18/-67  FileUpload.tsx Enhance file upload with glassmorphism styling                      src/components/contract-analyzer/FileUpload.tsx Add glassmorphism hover effects to drop zone Change layout to flex column with full height Make analyze button full width and position at bottom Enhance visual styling with backdrop blur effects +8/-8      AnalysisDisplay.tsx Make analysis display scrollable                                                  src/components/contract-analyzer/AnalysisDisplay.tsx Add full height and vertical scrolling capability Enhance header border styling for better visual separation +2/-2

---

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Layout Overflow The container now has h-full and overflow-y-auto; if a parent doesn’t set an explicit height, this may not scroll as intended or can clip internal elements. Verify parent containers provide a fixed/available height to ensure consistent scrolling. <div className="space-y-6 h-full overflow-y-auto"> <header className="pb-4 border-b border-gray-200"> <p className="text-sm text-gray-500">Analysis Result</p> Accessibility The drop zone relies on onClick to trigger a hidden input; ensure the div is keyboard accessible (role/button and key handlers) and that contrast with glassmorphism hover (white/40) remains sufficient. <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 cursor-pointer hover:border-blue-500/80 hover:bg-white/40 transition-all" onClick={() => fileInputRef.current?.click()} onDragOver={handleDragOver} onDrop={handleDrop} > Removed Features Tab navigation and related state were removed; confirm no downstream dependencies rely on activeTab/isAnalyzing/uploadError/analysisProgress and that UX regression (no chat placeholder) is intentional. <div className="min-h-[80vh] p-6 bg-gradient-to-br from-gray-50 to-blue-100 rounded-xl"> <h2 className="text-2xl font-semibold text-gray-900 mb-6 text-center"> Contract Analysis </h2> <div className="grid gap-6 lg:grid-cols-2"> <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6"> <FileUpload /> </div> <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6"> {currentAnalysis ? ( <AnalysisDisplay /> ) : ( <div className="h-full flex items-center justify-center text-gray-500"> Upload a contract to see analysis results. </div> )} </div> </div>

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Confirm context supports UI changes The new side-by-side, full-height, scrollable layout relies on parent containers providing a fixed height and proper overflow handling; without it, the AnalysisDisplay h-full/overflow-y-auto and FileUpload flex column with mt-auto button may not render as intended. Verify that page-level wrappers set a predictable height (e.g., min-h-screen) and that mobile/responsive behavior is preserved, otherwise users may see clipped content or misplaced CTAs on smaller viewports. Examples: src/components/contract/ContractAnalyzer.tsx [14-32] <div className="min-h-[80vh] p-6 bg-gradient-to-br from-gray-50 to-blue-100 rounded-xl"> <h2 className="text-2xl font-semibold text-gray-900 mb-6 text-center"> Contract Analysis </h2> <div className="grid gap-6 lg:grid-cols-2"> <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6"> <FileUpload /> </div> <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6"> {currentAnalysis ? ( ... (clipped 9 lines) src/components/contract-analyzer/FileUpload.tsx [55] <div className="flex flex-col h-full"> Solution Walkthrough: Before: // Layout where components' height is determined by their content function ContractAnalyzer() { return ( <div className="space-y-6"> {/* ... content ... */} <FileUpload /> <AnalysisDisplay /> </div> ); } After: // Layout where components must fill a parent-defined height function ContractAnalyzer() { return ( <div className="min-h-[80vh] grid lg:grid-cols-2"> <div className="..."><FileUpload /></div> <div className="..."><AnalysisDisplay /></div> </div> ); } // FileUpload.tsx now uses h-full <div className="flex flex-col h-full"> ... </div> Suggestion importance[1-10]: 8 __ Why: This suggestion correctly identifies a critical architectural dependency of the new UI on its parent container's height, which is crucial for the layout's correctness and responsiveness.	Medium
General	Add min height to panes The right pane's empty state uses h-full, but the grid children don't have an explicit height, so vertical centering may not work. Give both grid panes a minimum height to ensure consistent layout and proper centering. src/components/contract/ContractAnalyzer.tsx [18-31] <div className="grid gap-6 lg:grid-cols-2"> - <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6"> + <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6 min-h-[24rem]"> <FileUpload /> </div> - <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6"> + <div className="bg-white/70 backdrop-blur-md rounded-xl shadow-md p-6 min-h-[24rem]"> {currentAnalysis ? ( <AnalysisDisplay /> ) : ( <div className="h-full flex items-center justify-center text-gray-500"> Upload a contract to see analysis results. </div> )} </div> </div> Apply / Chat Suggestion importance[1-10]: 6 __ Why: This suggestion correctly identifies a potential layout issue where the empty state's vertical centering might fail, and proposes a reasonable fix by adding a min-h to ensure consistent pane heights.	Low
More