123

frontend/src/pages/account/TeamManagementPage.tsx

@@ -134,9 +134,11 @@ export default function TeamManagementPage() {
           <div className="flex justify-end">
             <Button
               variant="primary"
+              tone="brand"
+              size="md"
+              startIcon={<UserPlus className="w-4 h-4" />}
               onClick={() => setShowInviteModal(true)}
             >
-              <UserPlus className="w-4 h-4 mr-2" />
               Invite Team Member
             </Button>
           </div>
@@ -215,9 +217,11 @@ export default function TeamManagementPage() {
       <div className="flex justify-end">
         <Button
           variant="primary"
+          tone="brand"
+          size="md"
+          startIcon={<UserPlus className="w-4 h-4" />}
           onClick={() => setShowInviteModal(true)}
         >
-          <UserPlus className="w-4 h-4 mr-2" />
           Send Invitation
         </Button>
       </div>

frontend/src/pages/account/UsageAnalyticsPage.tsx

@@ -12,6 +12,7 @@ import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import BillingUsagePanel from '../../components/billing/BillingUsagePanel';
 import BillingBalancePanel from '../../components/billing/BillingBalancePanel';
+import Button from '../../components/ui/button/Button';
 
 type TabType = 'credits' | 'api' | 'costs';
 
@@ -92,36 +93,20 @@ export default function UsageAnalyticsPage() {
 
         {/* Period Selector */}
         <div className="flex gap-2">
-          <button
-            onClick={() => setPeriod(7)}
-            className={`px-4 py-2 rounded-md text-sm font-medium ${
-              period === 7
-                ? 'bg-primary-600 text-white'
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-            }`}
-          >
-            7 Days
-          </button>
-          <button
-            onClick={() => setPeriod(30)}
-            className={`px-4 py-2 rounded-md text-sm font-medium ${
-              period === 30
-                ? 'bg-primary-600 text-white'
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-            }`}
-          >
-            30 Days
-          </button>
-          <button
-            onClick={() => setPeriod(90)}
-            className={`px-4 py-2 rounded-md text-sm font-medium ${
-              period === 90
-                ? 'bg-primary-600 text-white'
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-            }`}
-          >
-            90 Days
-          </button>
+          {[7, 30, 90].map((value) => {
+            const isActive = period === value;
+            return (
+              <Button
+                key={value}
+                size="sm"
+                variant={isActive ? 'primary' : 'secondary'}
+                tone={isActive ? 'brand' : 'neutral'}
+                onClick={() => setPeriod(value)}
+              >
+                {value} Days
+              </Button>
+            );
+          })}
         </div>
       </div>