Merge pull request xch-dev#623 from dkackman/bug-622

Fix checkbox state Bug 622

Author: Rigidity

src/components/NftCard.tsx

@@ -341,7 +341,7 @@ export function NftCard({ nft, updateNfts, selectionState }: NftCardProps) {
           )}
 
           {nft.special_use_type === 'theme' && (
-            <div className='absolute bottom-0 left-0 right-0 bg-background/80 text-primary text-xs font-medium py-1 px-2 text-center border-t border-border'>
+            <div className='absolute bottom-0 left-0 right-0 bg-primary/70 text-primary-foreground text-xs font-medium py-1 px-2 text-center border-t border-border'>
               <Trans>Theme</Trans>
             </div>
           )}

src/components/ThemeCard.tsx

@@ -4,10 +4,10 @@ import { useErrors } from '@/hooks/useErrors';
 import {
   type Theme,
   applyTheme,
-  getButtonStyles,
-  getHeadingStyles,
-  getMutedTextStyles,
-  getTextStyles,
+  getPreviewButtonStyles,
+  getPreviewHeadingStyles,
+  getPreviewMutedTextStyles,
+  getPreviewTextStyles,
 } from '@/lib/theme';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
@@ -92,10 +92,10 @@ export function ThemeCard({
     : {};
 
   const renderDefaultContent = () => {
-    const buttonStyles = getButtonStyles(theme, 'default');
-    const headingStyles = getHeadingStyles(theme);
-    const mutedTextStyles = getMutedTextStyles(theme);
-    const textStyles = getTextStyles(theme);
+    const buttonStyles = getPreviewButtonStyles(theme, 'default');
+    const headingStyles = getPreviewHeadingStyles(theme);
+    const mutedTextStyles = getPreviewMutedTextStyles(theme);
+    const textStyles = getPreviewTextStyles(theme);
 
     // Add fallbacks for button styles
     if (!buttonStyles.backgroundColor) {
@@ -214,7 +214,7 @@ export function ThemeCard({
   };
 
   const renderSimpleContent = () => {
-    const headingStyles = getHeadingStyles(theme);
+    const headingStyles = getPreviewHeadingStyles(theme);
 
     // Add fallbacks for heading styles
     if (!headingStyles.fontFamily) {
@@ -235,7 +235,13 @@ export function ThemeCard({
             {theme.displayName}
           </h4>
           <div className='flex items-center gap-1'>
-            {isSelected && <Check className='h-3 w-3' style={checkStyles} />}
+            {isSelected && (
+              <Check
+                className='h-3 w-3'
+                style={checkStyles}
+                aria-label={t`Theme selected`}
+              />
+            )}
             {theme.isUserTheme && (
               <Button
                 onClick={handleDeleteClick}

src/components/ui/switch.tsx

@@ -12,14 +12,14 @@ const Switch = React.forwardRef<
 
   // Get custom switch colors with defaults
   const checkedBg =
-    currentTheme?.switches?.checked?.background || 'hsl(var(--primary))';
+    currentTheme?.switches?.checked?.background || 'var(--primary)';
   const uncheckedBg =
-    currentTheme?.switches?.unchecked?.background || 'hsl(var(--border))';
+    currentTheme?.switches?.unchecked?.background || 'var(--border)';
 
   return (
     <SwitchPrimitives.Root
       className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+        'peer switch-component inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       style={

src/index.css

@@ -349,11 +349,11 @@ body {
   }
 
   /* Custom switch styling */
-  .peer[data-state='checked'] {
+  .switch-component.peer[data-state='checked'] {
     background-color: var(--switch-checked-bg) !important;
   }
 
-  .peer[data-state='unchecked'] {
+  .switch-component.peer[data-state='unchecked'] {
     background-color: var(--switch-unchecked-bg) !important;
   }
 

src/lib/theme.ts

@@ -772,10 +772,7 @@ export function getThemeStyles(theme: Theme): Record<string, string> {
   return styles;
 }
 
-/**
- * Gets button styles for a specific variant from a theme
- */
-export function getButtonStyles(
+export function getPreviewButtonStyles(
   theme: Theme,
   variant:
     | 'default'
@@ -826,10 +823,7 @@ export function getButtonStyles(
   return styles;
 }
 
-/**
- * Gets heading styles from a theme
- */
-export function getHeadingStyles(theme: Theme): Record<string, string> {
+export function getPreviewHeadingStyles(theme: Theme): Record<string, string> {
   const styles: Record<string, string> = {};
 
   if (theme.fonts?.heading) {
@@ -839,7 +833,9 @@ export function getHeadingStyles(theme: Theme): Record<string, string> {
   return styles;
 }
 
-export function getMutedTextStyles(theme: Theme): Record<string, string> {
+export function getPreviewMutedTextStyles(
+  theme: Theme,
+): Record<string, string> {
   const styles: Record<string, string> = {};
 
   if (theme.colors?.mutedForeground) {
@@ -852,11 +848,11 @@ export function getMutedTextStyles(theme: Theme): Record<string, string> {
   return styles;
 }
 
-export function getTextStyles(theme: Theme): Record<string, string> {
+export function getPreviewTextStyles(theme: Theme): Record<string, string> {
   const styles: Record<string, string> = {};
 
-  if (theme.colors?.secondary) {
-    styles.color = theme.colors.secondary;
+  if (theme.colors?.primaryForeground) {
+    styles.color = theme.colors.primaryForeground;
   }
   if (theme.fonts?.body) {
     styles.fontFamily = theme.fonts.body;

src/themes/circuit/theme.json

@@ -65,7 +65,6 @@
     "header": {
       "background": "rgba(14, 165, 233, 0.1)",
       "color": "#e0f2fe",
-      "border": "1px solid rgba(59, 130, 246, 0.2)",
       "fontWeight": "600",
       "fontSize": "14px"
     },
@@ -83,7 +82,6 @@
       }
     },
     "cell": {
-      "padding": "12px 16px",
       "fontSize": "14px"
     },
     "footer": {