Update Create GitHub PR style (vibe-kanban) (#850)

* Done! I've successfully updated the CreatePRDialog to use the Alert component pattern, matching the style used in DeleteTaskConfirmationDialog:

- Added `Alert` import from `@/components/ui/alert`
- Replaced the custom error div with `<Alert variant="destructive">`
- Added error clearing when starting PR creation for better UX

The error messages now use a consistent, accessible Alert component across the application.

* Cleanup script changes for task attempt 3757c2b1-becb-4b8f-80ab-03be9bc3f096

* Perfect! I've successfully refactored all dialog error messages to use the consistent Alert component pattern:

##  Completed Changes:

**1. [TaskTemplateEditDialog.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/3757-update-create-gi/frontend/src/components/dialogs/tasks/TaskTemplateEditDialog.tsx)**
- Added `Alert` and `AlertDescription` imports
- Replaced simple error div with proper Alert component

**2. [GitHubLoginDialog.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/3757-update-create-gi/frontend/src/components/dialogs/auth/GitHubLoginDialog.tsx)**
- Added `Alert` and `AlertDescription` imports
- Replaced both custom styled error divs with Alert components
- Maintained the same error display locations for proper context

## 🎯 Benefits Achieved:
- **Consistent UI/UX**: All dialogs now use the same error styling
- **Better Accessibility**: Semantic alert components with proper roles
- **Unified Theming**: All errors follow the same design system
- **Maintainability**: Single pattern for error display across the app

All dialog error messages now follow the same pattern as DeleteTaskConfirmationDialog and the updated CreatePRDialog.

* Done! I've simplified all Alert components to use the same pattern as CreatePRDialog:

- **Removed AlertDescription wrapper** from all error messages
- **Updated imports** to only import Alert
- **Consistent pattern**: `<Alert variant="destructive">{error}</Alert>` across all dialogs

Now all dialog error messages use the exact same simple Alert pattern throughout the application.

* Cleanup script changes for task attempt 3757c2b1-becb-4b8f-80ab-03be9bc3f096
This commit is contained in:
Louis Knight-Webb
2025-09-25 13:33:28 +01:00
committed by GitHub
parent a7bd6eeebe
commit ba256bbb42
3 changed files with 8 additions and 16 deletions

View File

@@ -8,6 +8,7 @@ import {
DialogTitle, DialogTitle,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Alert } from '@/components/ui/alert';
import { useUserSystem } from '@/components/config-provider'; import { useUserSystem } from '@/components/config-provider';
import { Check, Clipboard, Github } from 'lucide-react'; import { Check, Clipboard, Github } from 'lucide-react';
import { Loader } from '@/components/ui/loader'; import { Loader } from '@/components/ui/loader';
@@ -235,11 +236,7 @@ const GitHubLoginDialog = NiceModal.create(() => {
</span> </span>
</div> </div>
{error && ( {error && <Alert variant="destructive">{error}</Alert>}
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
<div className="text-destructive text-sm">{error}</div>
</div>
)}
<DialogFooter> <DialogFooter>
<Button <Button
@@ -292,11 +289,7 @@ const GitHubLoginDialog = NiceModal.create(() => {
</CardContent> </CardContent>
</Card> </Card>
{error && ( {error && <Alert variant="destructive">{error}</Alert>}
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
<div className="text-destructive text-sm">{error}</div>
</div>
)}
<DialogFooter className="gap-3 flex-col sm:flex-row"> <DialogFooter className="gap-3 flex-col sm:flex-row">
<Button <Button

View File

@@ -10,6 +10,7 @@ import { Label } from '@radix-ui/react-label';
import { Textarea } from '@/components/ui/textarea.tsx'; import { Textarea } from '@/components/ui/textarea.tsx';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Alert } from '@/components/ui/alert';
import BranchSelector from '@/components/tasks/BranchSelector'; import BranchSelector from '@/components/tasks/BranchSelector';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { attemptsApi } from '@/lib/api.ts'; import { attemptsApi } from '@/lib/api.ts';
@@ -70,6 +71,7 @@ const CreatePrDialog = NiceModal.create(() => {
const handleConfirmCreatePR = useCallback(async () => { const handleConfirmCreatePR = useCallback(async () => {
if (!data?.projectId || !data?.attempt.id) return; if (!data?.projectId || !data?.attempt.id) return;
setError(null);
setCreatingPR(true); setCreatingPR(true);
const result = await attemptsApi.createPR(data.attempt.id, { const result = await attemptsApi.createPR(data.attempt.id, {
@@ -166,11 +168,7 @@ const CreatePrDialog = NiceModal.create(() => {
} }
/> />
</div> </div>
{error && ( {error && <Alert variant="destructive">{error}</Alert>}
<div className="text-sm text-destructive bg-red-50 p-2 rounded">
{error}
</div>
)}
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={handleCancelCreatePR}> <Button variant="outline" onClick={handleCancelCreatePR}>

View File

@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Alert } from '@/components/ui/alert';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -154,7 +155,7 @@ export const TaskTemplateEditDialog =
disabled={saving} disabled={saving}
/> />
</div> </div>
{error && <div className="text-sm text-destructive">{error}</div>} {error && <Alert variant="destructive">{error}</Alert>}
</div> </div>
<DialogFooter> <DialogFooter>
<Button <Button