Skip to content

replace pending badge pulse with animated border outline #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maxmalkin merged 1 commit into from
Mar 4, 2026
Merged

replace pending badge pulse with animated border outline #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions services/approval-ui/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,46 @@ body::after {
}
}

/* Pending badge — light travelling around the border */
@keyframes border-spin {
to {
transform: rotate(360deg);
}
}

.pending-badge {
position: relative;
overflow: hidden;
background: rgba(245, 158, 11, 0.12);
}

/* Rotating conic gradient — creates the travelling-light border effect */
.pending-badge::before {
content: "";
position: absolute;
/* Must be larger than the element so corners stay covered */
inset: -200%;
width: 500%;
height: 500%;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 310deg,
rgba(245, 158, 11, 0.2) 330deg,
#f59e0b 348deg,
rgba(245, 158, 11, 0.2) 360deg
);
animation: border-spin 2.5s linear infinite;
}

/* Masks the interior, leaving only a ~1px amber border visible */
.pending-badge::after {
content: "";
position: absolute;
inset: 1px;
background: rgba(245, 158, 11, 0.1);
}

@keyframes fade-in {
from {
opacity: 0;
Expand Down
4 changes: 2 additions & 2 deletions services/approval-ui/src/pages/AgentsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,8 +186,8 @@ function AgentRow({ agent }: { agent: AgentSummary }) {
{status.label}
</span>
{agent.pending_grant_id && (
<span className="font-mono text-[10px] tracking-wide text-amber border border-amber-dim px-1.5 py-0.5 bg-amber-glow animate-pulse">
PENDING APPROVAL
<span className="pending-badge font-mono text-[10px] tracking-wide text-amber px-1.5 py-0.5">
<span className="relative z-10">PENDING APPROVAL</span>
</span>
)}
</div>
Expand Down
Loading