Merge pull request #658 from zenml-io/staging

Author: Cahllagerfeld

src/app/stacks/create/ExistingInfra.tsx

@@ -1,20 +1,20 @@
-import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import CloudTenant from "@/assets/icons/cloud-tenant.svg?react";
 import Help from "@/assets/icons/help.svg?react";
+import Info from "@/assets/icons/info.svg?react";
 import Layout from "@/assets/icons/layout.svg?react";
+import { useServerInfo } from "@/data/server/info-query";
+import { checkIsLocalServer } from "@/lib/server";
 import { routes } from "@/router/routes";
+import { Skeleton } from "@zenml-io/react-component-library";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger
 } from "@zenml-io/react-component-library/components/client";
 import { Link, useSearchParams } from "react-router-dom";
-import * as OptionsCard from "./OptionCard";
-import { useServerInfo } from "@/data/server/info-query";
-import { Skeleton } from "@zenml-io/react-component-library";
-import { checkIsLocalServer } from "@/lib/server";
 import { LocalOverlay } from "./LocalOverlay";
+import * as OptionsCard from "./OptionCard";
 
 const learnMoreLink = "https://docs.zenml.io/how-to/stack-deployment/deploy-a-cloud-stack";
 
@@ -67,7 +67,7 @@ function ManualSetupCard() {
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<div className="z-10">
-											<AlertCircle className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
+											<Info className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
 										</div>
 									</TooltipTrigger>
 									<TooltipContent
@@ -136,7 +136,7 @@ function ScanCard({ isLocalDeployment }: Props) {
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<div className="z-10">
-											<AlertCircle className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
+											<Info className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
 										</div>
 									</TooltipTrigger>
 									<TooltipContent

src/app/stacks/create/LocalOverlay.tsx

@@ -1,6 +1,6 @@
 export function LocalOverlay() {
 	return (
-		<div className="group absolute flex h-full w-full items-center justify-center rounded-md border border-theme-border-moderate bg-white/70">
+		<div className="group absolute z-20 flex h-full w-full items-center justify-center rounded-md border border-theme-border-moderate bg-white/70">
 			<div className="hidden rounded-md bg-theme-text-primary px-3 py-2 text-text-xs text-theme-text-negative shadow-lg animate-in fade-in-0 fade-out-0 zoom-in-95 group-hover:block">
 				This option is not available for local deployments
 			</div>

src/app/stacks/create/NewInfra.tsx

@@ -1,7 +1,9 @@
-import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import Codebrowser from "@/assets/icons/code-browser.svg?react";
 import ConnectorAdd from "@/assets/icons/connector-add.svg?react";
 import Help from "@/assets/icons/help.svg?react";
+import Info from "@/assets/icons/info.svg?react";
+import { useServerInfo } from "@/data/server/info-query";
+import { checkIsLocalServer } from "@/lib/server";
 import { routes } from "@/router/routes";
 import { Skeleton } from "@zenml-io/react-component-library";
 import {
@@ -11,8 +13,6 @@ import {
 	TooltipTrigger
 } from "@zenml-io/react-component-library/components/client";
 import { Link, useSearchParams } from "react-router-dom";
-import { useServerInfo } from "../../../data/server/info-query";
-import { checkIsLocalServer } from "../../../lib/server";
 import { LocalOverlay } from "./LocalOverlay";
 import * as OptionsCard from "./OptionCard";
 
@@ -66,7 +66,7 @@ function InBrowserCard({ isLocalDeployment }: Props) {
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<div className="z-10">
-											<AlertCircle className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
+											<Info className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
 										</div>
 									</TooltipTrigger>
 									<TooltipContent
@@ -139,7 +139,7 @@ function TerraformCard({ isLocalDeployment }: Props) {
 									<Tooltip>
 										<TooltipTrigger asChild>
 											<div className="z-10">
-												<AlertCircle className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
+												<Info className="h-5 w-5 shrink-0 fill-theme-text-tertiary" />
 											</div>
 										</TooltipTrigger>
 										<TooltipContent