fix: misc fixes

Author: Cahllagerfeld

src/app/onboarding/Setup/Items.tsx

@@ -18,7 +18,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 			active={active}
 			hasDownstream={hasDownstreamStep}
 			completed={completed}
-			title="Install and Connect ZenML (5 min)"
+			title="Install and log in to ZenML (5 min)"
 		>
 			<div className="flex flex-col gap-5">
 				<div>
@@ -28,7 +28,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 					/>
 				</div>
 				<div>
-					<p className="mb-1 text-text-sm text-theme-text-secondary">Login to your ZenML Server</p>
+					<p className="mb-1 text-text-sm text-theme-text-secondary">Log in to your ZenML Server</p>
 					<Codesnippet code={getLoginCommand(data?.deployment_type || "other")} />
 				</div>
 				<HelpBox link="https://docs.zenml.io/user-guide/production-guide/deploying-zenml#connecting-to-a-deployed-zenml" />

src/app/settings/service-accounts/[service-account-id]/Success.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 export function ApiKeySuccess({ value }: Props) {
 	return (
-		<div className="space-y-3 overflow-x-hidden px-7 py-5 text-text-md text-theme-text-primary ">
+		<div className="space-y-3 overflow-x-hidden px-7 py-5 text-text-md text-theme-text-primary">
 			<div className="space-y-0.5">
 				<p className="text-text-md font-semibold text-theme-text-primary">
 					Here is your new API Key
@@ -34,7 +34,7 @@ export function ApiKeySuccess({ value }: Props) {
 					</a>
 				</div>
 				<p className="text-theme-text-secondary">
-					To login to the ZenML server using the generated key, you can run the following CLI
+					To log in to the ZenML server using the generated key, you can run the following CLI
 					command and enter the API key when prompted:
 				</p>
 				<Codesnippet highlightCode wrap code={`zenml login --api-key ${window.location.origin}`} />

src/app/stacks/create/new-infrastructure/Providers/AWS.tsx

@@ -89,6 +89,19 @@ export function AWSComponents({
 					}}
 				/>
 			</div>
+			<div className="py-3 pl-9 pr-5">
+				<ComponentListItem
+					title={components?.imageBuilder?.name || "AWS Image Builder"}
+					subtitle={components?.imageBuilder?.id || "Build and manage container images"}
+					badge={<ComponentBadge type="image_builder">Image Builder</ComponentBadge>}
+					isLoading={isLoading}
+					isSuccess={isSuccess}
+					img={{
+						src: "https://public-flavor-logos.s3.eu-central-1.amazonaws.com/image_builder/aws.png",
+						alt: "AWS Image Builder logo"
+					}}
+				/>
+			</div>
 		</div>
 	);
 }

src/components/SearchField.tsx

@@ -1,3 +1,4 @@
+import Search from "@/assets/icons/search.svg?react";
 import { sanitizeSearchValue } from "@/lib/search";
 import { objectToSearchParams } from "@/lib/url";
 import { Input } from "@zenml-io/react-component-library";
@@ -36,7 +37,7 @@ export const SearchField = forwardRef<
 	}, [debouncedSearch]);
 
 	function updateSearchQuery(value: string) {
-		if (!!inMemoryHandler) {
+		if (inMemoryHandler) {
 			inMemoryHandler(value);
 			return;
 		}
@@ -64,14 +65,20 @@ export const SearchField = forwardRef<
 		debouncedSearch(value);
 	}
 	return (
-		<Input
-			{...rest}
-			ref={ref}
-			value={searchQuery}
-			onChange={searchHandler}
-			placeholder="Search..."
-			inputSize="md"
-		/>
+		<div className="relative">
+			<Input
+				className="pl-[36px]"
+				{...rest}
+				ref={ref}
+				value={searchQuery}
+				onChange={searchHandler}
+				placeholder="Search..."
+				inputSize="md"
+			/>
+			<div className="absolute inset-y-0 left-0 flex items-center pl-1">
+				<Search className="size-4 fill-neutral-400" />
+			</div>
+		</div>
 	);
 });