Merge pull request #45 from SyTW2526/feature/fix-styles

fix: mejorar estilos de botones y ajustes de color en TaskCard y Task

Author: tomas2p

client/src/components/tasks/TaskCard.tsx

@@ -105,14 +105,14 @@ export const TaskCard = memo(function TaskCard({
                 <Icon
                   as="IconStar"
                   size={16}
-                  className="text-muted-foreground hover:text-yellow-400 transition-colors duration-200"
+                  className="text-muted-foreground hover:text-primary transition-colors duration-200"
                 />
               }
               checkedIcon={
                 <Icon
-                  as="IconStar"
+                  as="IconStarFilled"
                   size={16}
-                  className="fill-yellow-400 text-yellow-400"
+                  className="fill-primary text-primary"
                 />
               }
             />

client/src/components/tasks/TaskFilters.tsx

@@ -153,19 +153,18 @@ interface TaskFavoriteToggleProps {
 export function TaskFavoriteToggle({
   active,
   onToggle,
-  className = "",
 }: TaskFavoriteToggleProps) {
   const { t } = useTranslation();
 
   return (
     <Button
-      variant="outline"
+      variant={active ? "default" : "outline"}
       onClick={onToggle}
       title={
         active ? t("tasks.filters.showAll") : t("tasks.filters.showFavorites")
       }
       leftIcon={active ? "IconStarFilled" : "IconStar"}
-      className={`${active ? "bg-yellow-500 hover:bg-yellow-600 text-white border-yellow-500 hover:text-white" : ""} ${className}`}
+      // className={`${active ? "bg-yellow-500 hover:bg-yellow-600 text-white border-yellow-500 hover:text-white" : ""} ${className}`}
     />
   );
 }

client/src/components/ui/button-variants.ts

@@ -5,7 +5,7 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 border dark:border-input",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

client/src/styles/index.css

@@ -43,12 +43,15 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(0.975 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --background: oklch(0.95 0 0);
+  /* Un poco más gris, menos blanco puro */
+  --foreground: oklch(0.12 0 0);
+  /* Texto aún más oscuro */
+  --card: oklch(0.98 0 0);
+  /* Fondo de tarjetas, más gris */
+  --card-foreground: oklch(0.12 0 0);
+  --popover: oklch(0.98 0 0);
+  --popover-foreground: oklch(0.12 0 0);
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
@@ -145,4 +148,4 @@
     margin-right: 0 !important;
     padding-right: 0 !important;
   }
-}
+}