diff --git a/resources/css/app.css b/resources/css/app.css index 26b36247..910a2128 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -218,4 +218,44 @@ path:focus { outline: none; } + + /* Unlock button attention animation */ + @keyframes pulse-glow { + 0%, + 100% { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); + } + 50% { + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); + } + } + + @keyframes pulse-scale { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + } + + @keyframes icon-pulse { + 0%, + 100% { + color: currentColor; + } + 50% { + color: rgb(59, 130, 246); + } + } + + .unlock-button-pulse { + animation: pulse-glow 2s ease-in-out infinite, + pulse-scale 2s ease-in-out infinite; + } + + .unlock-icon-pulse { + animation: icon-pulse 2s ease-in-out infinite; + } } diff --git a/resources/js/components/encryption-key-button.tsx b/resources/js/components/encryption-key-button.tsx index 57356443..57d2d89a 100644 --- a/resources/js/components/encryption-key-button.tsx +++ b/resources/js/components/encryption-key-button.tsx @@ -1,4 +1,5 @@ import { useEncryptionKey } from '@/contexts/encryption-key-context'; +import { cn } from '@/lib/utils'; import { LockKeyhole, LockKeyholeOpen } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Button } from './ui/button'; @@ -62,7 +63,10 @@ export function EncryptionKeyButton() {