Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-03-21 17:54:09 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve StickyActionBar error style and messaging

Browse Source
This commit is contained in:
Jared Schoeny 2025-12-22 19:19:57 -10:00
parent 555d4a8d7a
commit 3eb16d6bc6
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Hack/StickyActionBar.tsx
View File

@ -156,11 +156,12 @@ export default function StickyActionBar({
</div>
{errorMessage !== null && (
<div
className={`absolute inset-x-0 md:left-1/2 md:-translate-x-1/2 -top-2 mb-2 md:-bottom-2 md:mx-auto flex w-full md:w-auto lg:max-w-screen-lg rounded-md border border-[var(--border)] bg-[var(--surface-2)]/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--background)_70%,transparent)] text-sm text-red-400 transition-all duration-300 ${showError ? "opacity-100 -translate-y-full md:translate-y-full" : "opacity-0 translate-y-0 md:-translate-y-1/2 pointer-events-none"}`}
className={`absolute inset-x-0 md:left-1/2 md:-translate-x-1/2 md:mt-4 mb-2 md:mx-auto flex flex-col w-full md:w-auto lg:max-w-screen-lg rounded-md border border-[var(--border)] bg-[var(--surface-2)]/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--background)_70%,transparent)] text-sm text-red-400 transition-all duration-300 ${showError ? "opacity-100 -translate-y-full md:translate-y-full" : "opacity-0 translate-y-0 md:-translate-y-1/2 pointer-events-none"}`}
role="alert"
aria-live="polite"
>
{errorMessage}
<p className="mb-2 text-center font-bold">{errorMessage}</p>
<p className="text-xs">If the issue persists, try clearing your browser cache or using a different browser.</p>
</div>
)}
</div>