Adapt remaining app to dark theme

frontend/app/src/app/styles/markdown.css

@@ -191,7 +191,7 @@
 }
 
 .markdown .mermaid-error {
-  background-color: #fef2f2;
-  color: #b91c1c;
+  background-color: var(--danger-surface);
+  color: var(--danger);
   white-space: pre-wrap;
 }

frontend/app/src/entities/authentication/ui/login-method-picker.tsx

@@ -22,7 +22,7 @@ export const LoginMethodPicker = () => {
   const [active, setActive] = useLastUsedMethod(methods, preferredDefault(methods));
 
   if (methods.length === 0 || !active) {
-    return <p className="text-red-500 text-sm">No authentication method available.</p>;
+    return <p className="text-danger text-sm">No authentication method available.</p>;
   }
 
   const others = methods.filter((m) => m.kind !== active.kind);

frontend/app/src/entities/authentication/ui/login-sso-buttons.tsx

@@ -1,3 +1,4 @@
+import { LinkButton } from "@infrahub/ui";
 import { useLocation, useSearchParams } from "react-router";
 
 import { Icon } from "@/shared/components/display/icon";
@@ -49,12 +50,9 @@ export const ProviderButton = ({
   const authorizeUrl = `${INFRAHUB_API_SERVER_URL + provider.authorize_path}?final_url=${encodeURIComponent(redirectTo)}`;
 
   return (
-    <a
-      className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md border bg-white px-4 py-2 font-medium text-sm shadow-xs hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
-      href={authorizeUrl}
-    >
+    <LinkButton variant="outline" href={authorizeUrl} className="font-medium">
       <Icon icon={provider.icon} />
-      <span className="ml-2">Continue with {provider.display_label}</span>
-    </a>
+      Continue with {provider.display_label}
+    </LinkButton>
   );
 };

frontend/app/src/entities/branches/ui/branch-working-notice.tsx

@@ -16,15 +16,21 @@ export function BranchWorkingNotice({ branch }: BranchWorkingNoticeProps) {
 
   if (currentBranch.name === branch.name) {
     return (
-      <BranchNotice className="bg-cyan-700/10 text-cyan-800" data-testid="branch-working-notice">
+      <BranchNotice
+        className="bg-cyan-700/10 text-cyan-800 dark:bg-cyan-200/10 dark:text-cyan-200"
+        data-testid="branch-working-notice"
+      >
         <GitBranchIcon className="size-4 shrink-0" aria-hidden="true" />
         <p>You're working on this branch.</p>
       </BranchNotice>
     );
   }
 
   return (
-    <BranchNotice className="bg-amber-50 text-amber-800" data-testid="branch-mismatch-notice">
+    <BranchNotice
+      className="bg-amber-50 text-amber-800 dark:bg-amber-200/10 dark:text-amber-200"
+      data-testid="branch-mismatch-notice"
+    >
       <TriangleAlertIcon className="size-4 shrink-0" aria-hidden="true" />
       <p>
         You're viewing <span className="font-semibold">{branch.name}</span> but working on{" "}

frontend/app/src/entities/branches/ui/branches-table/cells/branch-actions-cell.tsx

@@ -47,7 +47,7 @@ export function BranchActionsCell({ branch }: BranchActionsCellProps) {
               <MenuItem
                 isDisabled={!isDeleteAllowed}
                 tooltip={branch.is_default ? "Cannot delete the default branch" : "Login required"}
-                className="text-red-500"
+                className="text-danger"
                 onAction={() => setShowDeleteModal(true)}
               >
                 <Trash2Icon />

frontend/app/src/entities/branches/ui/branches-table/cells/branch-proposed-changes-cell.tsx

@@ -1,9 +1,10 @@
-import { LinkButton, Spinner } from "@infrahub/ui";
+import { Spinner } from "@infrahub/ui";
 import { Link } from "react-router";
 
 import { Row } from "@/shared/components/container";
 import { Icon } from "@/shared/components/display/icon";
 import { TableCell } from "@/shared/components/table/table-cell";
+import { LinkPill } from "@/shared/components/ui/link-pill";
 import { QSP } from "@/shared/config/qsp";
 
 import { getObjectDetailsUrl } from "@/entities/nodes/object/ui/routing/object-urls";
@@ -55,15 +56,10 @@ export function BranchProposedChangesCell({ branchName }: BranchProposedChangesC
   return (
     <TableCell className="h-auto min-h-14">
       <Row className="flex-wrap">
-        <LinkButton
-          variant="outline"
-          size="sm"
-          href={detailUrl}
-          className="max-w-40 rounded-full pr-2.5 data-hovered:border-custom-blue-700 data-hovered:underline"
-        >
-          <Icon icon={getSchemaIcon(schema)} className="shrink-0 text-custom-blue-800" />
+        <LinkPill href={detailUrl} className="max-w-40">
+          <Icon icon={getSchemaIcon(schema)} className="shrink-0 text-accent" />
           <span className="truncate">{firstPC.node.name.value}</span>
-        </LinkButton>
+        </LinkPill>
 
         {remainingCount > 0 && (
           <Link

frontend/app/src/entities/branches/ui/modal-delete-branch.tsx

@@ -96,8 +96,8 @@ export function ModalDeleteBranch({
     >
       <Col className="gap-4 p-3">
         <Heading slot="title" className="flex items-center gap-2 p-1 font-semibold">
-          <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-red-100">
-            <Icon icon="mdi:warning-outline" className="text-red-600" />
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-danger-surface">
+            <Icon icon="mdi:warning-outline" className="text-danger" />
           </div>
           Delete
         </Heading>
@@ -143,7 +143,7 @@ export function ModalDeleteBranch({
         </RadioGroup>
       </Col>
 
-      <Row className="justify-end bg-gray-50 p-3">
+      <Row className="justify-end bg-gray-50 p-3 dark:bg-white/5">
         <Button variant="outline" onPress={() => handleOpenChange(false)} isDisabled={isLoading}>
           Cancel
         </Button>

frontend/app/src/entities/config/ui/about-modal.tsx

@@ -1,9 +1,9 @@
-import { Button, Modal } from "@infrahub/ui";
+import { Button, Card, Modal } from "@infrahub/ui";
 import { XIcon } from "lucide-react";
 
 import { Separator } from "@/shared/components/aria/separator";
 import { CopyToClipboardButton } from "@/shared/components/buttons/copy-to-clipboard-button";
-import { Col, Row } from "@/shared/components/container";
+import { Row } from "@/shared/components/container";
 import { Skeleton } from "@/shared/components/loading/skeleton";
 import { InfrahubLogo } from "@/shared/components/ui/infrahub-logo";
 
@@ -37,13 +37,13 @@ export function AboutModal({ isOpen, onOpenChange }: AboutModalProps) {
         </Button>
       </Row>
 
-      <Col className="rounded-xl bg-stone-100 px-3 py-2.5">
+      <Card variant="panel" className="gap-2 rounded-xl px-3 py-2.5">
         <InfoRow label="Version" value={version} isLoading={isPending} />
         <Separator />
         <InfoRow label="Edition" value={config.installation_type} />
         <Separator />
         <InfoRow label="Deployment ID" value={deploymentId} isLoading={isPending} />
-      </Col>
+      </Card>
     </Modal>
   );
 }

frontend/app/src/entities/diff/ui/checks/check.tsx

@@ -25,21 +25,27 @@ const getCheckIcon = (conclusion?: string | null) => {
     case "success": {
       return (
         <Tooltip message="Success" nonInteractiveTrigger>
-          <Icon icon={"mdi:check-circle-outline"} className="mr-2 text-green-500" />
+          <Icon
+            icon={"mdi:check-circle-outline"}
+            className="mr-2 text-green-500 dark:text-green-400"
+          />
         </Tooltip>
       );
     }
     case "failure": {
       return (
         <Tooltip message="Failure" nonInteractiveTrigger>
-          <Icon icon={"mdi:warning"} className="mr-2 text-red-500" />
+          <Icon icon={"mdi:warning"} className="mr-2 text-red-500 dark:text-red-400" />
         </Tooltip>
       );
     }
     default: {
       return (
         <Tooltip message="In progress" nonInteractiveTrigger>
-          <Icon icon={"mdi:warning-circle-outline"} className="mr-2 text-yellow-500" />
+          <Icon
+            icon={"mdi:warning-circle-outline"}
+            className="mr-2 text-yellow-500 dark:text-yellow-400"
+          />
         </Tooltip>
       );
     }
@@ -76,7 +82,7 @@ export const Check = ({ id }: tCheckProps) => {
 
   if (error) {
     return (
-      <div className={"flex flex-col rounded-md border-l-4 bg-white p-2"}>
+      <div className={"flex flex-col rounded-md border-l-4 bg-white p-2 dark:bg-stone-900"}>
         <ErrorScreen message="Something went wrong when fetching the check details" />
       </div>
     );
@@ -129,7 +135,7 @@ export const Check = ({ id }: tCheckProps) => {
   return (
     <div
       className={classNames(
-        "flex min-w-0 flex-col rounded-md border border-l-4 bg-gray-50 p-2",
+        "flex min-w-0 flex-col rounded-md border border-l-4 bg-gray-50 p-2 dark:bg-white/5",
         getCheckBorderColor(severity?.value)
       )}
     >

frontend/app/src/entities/diff/ui/checks/checks-summary.tsx

@@ -81,7 +81,7 @@ export const ChecksSummary = (props: ChecksSummaryProps) => {
             onPress={() => handleRetry("all")}
             isDisabled={!isAuthenticated}
             variant="ghost"
-            className="gap-1 data-hovered:bg-neutral-200"
+            className="gap-1 data-hovered:bg-highlight"
           >
             Retry all
             <Retry isLoading={isPending || isLoading} isDisabled={isPending || isLoading} />

frontend/app/src/entities/diff/ui/checks/data-conflict.tsx

@@ -55,7 +55,7 @@ export const DataConflict = ({ id, changes, kind, name }: DataConflictProps) =>
 
       <Link to={url}>
         <DiffRow
-          className="group overflow-hidden rounded-sm pl-0 transition-all hover:bg-yellow-100"
+          className="group overflow-hidden rounded-sm pl-0 transition-all hover:bg-yellow-100 dark:hover:bg-yellow-400/15"
           iconClassName="left-4"
           hasConflicts
           title={
@@ -75,7 +75,9 @@ export const DataConflict = ({ id, changes, kind, name }: DataConflictProps) =>
               </Badge>
             </div>
           }
-          leftClassName={classNames("font-normal group-hover:bg-gray-100 transition-all")}
+          leftClassName={classNames(
+            "font-normal group-hover:bg-gray-100 dark:group-hover:bg-white/10 transition-all"
+          )}
           right={
             <div className="flex items-center gap-2">
               {branchChange?.previous}
@@ -85,7 +87,9 @@ export const DataConflict = ({ id, changes, kind, name }: DataConflictProps) =>
               </Badge>
             </div>
           }
-          rightClassName={classNames("font-normal group-hover:bg-gray-50 transition-all")}
+          rightClassName={classNames(
+            "font-normal group-hover:bg-gray-50 dark:group-hover:bg-white/5 transition-all"
+          )}
         />
       </Link>
     </div>

frontend/app/src/entities/diff/ui/checks/data-integrity-conflicts.tsx

@@ -10,7 +10,7 @@ export const DataIntegrityConflicts = ({ conflicts }: Pick<CoreDataCheck, "confl
   const proposedChange = useProposedChange();
 
   return (
-    <div className="rounded-md border bg-white p-2">
+    <div className="rounded-md border bg-white p-2 dark:bg-stone-900">
       <div className="grid grid-cols-3">
         <Badge variant="green" className="col-start-2 col-end-3 bg-transparent">
           <Icon icon="mdi:layers-triple" className="mr-1" />{" "}

frontend/app/src/entities/diff/ui/checks/schema-integrity-conflicts.tsx

@@ -4,7 +4,7 @@ import { SchemaConflict } from "./schema-conflict";
 
 export const SchemaIntegrityConflicts = ({ conflicts }: Pick<CoreDataCheck, "conflicts">) => {
   return (
-    <div className="rounded-md border bg-white p-2">
+    <div className="rounded-md border bg-white p-2 dark:bg-stone-900">
       {conflicts?.value?.map((conflict: any) => {
         return <SchemaConflict key={conflict.id} {...conflict} />;
       })}

frontend/app/src/entities/diff/ui/checks/validator.tsx

@@ -23,14 +23,17 @@ const getValidatorState = (state?: string, conclusion?: string) => {
     case "queued": {
       return (
         <Tooltip message="Queued" nonInteractiveTrigger>
-          <Icon icon={"mdi:timer-sand-complete"} className="text-yellow-500" />
+          <Icon icon={"mdi:timer-sand-complete"} className="text-yellow-500 dark:text-yellow-400" />
         </Tooltip>
       );
     }
     case "in_progress": {
       return (
         <Tooltip message="In progress" nonInteractiveTrigger>
-          <Icon icon={"mdi:clock-time-four-outline"} className="text-yellow-500" />
+          <Icon
+            icon={"mdi:clock-time-four-outline"}
+            className="text-yellow-500 dark:text-yellow-400"
+          />
         </Tooltip>
       );
     }
@@ -40,7 +43,7 @@ const getValidatorState = (state?: string, conclusion?: string) => {
           <Tooltip message="Success" nonInteractiveTrigger>
             <Icon
               icon={"mdi:check-circle-outline"}
-              className="text-green-500"
+              className="text-green-500 dark:text-green-400"
               data-testid="validator-success"
             />
           </Tooltip>
@@ -50,14 +53,17 @@ const getValidatorState = (state?: string, conclusion?: string) => {
       if (conclusion === "failure") {
         return (
           <Tooltip message="Failure" nonInteractiveTrigger>
-            <Icon icon={"mdi:warning"} className="text-red-500" />
+            <Icon icon={"mdi:warning"} className="text-red-500 dark:text-red-400" />
           </Tooltip>
         );
       }
 
       return (
         <Tooltip message="Unknown" nonInteractiveTrigger>
-          <Icon icon={"mdi:warning-circle-outline"} className="text-yellow-500" />
+          <Icon
+            icon={"mdi:warning-circle-outline"}
+            className="text-yellow-500 dark:text-yellow-400"
+          />
         </Tooltip>
       );
     }
@@ -151,7 +157,11 @@ export const Validator = ({ validator }: tValidatorProps) => {
   );
 
   return (
-    <Accordion title={title} className="rounded-md bg-white p-2" data-testid="validator">
+    <Accordion
+      title={title}
+      className="rounded-md bg-white p-2 dark:bg-stone-900"
+      data-testid="validator"
+    >
       <ValidatorDetails id={id} />
     </Accordion>
   );

frontend/app/src/entities/diff/ui/diff-badge.tsx

@@ -43,7 +43,10 @@ export const BadgeAdded = ({ className, ...props }: DiffBadgeProps) => {
     <BadgeUnchanged
       {...props}
       icon="mdi:plus-circle-outline"
-      className={classNames("bg-green-200 text-green-800", className)}
+      className={classNames(
+        "bg-green-200 text-green-800 dark:bg-green-400/20 dark:text-green-300",
+        className
+      )}
     />
   );
 };
@@ -53,7 +56,10 @@ export const BadgeRemoved = ({ className, ...props }: DiffBadgeProps) => {
     <BadgeUnchanged
       {...props}
       icon="mdi:minus-circle-outline"
-      className={classNames("bg-red-200 text-red-800", className)}
+      className={classNames(
+        "bg-red-200 text-red-800 dark:bg-red-400/20 dark:text-red-300",
+        className
+      )}
     />
   );
 };
@@ -63,7 +69,10 @@ export const BadgeConflict = ({ className, ...props }: DiffBadgeProps) => {
     <BadgeUnchanged
       {...props}
       icon="mdi:warning-outline"
-      className={classNames("bg-yellow-200 text-yellow-800", className)}
+      className={classNames(
+        "bg-yellow-200 text-yellow-800 dark:bg-yellow-400/20 dark:text-yellow-300",
+        className
+      )}
     />
   );
 };
@@ -73,7 +82,10 @@ export const BadgeUpdated = ({ className, ...props }: DiffBadgeProps) => {
     <BadgeUnchanged
       {...props}
       icon="mdi:circle-arrows"
-      className={classNames("bg-blue-200 text-blue-800", className)}
+      className={classNames(
+        "bg-blue-200 text-blue-800 dark:bg-blue-400/20 dark:text-blue-300",
+        className
+      )}
     />
   );
 };

frontend/app/src/entities/diff/ui/diff-branch-not-found.tsx

@@ -14,7 +14,7 @@ export function DiffBranchNotFound({ branchName }: DiffBranchNotFoundProps) {
   return (
     <div className="my-10 flex flex-col items-center gap-5">
       <div className="inline-flex rounded-full bg-white p-3">
-        <Icon icon="mdi:source-branch-remove" className="text-2xl text-red-400" />
+        <Icon icon="mdi:source-branch-remove" className="text-2xl text-danger" />
       </div>
 
       <h1 className="font-semibold text-lg">Branch not available</h1>