jeffrey/wwwlayermeshusa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode visibility for navy cards + check icons

Browse Source
This commit is contained in:
Jeffrey 2026-03-04 20:17:00 +01:00
parent f673837c18
commit 805ec291df
6 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/blocks/FDCardGridBlock/Component.tsx
View File

@ -6,7 +6,7 @@ const cardStyleMap: Record<
{ bg: string; headingText: string; bodyText: string; linkText: string; border: string } { bg: string; headingText: string; bodyText: string; linkText: string; border: string }
> = { > = {
navy: { navy: {
bg: 'bg-fd-navy', bg: 'bg-fd-navy dark:bg-white/10',
headingText: 'text-fd-yellow', headingText: 'text-fd-yellow',
bodyText: 'text-white', bodyText: 'text-white',
linkText: 'text-fd-yellow hover:text-fd-yellow/80', linkText: 'text-fd-yellow hover:text-fd-yellow/80',

2
src/blocks/FDPricingCardBlock/Component.tsx
View File

@ -29,7 +29,7 @@ const cardStyleMap: Record<string, {
isDark: false, isDark: false,
}, },
navy: { navy: {
bg: 'bg-fd-navy', border: '', title: 'text-fd-yellow', bg: 'bg-fd-navy dark:bg-white/10', border: '', title: 'text-fd-yellow',
subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white', isDark: true, subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white', isDark: true,
}, },
gray: { gray: {

4
src/blocks/FDTeamBlock/Component.tsx
View File

@ -10,7 +10,7 @@ const sectionBgMap: Record<string, string> = {
const cardMap: Record<string, { bg: string; name: string; role: string; bio: string; icon: string }> = { const cardMap: Record<string, { bg: string; name: string; role: string; bio: string; icon: string }> = {
navy: { navy: {
bg: 'bg-fd-navy', bg: 'bg-fd-navy dark:bg-white/10',
name: 'text-fd-yellow', name: 'text-fd-yellow',
role: 'text-white/70', role: 'text-white/70',
bio: 'text-white/60', bio: 'text-white/60',
@ -92,7 +92,7 @@ export const FDTeamBlockComponent: React.FC<FDTeamBlockProps> = ({
fallbackAlt={member.name} fallbackAlt={member.name}
/> />
) : ( ) : (
<div className={`w-full h-full flex items-center justify-center ${cardStyle === 'navy' ? 'bg-fd-navy/50' : 'bg-fd-navy/10 dark:bg-white/5'}`}> <div className={`w-full h-full flex items-center justify-center ${cardStyle === 'navy' ? 'bg-fd-navy/50 dark:bg-white/5' : 'bg-fd-navy/10 dark:bg-white/5'}`}>
<svg viewBox="0 0 80 80" className="w-20 h-20 opacity-30" fill="currentColor"> <svg viewBox="0 0 80 80" className="w-20 h-20 opacity-30" fill="currentColor">
<circle cx="40" cy="30" r="18" /> <circle cx="40" cy="30" r="18" />
<path d="M10 72c0-16.6 13.4-30 30-30s30 13.4 30 30H10z" /> <path d="M10 72c0-16.6 13.4-30 30-30s30 13.4 30 30H10z" />

10
src/blocks/FDUspChecklistBlock/Component.tsx
View File

@ -19,17 +19,17 @@ const bodyMap: Record<string, string> = {
} }
const checkColors: Record<string, { circle: string; check: string }> = { const checkColors: Record<string, { circle: string; check: string }> = {
navy: { circle: '#0E2338', check: 'white' }, navy: { circle: 'fill-fd-navy dark:fill-white/20', check: 'fill-white dark:fill-fd-yellow' },
yellow: { circle: '#FECC02', check: '#0E2338' }, yellow: { circle: 'fill-fd-yellow', check: 'fill-fd-navy' },
gray: { circle: '#F0F0F0', check: '#0E2338' }, gray: { circle: 'fill-fd-gray-light dark:fill-white/20', check: 'fill-fd-navy dark:fill-white' },
} }
const CheckIcon: React.FC<{ color: string }> = ({ color }) => { const CheckIcon: React.FC<{ color: string }> = ({ color }) => {
const c = checkColors[color] || checkColors.navy const c = checkColors[color] || checkColors.navy
return ( return (
<svg width="40" height="40" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0"> <svg width="40" height="40" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
<circle cx="23" cy="23" r="23" fill={c.circle} /> <circle cx="23" cy="23" r="23" className={c.circle} />
<path d="M34.2166 16.2092L19.8151 30.6108C19.3551 31.0354 19.1074 31.3185 18.7182 31.3185C18.3643 31.3185 18.1166 31.1062 17.6212 30.6108L11.9597 24.9492C11.6059 24.5954 11.4289 24.3477 11.4289 24.1C11.4289 23.8523 11.6412 23.5692 11.9951 23.2154L12.5612 22.6492C12.9505 22.26 13.2335 22.0477 13.5166 22.0477C13.7643 22.0477 14.012 22.2246 14.3659 22.5785L18.7182 26.9662L31.8105 13.8385C32.1643 13.4846 32.412 13.3431 32.6597 13.3431C32.9428 13.3431 33.1551 13.4846 33.6151 13.9092L34.1812 14.4754C34.5351 14.8292 34.712 15.1123 34.712 15.36C34.712 15.6077 34.5705 15.8554 34.2166 16.2092Z" fill={c.check} /> <path d="M34.2166 16.2092L19.8151 30.6108C19.3551 31.0354 19.1074 31.3185 18.7182 31.3185C18.3643 31.3185 18.1166 31.1062 17.6212 30.6108L11.9597 24.9492C11.6059 24.5954 11.4289 24.3477 11.4289 24.1C11.4289 23.8523 11.6412 23.5692 11.9951 23.2154L12.5612 22.6492C12.9505 22.26 13.2335 22.0477 13.5166 22.0477C13.7643 22.0477 14.012 22.2246 14.3659 22.5785L18.7182 26.9662L31.8105 13.8385C32.1643 13.4846 32.412 13.3431 32.6597 13.3431C32.9428 13.3431 33.1551 13.4846 33.6151 13.9092L34.1812 14.4754C34.5351 14.8292 34.712 15.1123 34.712 15.36C34.712 15.6077 34.5705 15.8554 34.2166 16.2092Z" className={c.check} />
</svg> </svg>
) )
} }

10
src/blocks/FDUspTableBlock/Component.tsx
View File

@ -31,17 +31,17 @@ const borderMap: Record<string, string> = {
} }
const checkColors: Record<string, { circle: string; check: string }> = { const checkColors: Record<string, { circle: string; check: string }> = {
navy: { circle: '#0E2338', check: 'white' }, navy: { circle: 'fill-fd-navy dark:fill-white/20', check: 'fill-white dark:fill-fd-yellow' },
yellow: { circle: '#FECC02', check: '#0E2338' }, yellow: { circle: 'fill-fd-yellow', check: 'fill-fd-navy' },
gray: { circle: '#F0F0F0', check: '#0E2338' }, gray: { circle: 'fill-fd-gray-light dark:fill-white/20', check: 'fill-fd-navy dark:fill-white' },
} }
const CheckIcon: React.FC<{ color: string }> = ({ color }) => { const CheckIcon: React.FC<{ color: string }> = ({ color }) => {
const c = checkColors[color] || checkColors.navy const c = checkColors[color] || checkColors.navy
return ( return (
<svg width="40" height="40" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0"> <svg width="40" height="40" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
<circle cx="23" cy="23" r="23" fill={c.circle} /> <circle cx="23" cy="23" r="23" className={c.circle} />
<path d="M34.2166 16.2092L19.8151 30.6108C19.3551 31.0354 19.1074 31.3185 18.7182 31.3185C18.3643 31.3185 18.1166 31.1062 17.6212 30.6108L11.9597 24.9492C11.6059 24.5954 11.4289 24.3477 11.4289 24.1C11.4289 23.8523 11.6412 23.5692 11.9951 23.2154L12.5612 22.6492C12.9505 22.26 13.2335 22.0477 13.5166 22.0477C13.7643 22.0477 14.012 22.2246 14.3659 22.5785L18.7182 26.9662L31.8105 13.8385C32.1643 13.4846 32.412 13.3431 32.6597 13.3431C32.9428 13.3431 33.1551 13.4846 33.6151 13.9092L34.1812 14.4754C34.5351 14.8292 34.712 15.1123 34.712 15.36C34.712 15.6077 34.5705 15.8554 34.2166 16.2092Z" fill={c.check} /> <path d="M34.2166 16.2092L19.8151 30.6108C19.3551 31.0354 19.1074 31.3185 18.7182 31.3185C18.3643 31.3185 18.1166 31.1062 17.6212 30.6108L11.9597 24.9492C11.6059 24.5954 11.4289 24.3477 11.4289 24.1C11.4289 23.8523 11.6412 23.5692 11.9951 23.2154L12.5612 22.6492C12.9505 22.26 13.2335 22.0477 13.5166 22.0477C13.7643 22.0477 14.012 22.2246 14.3659 22.5785L18.7182 26.9662L31.8105 13.8385C32.1643 13.4846 32.412 13.3431 32.6597 13.3431C32.9428 13.3431 33.1551 13.4846 33.6151 13.9092L34.1812 14.4754C34.5351 14.8292 34.712 15.1123 34.712 15.36C34.712 15.6077 34.5705 15.8554 34.2166 16.2092Z" className={c.check} />
</svg> </svg>
) )
} }

2
src/blocks/FDWideCardBlock/Component.tsx
View File

@ -4,7 +4,7 @@ import { FDButton } from '@/components/FDButton'
import { FDImage } from '@/components/FDImage' import { FDImage } from '@/components/FDImage'
const cardBgMap: Record<string, { bg: string; heading: string; body: string; isDark: boolean }> = { const cardBgMap: Record<string, { bg: string; heading: string; body: string; isDark: boolean }> = {
navy: { bg: 'bg-fd-navy', heading: 'text-white', body: 'text-white/80', isDark: true }, navy: { bg: 'bg-fd-navy dark:bg-white/10', heading: 'text-white', body: 'text-white/80', isDark: true },
yellow: { bg: 'bg-fd-yellow', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false }, yellow: { bg: 'bg-fd-yellow', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false },
gray: { bg: 'bg-fd-gray-light dark:bg-white/10', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false }, gray: { bg: 'bg-fd-gray-light dark:bg-white/10', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
white: { bg: 'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false }, white: { bg: 'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },