refactor: move add provider button on top

Author: peppescg

src/features/providers/components/provider-form.tsx

@@ -113,7 +113,11 @@ export function ProviderForm({ provider, setProvider }: Props) {
           >
             <Label>Api key</Label>
             <Input
-              placeholder="Update the provider API key"
+              placeholder={
+                provider.api_key === undefined
+                  ? "Update the provider API key"
+                  : "Specify the provider API key"
+              }
               value={provider.api_key ?? ""}
             />
           </TextField>

src/routes/route-providers.tsx

@@ -6,10 +6,9 @@ import {
   Card,
   LinkButton,
   CardBody,
-  CardFooter,
 } from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
-import { Plus } from "@untitled-ui/icons-react";
+import { PlusSquare } from "@untitled-ui/icons-react";
 import { TableProviders } from "@/features/providers/components/table-providers";
 import { Outlet } from "react-router-dom";
 
@@ -22,20 +21,14 @@ export function RouteProvider({ className }: { className?: string }) {
       </Breadcrumbs>
       <Heading level={4} className="mb-4 flex items-center justify-between">
         Providers
+        <LinkButton className="w-fit" href="/providers/new">
+          <PlusSquare /> Add Provider
+        </LinkButton>
       </Heading>
       <Card className={twMerge(className, "shrink-0")}>
         <CardBody>
           <TableProviders />
         </CardBody>
-        <CardFooter className="justify-between">
-          <LinkButton
-            className="w-fit"
-            href="/providers/new"
-            variant="tertiary"
-          >
-            <Plus /> Add Provider
-          </LinkButton>
-        </CardFooter>
       </Card>
 
       <Outlet />