componenets standardization 1

frontend/src/components/ui/pricing-table/index.tsx

@@ -5,6 +5,7 @@
 
 import { useState } from 'react';
 import { CheckIcon } from '../../../icons';
+import Button from '../button/Button';
 
 export interface PricingPlan {
   id: number;
@@ -66,26 +67,20 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
         <div className="flex justify-center mb-8">
           <div className="inline-flex items-center gap-3">
             <div className="inline-flex items-center gap-3 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
-              <button
+              <Button
+                variant={billingPeriod === 'monthly' ? 'secondary' : 'ghost'}
+                size="sm"
                 onClick={() => setBillingPeriod('monthly')}
-                className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-                  billingPeriod === 'monthly'
-                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400'
-                }`}
               >
                 Monthly
-              </button>
-              <button
+              </Button>
+              <Button
+                variant={billingPeriod === 'annual' ? 'secondary' : 'ghost'}
+                size="sm"
                 onClick={() => setBillingPeriod('annual')}
-                className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-                  billingPeriod === 'annual'
-                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400'
-                }`}
               >
                 Annually
-              </button>
+              </Button>
             </div>
             {billingPeriod === 'annual' && (
               <span className="badge-success">
@@ -202,13 +197,14 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
               )}
             </ul>
 
-            <button
-              className={plan.highlighted ? 'btn-primary' : 'btn-outline'}
+            <Button
+              variant={plan.highlighted ? 'primary' : 'outline'}
+              fullWidth
               onClick={() => onPlanSelect?.(plan)}
               disabled={plan.disabled}
             >
               {plan.buttonText}
-            </button>
+            </Button>
           </div>
         ))}
       </div>