refactor(frontend): Replace Lucide icons with Phosphor icons and use Text component

- Update admin layout.tsx to use Phosphor icons instead of Lucide:
  - Users, CurrencyDollar, UserFocus, FileText, Database, Faders
- Update test-data page.tsx to use Text component for all text elements
- Update GenerateTestDataButton.tsx warning and result text with Text component

Co-authored-by: Ubbe <0ubbe@users.noreply.github.com>

autogpt_platform/frontend/src/app/(platform)/admin/layout.tsx

@@ -1,13 +1,12 @@
 import { Sidebar } from "@/components/__legacy__/Sidebar";
 import {
   Users,
-  DollarSign,
-  UserSearch,
+  CurrencyDollar,
+  UserFocus,
   FileText,
   Database,
-} from "lucide-react";
-
-import { IconSliders } from "@/components/__legacy__/ui/icons";
+  Faders,
+} from "@phosphor-icons/react";
 
 const sidebarLinkGroups = [
   {
@@ -15,32 +14,32 @@ const sidebarLinkGroups = [
       {
         text: "Marketplace Management",
         href: "/admin/marketplace",
-        icon: <Users className="h-6 w-6" />,
+        icon: <Users size={24} />,
       },
       {
         text: "User Spending",
         href: "/admin/spending",
-        icon: <DollarSign className="h-6 w-6" />,
+        icon: <CurrencyDollar size={24} />,
       },
       {
         text: "User Impersonation",
         href: "/admin/impersonation",
-        icon: <UserSearch className="h-6 w-6" />,
+        icon: <UserFocus size={24} />,
       },
       {
         text: "Execution Analytics",
         href: "/admin/execution-analytics",
-        icon: <FileText className="h-6 w-6" />,
+        icon: <FileText size={24} />,
       },
       {
         text: "Admin User Management",
         href: "/admin/settings",
-        icon: <IconSliders className="h-6 w-6" />,
+        icon: <Faders size={24} />,
       },
       {
         text: "Test Data",
         href: "/admin/test-data",
-        icon: <Database className="h-6 w-6" />,
+        icon: <Database size={24} />,
       },
     ],
   },

autogpt_platform/frontend/src/app/(platform)/admin/test-data/components/GenerateTestDataButton.tsx

@@ -119,25 +119,32 @@ export function GenerateTestDataButton() {
               options={scriptTypeOptions}
             />
 
-            <div className="rounded-md bg-yellow-50 p-3 text-sm text-yellow-800">
-              <strong>Warning:</strong> This will add significant data to your
-              database. This endpoint is disabled in production environments.
+            <div className="rounded-md bg-yellow-50 p-3 text-yellow-800">
+              <Text variant="small" as="span">
+                <Text variant="small-medium" as="span">
+                  Warning:
+                </Text>{" "}
+                This will add significant data to your database. This endpoint
+                is disabled in production environments.
+              </Text>
             </div>
 
             {result && (
               <div
-                className={`rounded-md p-3 text-sm ${
+                className={`rounded-md p-3 ${
                   result.success
                     ? "bg-green-50 text-green-800"
                     : "bg-red-50 text-red-800"
                 }`}
               >
-                <p className="font-medium">{result.message}</p>
+                <Text variant="small-medium">{result.message}</Text>
                 {result.details && (
                   <ul className="mt-2 list-inside list-disc">
                     {Object.entries(result.details).map(([key, value]) => (
                       <li key={key}>
-                        {key.replace(/_/g, " ")}: {String(value)}
+                        <Text variant="small" as="span">
+                          {key.replace(/_/g, " ")}: {String(value)}
+                        </Text>
                       </li>
                     ))}
                   </ul>

autogpt_platform/frontend/src/app/(platform)/admin/test-data/page.tsx

@@ -1,5 +1,6 @@
 import { withRoleAccess } from "@/lib/withRoleAccess";
 import { GenerateTestDataButton } from "./components/GenerateTestDataButton";
+import { Text } from "@/components/atoms/Text/Text";
 
 function TestDataDashboard() {
   return (
@@ -7,32 +8,48 @@ function TestDataDashboard() {
       <div className="flex flex-col gap-6">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-3xl font-bold">Test Data Generation</h1>
-            <p className="text-gray-500">
+            <Text variant="h1" className="text-3xl">
+              Test Data Generation
+            </Text>
+            <Text variant="body" className="text-gray-500">
               Generate sample data for testing and development
-            </p>
+            </Text>
           </div>
         </div>
 
         <div className="rounded-lg border bg-white p-6 shadow-sm">
-          <h2 className="mb-4 text-xl font-semibold">Generate Test Data</h2>
-          <p className="mb-6 text-gray-600">
+          <Text variant="h2" className="mb-4 text-xl">
+            Generate Test Data
+          </Text>
+          <Text variant="body" className="mb-6 text-gray-600">
             Use this tool to populate the database with sample test data. This
             is useful for development and testing purposes.
-          </p>
+          </Text>
 
           <div className="mb-6">
-            <h3 className="mb-2 font-medium">Available Script Types:</h3>
+            <Text variant="body-medium" className="mb-2">
+              Available Script Types:
+            </Text>
             <ul className="list-inside list-disc space-y-2 text-gray-600">
               <li>
-                <strong>E2E Test Data:</strong> Creates 15 test users with
-                graphs, library agents, presets, store submissions, and API
-                keys. Uses API functions for better compatibility.
+                <Text variant="body" as="span">
+                  <Text variant="body-medium" as="span">
+                    E2E Test Data:
+                  </Text>{" "}
+                  Creates 15 test users with graphs, library agents, presets,
+                  store submissions, and API keys. Uses API functions for better
+                  compatibility.
+                </Text>
               </li>
               <li>
-                <strong>Full Test Data:</strong> Creates 100+ users with
-                comprehensive test data including agent blocks, nodes,
-                executions, analytics, and more. Takes longer to complete.
+                <Text variant="body" as="span">
+                  <Text variant="body-medium" as="span">
+                    Full Test Data:
+                  </Text>{" "}
+                  Creates 100+ users with comprehensive test data including
+                  agent blocks, nodes, executions, analytics, and more. Takes
+                  longer to complete.
+                </Text>
               </li>
             </ul>
           </div>
@@ -41,33 +58,93 @@ function TestDataDashboard() {
         </div>
 
         <div className="rounded-lg border bg-gray-50 p-6">
-          <h3 className="mb-2 font-medium text-gray-700">
+          <Text variant="body-medium" className="mb-2 text-gray-700">
             What data is created?
-          </h3>
+          </Text>
           <div className="grid gap-4 text-sm text-gray-600 md:grid-cols-2">
             <div>
-              <h4 className="font-medium">E2E Script:</h4>
+              <Text variant="body-medium">E2E Script:</Text>
               <ul className="mt-1 list-inside list-disc">
-                <li>15 test users</li>
-                <li>15 graphs per user</li>
-                <li>Library agents</li>
-                <li>Agent presets</li>
-                <li>Store submissions</li>
-                <li>API keys</li>
-                <li>Creator profiles</li>
+                <li>
+                  <Text variant="small" as="span">
+                    15 test users
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    15 graphs per user
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Library agents
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Agent presets
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Store submissions
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    API keys
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Creator profiles
+                  </Text>
+                </li>
               </ul>
             </div>
             <div>
-              <h4 className="font-medium">Full Script:</h4>
+              <Text variant="body-medium">Full Script:</Text>
               <ul className="mt-1 list-inside list-disc">
-                <li>100 users</li>
-                <li>100 agent blocks</li>
-                <li>Multiple graphs per user</li>
-                <li>Agent nodes and links</li>
-                <li>Graph executions</li>
-                <li>Store listings and reviews</li>
-                <li>Analytics data</li>
-                <li>Credit transactions</li>
+                <li>
+                  <Text variant="small" as="span">
+                    100 users
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    100 agent blocks
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Multiple graphs per user
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Agent nodes and links
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Graph executions
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Store listings and reviews
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Analytics data
+                  </Text>
+                </li>
+                <li>
+                  <Text variant="small" as="span">
+                    Credit transactions
+                  </Text>
+                </li>
               </ul>
             </div>
           </div>