style(dashboard): apply AIBTC brand guidelines by whoabuddy · Pull Request #30 · aibtcdev/x402-api

whoabuddy · 2026-01-27T14:10:19Z

Summary

Closes #28

Update orange accent from #f7931a to #FF4F03 (AIBTC brand orange)
Align dark theme card backgrounds from #09090b/#0f0f12 to #000/#0a0a0a
Add orange focus ring styling on interactive elements (:focus-visible)
Add card-glow radial gradient and card-accent top-line hover effects
Add fadeUp entrance animations with prefers-reduced-motion support

Brand Reference

Palette: #FF4F03 (orange), #0634D0 (blue), #A855F7 (purple)
Reference: landing-page globals.css
Tracking: aibtcdev/branding#1

Test plan

Run npm run check — type check passes
Visit /dashboard on staging — verify orange accent is #FF4F03
Verify card backgrounds are darker (#000/#0a0a0a)
Tab through nav links and table headers — orange focus ring visible
Hover over summary cards — radial glow follows cursor, orange top-line appears
Page load — sections fade up with staggered timing
Enable reduced-motion in OS settings — animations disabled

🤖 Generated with Claude Code

…brand Replace orange accent #f7931a with AIBTC brand orange #FF4F03 and align dark theme card backgrounds from #09090b/#0f0f12 to #000/#0a0a0a. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add :focus-visible outline using AIBTC brand orange on interactive elements including nav links and sortable table headers. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add radial gradient glow that follows cursor on hover and orange top-line accent on card elements, matching the landing-page reference. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…support Add staggered fadeUp animations to summary cards, daily chart, endpoints table, and model usage sections. Respects prefers-reduced-motion. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-01-27T14:10:29Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	x402-api-staging	`6f57000`	Jan 27 2026, 08:21 PM

Copilot

Pull request overview

This pull request updates the x402 API dashboard styling to comply with AIBTC brand guidelines. The changes focus on updating color schemes and adding interactive visual enhancements while maintaining accessibility.

Changes:

Updated brand orange accent from #f7931a to #FF4F03 and adjusted dark theme backgrounds from #09090b/#0f0f12 to #000/#0a0a0a
Added interactive hover effects (card-glow radial gradient and card-accent top-line) with mousemove tracking
Implemented fadeUp entrance animations with staggered delays and prefers-reduced-motion support
Added orange focus ring styling for improved keyboard navigation accessibility

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/endpoints/dashboard.ts	Updated CSS variables for AIBTC brand colors, added card-glow and card-accent hover effects with ::before/::after pseudo-elements, implemented fadeUp animations with reduced-motion support, added mousemove event handlers for interactive glow effects, and applied new classes to dashboard elements
.gitignore	Added `.planning/` directory to exclusion list for development/planning files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-27T14:15:38Z

src/endpoints/dashboard.ts

+        card.addEventListener('mousemove', function(e) {
+          var rect = card.getBoundingClientRect();
+          card.style.setProperty('--mouse-x', ((e.clientX - rect.left) / rect.width * 100) + '%');
+          card.style.setProperty('--mouse-y', ((e.clientY - rect.top) / rect.height * 100) + '%');


The mousemove event handler fires continuously for every mouse movement over any card-glow element, which can impact performance, especially with multiple cards on the page. Consider adding throttling or debouncing to limit how often the CSS custom properties are updated. A common approach is to use requestAnimationFrame to throttle updates to match the browser's repaint cycle.

Suggested change

card.addEventListener('mousemove', function(e) {

var rect = card.getBoundingClientRect();

card.style.setProperty('--mouse-x', ((e.clientX - rect.left) / rect.width * 100) + '%');

card.style.setProperty('--mouse-y', ((e.clientY - rect.top) / rect.height * 100) + '%');

var isAnimating = false;

var mouseX = 0;

var mouseY = 0;

card.addEventListener('mousemove', function(e) {

mouseX = e.clientX;

mouseY = e.clientY;

if (isAnimating) return;

isAnimating = true;

requestAnimationFrame(function() {

var rect = card.getBoundingClientRect();

card.style.setProperty('--mouse-x', ((mouseX - rect.left) / rect.width * 100) + '%');

card.style.setProperty('--mouse-y', ((mouseY - rect.top) / rect.height * 100) + '%');

isAnimating = false;

});

Resolved in 6f57000 — mousemove handler now throttled with requestAnimationFrame.

Copilot · 2026-01-27T14:15:39Z

src/endpoints/dashboard.ts

+    .card-glow::after {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-dim) 0%, transparent 60%);
+      opacity: 0;
+      transition: opacity 0.4s ease;
+      pointer-events: none;
+    }
+    .card-glow:hover::after { opacity: 1; }


The ::after pseudo-element for card-glow may render above the card's non-positioned content (h3 and .value elements) in the CSS stacking order. While the effect uses a subtle transparency (12% opacity), consider adding position: relative to .card h3 and .card .value to explicitly ensure they render above the glow overlay, especially if opacity values are adjusted in the future.

Resolved in 6f57000 — added position: relative to .card h3 and .card .value so content stacks above the glow overlay.

Copilot · 2026-01-27T14:15:39Z

src/endpoints/dashboard.ts

      <div class="model-grid">
        ${modelStats.length > 0 ? modelStats.map((model) => `
-          <div class="model-card">
+          <div class="model-card card-glow card-accent">


The model-card elements have both card-glow and card-accent classes applied while being nested inside a parent chart-container that also has the same classes. This creates duplicate hover effects and mousemove listeners on nested elements. The glow effect will be triggered both on the parent container and on each individual model card, which could cause visual artifacts and unnecessary performance overhead. Consider removing the card-glow and card-accent classes from either the parent chart-container or the child model-card elements to avoid duplicate effects.

Suggested change

<div class="model-card card-glow card-accent">

<div class="model-card">

Resolved in 6f57000 — removed card-glow card-accent from nested model-card elements, keeping effects only on the parent chart-container.

- Throttle mousemove handler with requestAnimationFrame - Add position:relative to card content so it stacks above glow overlay - Remove duplicate card-glow/card-accent from nested model-card elements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

whoabuddy and others added 5 commits January 27, 2026 07:04

style(dashboard): update accent and background colors to match AIBTC …

6c69852

…brand Replace orange accent #f7931a with AIBTC brand orange #FF4F03 and align dark theme card backgrounds from #09090b/#0f0f12 to #000/#0a0a0a. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

style(dashboard): add orange focus ring for accessibility

955293b

Add :focus-visible outline using AIBTC brand orange on interactive elements including nav links and sortable table headers. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

style(dashboard): add card-glow and card-accent hover effects

391fe26

Add radial gradient glow that follows cursor on hover and orange top-line accent on card elements, matching the landing-page reference. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

style(dashboard): add fadeUp entrance animations with reduced-motion …

0f5b173

…support Add staggered fadeUp animations to summary cards, daily chart, endpoints table, and model usage sections. Respects prefers-reduced-motion. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

chore: add .planning to .gitignore

84dd311

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings January 27, 2026 14:10

Copilot started reviewing on behalf of whoabuddy January 27, 2026 14:10 View session

Copilot AI reviewed Jan 27, 2026

View reviewed changes

whoabuddy merged commit 460079d into main Jan 27, 2026
2 checks passed

whoabuddy deleted the style/dashboard-brand-guidelines branch January 27, 2026 20:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style(dashboard): apply AIBTC brand guidelines#30

style(dashboard): apply AIBTC brand guidelines#30
whoabuddy merged 6 commits intomainfrom
style/dashboard-brand-guidelines

whoabuddy commented Jan 27, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Jan 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

whoabuddy Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

whoabuddy Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

whoabuddy Jan 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-        card.addEventListener('mousemove', function(e) {
-          var rect = card.getBoundingClientRect();
-          card.style.setProperty('--mouse-x', ((e.clientX - rect.left) / rect.width * 100) + '%');
-          card.style.setProperty('--mouse-y', ((e.clientY - rect.top) / rect.height * 100) + '%');
+        var isAnimating = false;
+        var mouseX = 0;
+        var mouseY = 0;
+        card.addEventListener('mousemove', function(e) {
+          mouseX = e.clientX;
+          mouseY = e.clientY;
+          if (isAnimating) return;
+          isAnimating = true;
+          requestAnimationFrame(function() {
+            var rect = card.getBoundingClientRect();
+            card.style.setProperty('--mouse-x', ((mouseX - rect.left) / rect.width * 100) + '%');
+            card.style.setProperty('--mouse-y', ((mouseY - rect.top) / rect.height * 100) + '%');
+            isAnimating = false;
+          });

	<div class="model-card card-glow card-accent">
	<div class="model-card">

Conversation

whoabuddy commented Jan 27, 2026

Summary

Brand Reference

Test plan

Uh oh!

cloudflare-workers-and-pages bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

whoabuddy Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

whoabuddy Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

whoabuddy Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages bot commented Jan 27, 2026 •

edited

Loading