antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add theme support to MyAbacus button 

Add light/dark mode responsiveness to the floating MyAbacus button:
- Light mode: white background with golden accent border
- Dark mode: dark background with golden accent border
- Theme-aware box shadows for better visibility in each mode
- Maintains golden glow effect across both themes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-08 12:25:32 -06:00
parent d5b1d045b4
commit 702c1c9af2
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/src/components/MyAbacus.tsx
View File

@ -6,11 +6,14 @@ import { AbacusReact, useAbacusConfig, ABACUS_THEMES } from '@soroban/abacus-rea
import { css } from '../../styled-system/css'
import { useMyAbacus } from '@/contexts/MyAbacusContext'
import { HomeHeroContext } from '@/contexts/HomeHeroContext'
import { useTheme } from '@/contexts/ThemeContext'
export function MyAbacus() {
const { isOpen, close, toggle } = useMyAbacus()
const appConfig = useAbacusConfig()
const pathname = usePathname()
const { resolvedTheme } = useTheme()
const isDark = resolvedTheme === 'dark'
// Sync with hero context if on home page
const homeHeroContext = useContext(HomeHeroContext)
@ -164,10 +167,14 @@ export function MyAbacus() {
}
: {
// Button state: button styling
bg: 'rgba(0, 0, 0, 0.7)',
bg: isDark ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.9)',
backdropFilter: 'blur(8px)',
border: '3px solid rgba(251, 191, 36, 0.5)',
boxShadow: '0 8px 32px rgba(251, 191, 36, 0.4)',
border: isDark
? '3px solid rgba(251, 191, 36, 0.5)'
: '3px solid rgba(251, 191, 36, 0.6)',
boxShadow: isDark
? '0 8px 32px rgba(251, 191, 36, 0.4)'
: '0 8px 32px rgba(251, 191, 36, 0.5)',
borderRadius: 'xl',
w: { base: '80px', md: '100px' },
h: { base: '80px', md: '100px' },
@ -177,7 +184,9 @@ export function MyAbacus() {
animation: 'pulse 2s ease-in-out infinite',
_hover: {
transform: 'scale(1.1)',
boxShadow: '0 12px 48px rgba(251, 191, 36, 0.6)',
boxShadow: isDark
? '0 12px 48px rgba(251, 191, 36, 0.6)'
: '0 12px 48px rgba(251, 191, 36, 0.7)',
borderColor: 'rgba(251, 191, 36, 0.8)',
},
}),