cloud svg

frontend/__tests__/components/features/onboarding/information-request-form.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import { MemoryRouter } from "react-router";
-import { InformationRequestForm } from "#/components/features/onboarding/information-request-form";
+import { InformationRequestForm, RequestType } from "#/components/features/onboarding/information-request-form";
 
 // Mock useNavigate
 const mockNavigate = vi.fn();
@@ -16,7 +16,7 @@ vi.mock("react-router", async () => {
 
 describe("InformationRequestForm", () => {
   const defaultProps = {
-    requestType: "saas" as const,
+    requestType: "saas" as RequestType,
     onBack: vi.fn(),
   };
 

frontend/__tests__/components/features/onboarding/step-input.test.tsx

@@ -1,72 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { StepInput } from "#/components/features/onboarding/step-input";
-
-describe("StepInput", () => {
-  const defaultProps = {
-    id: "test-input",
-    label: "Test Label",
-    value: "",
-    onChange: vi.fn(),
-  };
-
-  it("should render with correct test id", () => {
-    render(<StepInput {...defaultProps} />);
-
-    expect(screen.getByTestId("step-input-test-input")).toBeInTheDocument();
-  });
-
-  it("should render the label", () => {
-    render(<StepInput {...defaultProps} />);
-
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-  });
-
-  it("should display the provided value", () => {
-    render(<StepInput {...defaultProps} value="Hello World" />);
-
-    const input = screen.getByTestId("step-input-test-input");
-    expect(input).toHaveValue("Hello World");
-  });
-
-  it("should call onChange when user types", async () => {
-    const mockOnChange = vi.fn();
-    const user = userEvent.setup();
-
-    render(<StepInput {...defaultProps} onChange={mockOnChange} />);
-
-    const input = screen.getByTestId("step-input-test-input");
-    await user.type(input, "a");
-
-    expect(mockOnChange).toHaveBeenCalledWith("a");
-  });
-
-  it("should call onChange with the full input value on each keystroke", async () => {
-    const mockOnChange = vi.fn();
-    const user = userEvent.setup();
-
-    render(<StepInput {...defaultProps} onChange={mockOnChange} />);
-
-    const input = screen.getByTestId("step-input-test-input");
-    await user.type(input, "abc");
-
-    expect(mockOnChange).toHaveBeenCalledTimes(3);
-    expect(mockOnChange).toHaveBeenNthCalledWith(1, "a");
-    expect(mockOnChange).toHaveBeenNthCalledWith(2, "b");
-    expect(mockOnChange).toHaveBeenNthCalledWith(3, "c");
-  });
-
-  it("should use the id prop for data-testid", () => {
-    render(<StepInput {...defaultProps} id="org_name" />);
-
-    expect(screen.getByTestId("step-input-org_name")).toBeInTheDocument();
-  });
-
-  it("should render as a text input", () => {
-    render(<StepInput {...defaultProps} />);
-
-    const input = screen.getByTestId("step-input-test-input");
-    expect(input).toHaveAttribute("type", "text");
-  });
-});

frontend/src/components/features/onboarding/information-request-form.tsx

@@ -6,7 +6,7 @@ import { Card } from "#/ui/card";
 import { Text } from "#/ui/typography";
 import { FormInput } from "./form-input";
 import OpenHandsLogoWhite from "#/assets/branding/openhands-logo-white.svg?react";
-import CloudIcon from "#/icons/cloud.svg?react";
+import CloudIcon from "#/icons/cloud-minimal.svg?react";
 import StackedIcon from "#/icons/stacked.svg?react";
 
 export type RequestType = "saas" | "self-hosted";
@@ -143,7 +143,11 @@ export function InformationRequestForm({
           />
 
           {/* Buttons */}
-          <div className="flex gap-4 mt-4" role="group" aria-label="Form actions">
+          <div
+            className="flex gap-4 mt-4"
+            role="group"
+            aria-label="Form actions"
+          >
             <button
               type="button"
               onClick={onBack}

frontend/src/icons/cloud-minimal.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.1663 31.6673H14.9996C12.8361 31.6668 10.7153 31.0646 8.87424 29.9281C7.03322 28.7916 5.54448 27.1656 4.5744 25.2317C3.60432 23.2978 3.19111 21.1322 3.38094 18.977C3.57077 16.8218 4.35616 14.7618 5.64936 13.0273C6.94256 11.2927 8.69261 9.95197 10.704 9.1548C12.7153 8.35762 14.9087 8.13544 17.039 8.51309C19.1694 8.89074 21.1527 9.85334 22.7675 11.2933C24.3823 12.7333 25.5648 14.5939 26.1829 16.6673H29.1663C31.1554 16.6673 33.0631 17.4575 34.4696 18.864C35.8761 20.2705 36.6663 22.1782 36.6663 24.1673C36.6663 26.1564 35.8761 28.0641 34.4696 29.4706C33.0631 30.8771 31.1554 31.6673 29.1663 31.6673Z" stroke="#8C8C8C" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/routes/information-request.tsx

@@ -10,7 +10,7 @@ import {
   RequestType,
 } from "#/components/features/onboarding/information-request-form";
 import OpenHandsLogoWhite from "#/assets/branding/openhands-logo-white.svg?react";
-import CloudIcon from "#/icons/cloud.svg?react";
+import CloudIcon from "#/icons/cloud-minimal.svg?react";
 import StackedIcon from "#/icons/stacked.svg?react";
 
 interface FeatureListProps {