componenets standardization 1

frontend/src/components/common/ViewToggle.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { GridIcon, ListIcon, TableIcon } from "../../icons";
+import Button from "../ui/button/Button";
 
 export type ViewType = "table" | "kanban" | "list";
 
@@ -23,19 +24,18 @@ const ViewToggle: React.FC<ViewToggleProps> = ({
   return (
     <div className={`inline-flex items-center gap-1 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900 ${className}`}>
       {views.map((view) => (
-        <button
+        <Button
           key={view.type}
           onClick={() => onViewChange(view.type)}
-          className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-            currentView === view.type
-              ? "bg-white text-gray-900 dark:bg-gray-800 dark:text-white shadow-sm"
-              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
-          }`}
+          variant={currentView === view.type ? "secondary" : "ghost"}
+          tone="neutral"
+          size="sm"
+          className={currentView === view.type ? "shadow-sm" : ""}
           title={view.label}
+          startIcon={view.icon}
         >
-          {view.icon}
           <span className="hidden sm:inline">{view.label}</span>
-        </button>
+        </Button>
       ))}
     </div>
   );