bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance FormMessage and styleguide for improved accessibility and user feedback

Browse Source 
- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors.
- Update styleguide to demonstrate new alert components with icons for error, success, and warning messages.
- Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.
This commit is contained in:
Bastian Masanek
2025-10-31 17:40:10 +01:00
parent d9f08bbef2
commit c385779221
3 changed files with 134 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
assets/css/tailwind.css
View File

@@ -496,28 +496,52 @@
/* Status Messages */
.status-message {
@apply flex items-center gap-4;
@apply flex items-center gap-3;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.15); /* White with 15% opacity */
color: #ffffff; /* White text */
font-size: 0.875rem;
font-weight: 500;
}
.status-icon {
@apply flex items-center justify-center;
@apply w-25 h-25 rounded-full;
@apply text-6xl text-white;
@apply animate-pulse;
@apply flex-shrink-0;
width: 1.5rem;
height: 1.5rem;
}
@media (max-width: 480px) {
.status-icon {
@apply text-5xl;
}
.status-success {
@apply border-l-4 border-success;
}
.status-success .status-icon {
@apply bg-success;
@apply text-success;
}
.status-error {
@apply border-l-4 border-warning;
}
.status-error .status-icon {
@apply bg-error;
@apply text-warning;
}
.status-warning {
@apply border-l-4 border-warning;
}
.status-warning .status-icon {
@apply text-warning;
}
.status-info {
@apply border-l-4 border-accent;
}
.status-info .status-icon {
@apply text-accent;
}
/* Progress Bar */
@@ -606,17 +630,20 @@
@apply outline-none ring-2 ring-accent;
}
/* Form Error Message - High contrast for readability */
/* Form Error Message - High contrast with orange accent */
.form-error {
margin-top: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
padding: 0.5rem 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid rgba(248, 113, 113, 0.4); /* red-400 with 40% opacity */
background-color: rgba(239, 68, 68, 0.2); /* red-500 with 20% opacity */
color: #fecaca; /* red-200 for better contrast */
border-left: 4px solid var(--color-warning); /* Orange left border for accessibility */
background-color: rgba(255, 255, 255, 0.15); /* White with 15% opacity */
color: #ffffff; /* White text */
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.75rem;
}
.form-checkbox {