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:
committed by
GitHub
parent
a7bd6eeebe
commit
ba256bbb42
@@ -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
|
||||||
|
|||||||
@@ -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}>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user