Skip to content

ui: improve UI consistency #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
frasza wants to merge 1 commit into
base: main
Choose a base branch
from
Open

ui: improve UI consistency #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/editor/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -558,21 +558,21 @@ const App: React.FC = () => {
{/* Tater sprites */}
{taterMode && <TaterSpriteRunning />}
{/* Minimal Header */}
<header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
<header className="py-2.5 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
<div className="flex items-center gap-2 md:gap-3">
<a
href="https://plannotator.ai"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity"
>
<span className="text-sm font-semibold tracking-tight">Plannotator</span>
<span className="text-sm font-semibold">Plannotator</span>
</a>
<a
href="https://github.com/backnotprop/plannotator/releases"
target="_blank"
rel="noopener noreferrer"
className="text-xs text-muted-foreground font-mono opacity-60 hidden md:inline hover:opacity-100 transition-opacity"
className="text-xs text-muted-foreground font-mono opacity-70 hidden md:inline hover:opacity-100 transition-opacity"
>
v{typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'}
</a>
Expand All @@ -599,7 +599,7 @@ const App: React.FC = () => {
}
}}
disabled={isSubmitting}
className={`p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-all ${
className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all flex items-center gap-1.5 ${
isSubmitting
? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
: 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/30'
Expand All @@ -623,7 +623,7 @@ const App: React.FC = () => {
}
}}
disabled={isSubmitting}
className={`px-2 py-1 md:px-2.5 rounded-md text-xs font-medium transition-all ${
className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all ${
isSubmitting
? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
: origin === 'claude-code' && annotations.length > 0
Expand Down Expand Up @@ -652,7 +652,7 @@ const App: React.FC = () => {

<button
onClick={() => setIsPanelOpen(!isPanelOpen)}
className={`p-1.5 rounded-md text-xs font-medium transition-all ${
className={`p-2 rounded-sm text-sm font-medium transition-all ${
isPanelOpen
? 'bg-primary/15 text-primary'
: 'text-muted-foreground hover:text-foreground hover:bg-muted'
Expand All @@ -665,7 +665,7 @@ const App: React.FC = () => {

<button
onClick={() => setShowExport(true)}
className="p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
title="Export"
>
<svg className="w-4 h-4 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
Expand Down
38 changes: 19 additions & 19 deletions packages/review-editor/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,25 +459,25 @@ const ReviewApp: React.FC = () => {
<ThemeProvider defaultTheme="dark">
<div className="h-screen flex flex-col bg-background overflow-hidden">
{/* Header */}
<header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
<header className="py-2.5 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
<div className="flex items-center gap-2 md:gap-3">
<a
href="https://github.com/backnotprop/plannotator"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity"
>
<span className="text-sm font-semibold tracking-tight">Plannotator</span>
<span className="text-sm font-semibold">Plannotator</span>
</a>
<a
href="https://github.com/backnotprop/plannotator/releases"
target="_blank"
rel="noopener noreferrer"
className="text-xs text-muted-foreground font-mono opacity-60 hidden md:inline hover:opacity-100 transition-opacity"
className="text-xs text-muted-foreground font-mono opacity-70 hidden md:inline hover:opacity-100 transition-opacity"
>
v{typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'}
</a>
<span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-secondary/15 text-secondary hidden md:inline">
<span className="text-xs px-1.5 py-0.5 rounded font-medium bg-secondary/15 text-secondary hidden md:inline">
Code Review
</span>
{origin && (
Expand All @@ -493,10 +493,10 @@ const ReviewApp: React.FC = () => {

<div className="flex items-center gap-1 md:gap-2">
{/* Diff style toggle */}
<div className="flex items-center gap-1 bg-muted rounded-lg p-0.5">
<div className="flex items-center gap-0.5 bg-muted rounded-sm p-0.5 font-medium">
<button
onClick={() => handleDiffStyleChange('split')}
className={`px-2 py-1 text-xs rounded-md transition-colors ${
className={`px-2.5 w-20 py-1 text-sm rounded-sm transition-colors ${
diffStyle === 'split'
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
Expand All @@ -506,7 +506,7 @@ const ReviewApp: React.FC = () => {
</button>
<button
onClick={() => handleDiffStyleChange('unified')}
className={`px-2 py-1 text-xs rounded-md transition-colors ${
className={`px-2.5 w-20 py-1 text-sm rounded-sm transition-colors ${
diffStyle === 'unified'
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
Expand All @@ -519,19 +519,19 @@ const ReviewApp: React.FC = () => {
{/* Primary actions */}
<button
onClick={handleCopyDiff}
className="px-2 py-1 md:px-2.5 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
title="Copy all raw diffs (Cmd+Shift+C)"
>
{copyFeedback === 'Diff copied!' ? (
<>
<svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
<span className="hidden md:inline">Copied!</span>
</>
) : (
<>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<span className="hidden md:inline">Copy Raw Diffs</span>
Expand All @@ -545,7 +545,7 @@ const ReviewApp: React.FC = () => {
<button
onClick={handleSendFeedback}
disabled={isSendingFeedback || isApproving || annotations.length === 0}
className={`p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-all ${
className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all flex items-center gap-1.5 ${
isSendingFeedback || isApproving
? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
: annotations.length === 0
Expand All @@ -571,7 +571,7 @@ const ReviewApp: React.FC = () => {
}
}}
disabled={isSendingFeedback || isApproving}
className={`px-2 py-1 md:px-2.5 rounded-md text-xs font-medium transition-all ${
className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all ${
isSendingFeedback || isApproving
? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
: annotations.length > 0
Expand All @@ -595,19 +595,19 @@ const ReviewApp: React.FC = () => {
) : (
<button
onClick={handleCopyFeedback}
className="px-2 py-1 md:px-2.5 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
title="Copy feedback for LLM"
>
{copyFeedback === 'Feedback copied!' ? (
<>
<svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
<span className="hidden md:inline">Copied!</span>
</>
) : (
<>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span className="hidden md:inline">Copy Feedback</span>
Expand All @@ -631,7 +631,7 @@ const ReviewApp: React.FC = () => {
{/* Panel toggle */}
<button
onClick={() => setIsPanelOpen(!isPanelOpen)}
className={`p-1.5 rounded-md text-xs font-medium transition-all ${
className={`p-2 rounded-sm text-sm font-medium transition-all ${
isPanelOpen
? 'bg-primary/15 text-primary'
: 'text-muted-foreground hover:text-foreground hover:bg-muted'
Expand All @@ -646,7 +646,7 @@ const ReviewApp: React.FC = () => {
{/* Export */}
<button
onClick={() => setShowExportModal(true)}
className="p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
title="Export"
>
<svg className="w-4 h-4 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
Expand Down Expand Up @@ -739,7 +739,7 @@ const ReviewApp: React.FC = () => {
<h3 className="font-semibold text-sm">Export Review Feedback</h3>
<button
onClick={() => setShowExportModal(false)}
className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
className="p-1.5 rounded-sm hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
Expand All @@ -759,7 +759,7 @@ const ReviewApp: React.FC = () => {
onClick={async () => {
await navigator.clipboard.writeText(feedbackMarkdown);
}}
className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-colors"
className="px-3 py-1.5 rounded-sm text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-colors"
>
Copy to Clipboard
</button>
Expand Down
8 changes: 4 additions & 4 deletions packages/review-editor/components/DiffViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
return (
<div ref={containerRef} className="h-full overflow-auto relative" onMouseMove={handleMouseMove}>
{/* File header */}
<div className="sticky top-0 z-10 px-4 py-2 bg-card/95 backdrop-blur border-b border-border flex items-center justify-between">
<div className="sticky top-0 z-10 px-4 py-2.5 bg-card/95 backdrop-blur border-b border-border flex items-center justify-between">
<span className="font-mono text-sm text-foreground">{filePath}</span>
<button
onClick={async () => {
Expand Down Expand Up @@ -276,7 +276,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
}}
>
<div className="w-80">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center justify-between mb-3">
<span className="text-xs text-muted-foreground">
{toolbarState.range.start === toolbarState.range.end
? `Line ${toolbarState.range.start}`
Expand All @@ -297,7 +297,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
value={commentText}
onChange={(e) => setCommentText(e.target.value)}
placeholder="Leave feedback..."
className="w-full px-3 py-2 bg-muted rounded-lg text-xs resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
className="w-full px-3 py-2 bg-muted rounded-sm text-xs resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
rows={3}
autoFocus
onKeyDown={(e) => {
Expand All @@ -315,7 +315,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
value={suggestedCode}
onChange={(e) => setSuggestedCode(e.target.value)}
placeholder="Suggested code..."
className="w-full px-3 py-2 mt-2 bg-muted rounded-lg text-xs font-mono resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
className="w-full px-3 py-2 mt-2 bg-muted rounded-sm text-xs font-mono resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
rows={3}
autoFocus
/>
Expand Down
12 changes: 6 additions & 6 deletions packages/review-editor/components/FileTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
value={activeDiffType || 'uncommitted'}
onChange={(e) => onSelectDiff(e.target.value)}
disabled={isLoadingDiff}
className="w-full px-2.5 py-1.5 bg-muted rounded-md text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 cursor-pointer disabled:opacity-50 disabled:cursor-wait appearance-none pr-7"
className="w-full px-2.5 py-1.5 bg-muted rounded-sm text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 cursor-pointer disabled:opacity-50 disabled:cursor-wait appearance-none pr-7"
>
{diffOptions.map((option, index) => (
option.id === 'separator' ? (
Expand Down Expand Up @@ -146,16 +146,16 @@ export const FileTree: React.FC<FileTreeProps> = ({
onClick={() => onSelectFile(index)}
className={`file-tree-item w-full text-left group ${isActive ? 'active' : ''} ${annotationCount > 0 ? 'has-annotations' : ''}`}
>
<div className="flex items-center gap-1 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">{fileName}</span>
{isViewed && (
<svg className="w-3 h-3 flex-shrink-0 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-3 h-3 flex-shrink-0 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
)}
</div>
<div className="flex items-center gap-1.5 flex-shrink-0 text-[10px]">
<div className="flex items-center gap-1.5 flex-shrink-0 text-xs">
{annotationCount > 0 && (
<span className="text-primary font-medium">{annotationCount}</span>
)}
Expand All @@ -169,7 +169,7 @@ export const FileTree: React.FC<FileTreeProps> = ({

{/* Footer */}
<div className="p-3 border-t border-border/50 text-xs text-muted-foreground space-y-2">
<div className="flex justify-between">
<div className="flex justify-between text-sm">
<span>Total changes:</span>
<span className="file-stats">
<span className="additions">
Expand All @@ -181,7 +181,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
</span>
</div>
{enableKeyboardNav && (
<div className="text-[10px] text-muted-foreground/50 text-center">
<div className="text-xs text-muted-foreground/60 text-center">
j/k or arrows to navigate
</div>
)}
Expand Down
Loading