fix: pixel-perfect workspace/login screens to match Figma specs

echobt · echobt · commit ac7f774e64d5 · 2026-02-28T09:03:53.000Z
- HomeChat: title changed to 'Hey, start building or open your project.'
  with 32px font, removed logo/subtitle/quick-action buttons, 922px container
- CortexPromptInput: 680px max-width, 16px border-radius, separated type area
  and action bar, 28px send button with full rounding, attach button replaces
  plus/upload, 28px model selector with 4px gap
- CortexAccountPanel: centered sign-in layout with 100px icon area, 'Sign In'
  title, description text, 32px height buttons with 8px gap and 8px radius
- Updated tests to match new UI structure and text content
- Removed unused AnimatedLogo, ICON_16, avatarStyle, CortexButton import
diff --git a/src/components/cortex/CortexAccountPanel.tsx b/src/components/cortex/CortexAccountPanel.tsx
@@ -111,25 +111,79 @@ const ProfileContent: Component = () => {
   const [appVersion] = createResource(() => getVersion().catch(() => "0.1.0"));
 
   return (
-    <div style={{ padding: "24px 20px", display: "flex", "flex-direction": "column", gap: "24px" }}>
-      <div style={{ display: "flex", "align-items": "center", gap: "16px" }}>
-        <div style={avatarStyle}>
-          <CortexIcon name="user" size={32} color="var(--cortex-text-inactive)" />
+    <div style={{
+      padding: "12px",
+      display: "flex",
+      "flex-direction": "column",
+      "align-items": "flex-end",
+      position: "relative",
+    }}>
+      {/* Contents: Figma 1304:21901 - column, center, gap 16px */}
+      <div style={{
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "center",
+        gap: "16px",
+        width: "100%",
+      }}>
+        {/* Logo + Sign In title */}
+        <div style={{
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          width: "100px",
+        }}>
+          <div style={{
+            width: "100px",
+            height: "100px",
+            "border-radius": "12px",
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+          }}>
+            <CortexIcon name="user" size={48} color="var(--cortex-text-inactive)" />
+          </div>
+          <div style={{
+            "font-family": "var(--cortex-font-sans)",
+            "font-size": "16px",
+            "font-weight": "500",
+            color: "var(--cortex-text-primary)",
+            "text-align": "center",
+            "line-height": "16px",
+            width: "100%",
+          }}>Sign In</div>
         </div>
-        <div>
-          <div style={{ "font-size": "16px", "font-weight": "500", color: "var(--cortex-text-primary)" }}>User</div>
-          <div style={{ "font-size": "13px", color: "var(--cortex-text-inactive)", "margin-top": "2px" }}>Not signed in</div>
+
+        {/* Description */}
+        <div style={{
+          "font-family": "var(--cortex-font-sans)",
+          "font-size": "12px",
+          "font-weight": "400",
+          color: "var(--cortex-text-inactive)",
+          "text-align": "center",
+          "line-height": "15px",
+          width: "100%",
+        }}>In order to use AI functions you need to connect your Google or GitHub account</div>
+
+        {/* Buttons: Figma 1304:21893 - column, gap 8px */}
+        <div style={{
+          display: "flex",
+          "flex-direction": "column",
+          gap: "8px",
+          width: "100%",
+        }}>
+          <button style={signInBtnStyle}>
+            <CortexIcon name="git-logo" size={16} color="var(--cortex-text-primary)" />
+            <span>Continue with GitHub</span>
+          </button>
+          <button style={signInBtnStyle}>
+            <CortexIcon name="globe" size={16} color="var(--cortex-text-primary)" />
+            <span>Continue with Google</span>
+          </button>
         </div>
       </div>
-      <button style={signInBtnStyle}>
-        <CortexIcon name="git-logo" size={16} color="var(--cortex-text-primary)" />
-        <span>Continue with GitHub</span>
-      </button>
-      <button style={{ ...signInBtnStyle, "margin-top": "-12px" }}>
-        <CortexIcon name="globe" size={16} color="var(--cortex-text-primary)" />
-        <span>Continue with Google</span>
-      </button>
-      <div style={{ "margin-top": "auto", "font-size": "12px", color: "var(--cortex-text-inactive)" }}>
+
+      <div style={{ "margin-top": "auto", "font-size": "12px", color: "var(--cortex-text-inactive)", padding: "12px 0 0" }}>
         Cortex Desktop v{appVersion() ?? "0.1.0"}
       </div>
     </div>
@@ -252,19 +306,13 @@ const tabIndicatorStyle = {
 
 const contentStyle = { flex: "1", overflow: "auto" as const };
 
-const avatarStyle = {
-  width: "64px", height: "64px", "border-radius": "var(--cortex-radius-full)",
-  background: "var(--cortex-bg-hover)",
-  border: "2px solid var(--cortex-border-default)",
-  display: "flex", "align-items": "center", "justify-content": "center", "flex-shrink": "0",
-};
-
 const signInBtnStyle = {
-  display: "flex", "align-items": "center", "justify-content": "center", gap: "8px",
-  padding: "10px 16px", background: "var(--cortex-bg-hover)",
-  border: "1px solid var(--cortex-border-default)",
-  "border-radius": "var(--cortex-radius-md)", color: "var(--cortex-text-primary)",
-  "font-size": "13px", "font-family": "var(--cortex-font-sans)", cursor: "pointer",
+  display: "flex", "align-items": "center", "justify-content": "center", gap: "4px",
+  padding: "8px", background: "var(--cortex-border-default)",
+  border: "none",
+  "border-radius": "8px", color: "var(--cortex-text-primary)",
+  "font-size": "14px", "font-weight": "500", "font-family": "var(--cortex-font-sans)",
+  cursor: "pointer", height: "32px", width: "100%",
 };
 
 const placeholderStyle = {
diff --git a/src/components/cortex/CortexChatPanel.tsx b/src/components/cortex/CortexChatPanel.tsx
@@ -10,7 +10,7 @@
  */
 
 import { Component, JSX, splitProps, Show, For } from "solid-js";
-import { CortexPromptInput, CortexButton } from "./primitives";
+import { CortexPromptInput } from "./primitives";
 import { ChatMessageBubble } from "./CortexChatMessageBubble";
 
 export type ChatPanelState = "home" | "minimized" | "expanded";
@@ -90,16 +90,7 @@ const PromptInputBlock: Component<InputProps & { style?: JSX.CSSProperties }> =
   />
 );
 
-const AnimatedLogo: Component<{ size?: number }> = (props) => (
-  <img
-    src="/assets/claude-logo.svg"
-    alt="Claude"
-    style={{ width: `${props.size || 120}px`, height: `${props.size || 120}px` }}
-  />
-);
-
 const FONT = "var(--cortex-font-sans, 'Figtree', sans-serif)";
-const ICON_16: JSX.CSSProperties = { width: "16px", height: "16px" };
 
 export const CortexChatPanel: Component<CortexChatPanelProps> = (props) => {
   const [local] = splitProps(props, [
@@ -138,76 +129,34 @@ const HomeChat: Component<Omit<CortexChatPanelProps, "state" | "messages">> = (p
     width: "100%",
     height: "100%",
     background: "var(--cortex-bg-primary)",
-    gap: "24px",
-    padding: "48px",
     position: "relative",
     overflow: "hidden",
     ...props.style,
   }}>
-    <AnimatedLogo size={120} />
-
-    {/* Title Container: Figma layout_BJ5RLN - column, center, gap 8px */}
+    {/* Container: Figma 1239:21710 - column, center, gap 28px, width 922px */}
     <div style={{
       display: "flex",
       "flex-direction": "column",
       "align-items": "center",
-      gap: "8px",
+      "justify-content": "center",
+      width: "922px",
+      "max-width": "100%",
+      gap: "28px",
     }}>
-      {/* Title: Figtree 56px weight 500, lineHeight 1.14em */}
+      {/* Title: Figma 1239:21711 - Figtree 32px Medium, lineHeight 40px (125%), centered */}
       <h1 style={{
         "font-family": FONT,
-        "font-size": "56px",
+        "font-size": "32px",
         "font-weight": "500",
         color: "var(--cortex-text-primary)",
         "text-align": "center",
-        "line-height": "1.14em",
+        "line-height": "40px",
         "letter-spacing": "0px",
         margin: "0",
-      }}>What would you like to build</h1>
-
-      {/* Subtitle: Figtree 20px weight 500, lineHeight 1.2em */}
-      <p style={{
-        "font-family": FONT,
-        "font-size": "20px",
-        "font-weight": "500",
-        color: "var(--cortex-text-secondary)",
-        "text-align": "center",
-        "line-height": "1.2em",
-        margin: "0",
-      }}>Start a conversation or open a project</p>
-    </div>
+        width: "100%",
+      }}>Hey, start building or open your project.</h1>
 
-    {/* Prompt + Import Options: Figma layout_NRGR04 - column, gap 12px */}
-    <div style={{
-      display: "flex",
-      "flex-direction": "column",
-      gap: "12px",
-    }}>
       <PromptInputBlock {...props} />
-
-      {/* Import Options: Figma layout_L2GHFF - row, justify end, gap 16px, padding 0 16px, width 802px */}
-      <div style={{
-        display: "flex",
-        "align-items": "center",
-        "justify-content": "flex-end",
-        gap: "16px",
-        padding: "0 16px",
-        width: "802px",
-        "max-width": "100%",
-      }}>
-        <CortexButton variant="secondary" size="xs" onClick={props.onImportDesignClick}>
-          <img src="/assets/palette.svg" alt="" style={ICON_16} />
-          Import Design
-        </CortexButton>
-        <CortexButton variant="secondary" size="xs" onClick={props.onImportCodeClick}>
-          <img src="/assets/code.svg" alt="" style={ICON_16} />
-          Import Code
-        </CortexButton>
-        <CortexButton variant="secondary" size="xs" onClick={props.onBuildClick}>
-          <img src="/assets/brackets-square.svg" alt="" style={ICON_16} />
-          Build
-        </CortexButton>
-      </div>
     </div>
   </div>
 );
diff --git a/src/components/cortex/__tests__/CortexAccountPanel.test.tsx b/src/components/cortex/__tests__/CortexAccountPanel.test.tsx
@@ -43,8 +43,8 @@ describe("CortexAccountPanel", () => {
 
     it("should show Profile tab content by default", () => {
       const { container } = render(() => <CortexAccountPanel />);
-      expect(container.textContent).toContain("User");
-      expect(container.textContent).toContain("Not signed in");
+      expect(container.textContent).toContain("Sign In");
+      expect(container.textContent).toContain("Continue with GitHub");
     });
   });
 
@@ -54,10 +54,10 @@ describe("CortexAccountPanel", () => {
       expect(container.querySelector('[data-testid="icon-user"]')).toBeTruthy();
     });
 
-    it("should show User label when not signed in", () => {
+    it("should show Sign In label when not signed in", () => {
       const { container } = render(() => <CortexAccountPanel />);
-      expect(container.textContent).toContain("User");
-      expect(container.textContent).toContain("Not signed in");
+      expect(container.textContent).toContain("Sign In");
+      expect(container.textContent).toContain("In order to use AI functions you need to connect your Google or GitHub account");
     });
 
     it("should display app version placeholder or resolved version", async () => {
diff --git a/src/components/cortex/__tests__/CortexChatPanel.test.tsx b/src/components/cortex/__tests__/CortexChatPanel.test.tsx
@@ -174,97 +174,27 @@ describe("CortexChatPanel", () => {
   describe("Home State", () => {
     it("should render home state by default", () => {
       const { container } = render(() => <CortexChatPanel />);
-      expect(container.textContent).toContain("What would you like to build");
+      expect(container.textContent).toContain("Hey, start building or open your project.");
     });
 
     it("should render home state when state is home", () => {
       const { container } = render(() => <CortexChatPanel state="home" />);
-      expect(container.textContent).toContain("What would you like to build");
-      expect(container.textContent).toContain("Start a conversation or open a project");
+      expect(container.textContent).toContain("Hey, start building or open your project.");
     });
 
     it("should render prompt input in home state", () => {
       const { getByTestId } = render(() => <CortexChatPanel state="home" />);
       expect(getByTestId("prompt-input")).toBeTruthy();
     });
 
-    it("should render quick action buttons in home state", () => {
-      const { container } = render(() => <CortexChatPanel state="home" />);
-      expect(container.textContent).toContain("Build");
-      expect(container.textContent).toContain("Import Code");
-      expect(container.textContent).toContain("Import Design");
-    });
-
-    it("should call onBuildClick when Build button is clicked", async () => {
-      const onBuildClick = vi.fn();
-      const { container } = render(() => (
-        <CortexChatPanel state="home" onBuildClick={onBuildClick} />
-      ));
-
-      const buildButton = Array.from(container.querySelectorAll("button")).find(
-        (btn) => btn.textContent?.includes("Build")
-      );
-      if (buildButton) {
-        await fireEvent.click(buildButton);
-      }
-
-      expect(onBuildClick).toHaveBeenCalled();
-    });
-
-    it("should call onImportCodeClick when Import Code button is clicked", async () => {
-      const onImportCodeClick = vi.fn();
-      const { container } = render(() => (
-        <CortexChatPanel state="home" onImportCodeClick={onImportCodeClick} />
-      ));
-
-      const importButton = Array.from(container.querySelectorAll("button")).find(
-        (btn) => btn.textContent?.includes("Import Code")
-      );
-      if (importButton) {
-        await fireEvent.click(importButton);
-      }
-
-      expect(onImportCodeClick).toHaveBeenCalled();
-    });
-
-    it("should call onImportDesignClick when Import Design button is clicked", async () => {
-      const onImportDesignClick = vi.fn();
-      const { container } = render(() => (
-        <CortexChatPanel state="home" onImportDesignClick={onImportDesignClick} />
-      ));
-
-      const importButton = Array.from(container.querySelectorAll("button")).find(
-        (btn) => btn.textContent?.includes("Import Design")
-      );
-      if (importButton) {
-        await fireEvent.click(importButton);
-      }
-
-      expect(onImportDesignClick).toHaveBeenCalled();
-    });
-
-    it("should render logo image in home state", () => {
-      const { container } = render(() => <CortexChatPanel state="home" />);
-      const logo = container.querySelector("img");
-      expect(logo).toBeTruthy();
-      expect(logo?.getAttribute("src")).toBe("/assets/claude-logo.svg");
-    });
-
-    it("should render title as h1 with 56px font size", () => {
+    it("should render title as h1 with 32px font size", () => {
       const { container } = render(() => <CortexChatPanel state="home" />);
       const h1 = container.querySelector("h1");
       expect(h1).toBeTruthy();
-      expect(h1?.style.fontSize).toBe("56px");
+      expect(h1?.style.fontSize).toBe("32px");
       expect(h1?.style.fontWeight).toBe("500");
     });
 
-    it("should render subtitle as p element", () => {
-      const { container } = render(() => <CortexChatPanel state="home" />);
-      const subtitle = container.querySelector("p");
-      expect(subtitle).toBeTruthy();
-      expect(subtitle?.textContent).toBe("Start a conversation or open a project");
-    });
-
     it("should center content in home state", () => {
       const { container } = render(() => <CortexChatPanel state="home" />);
       const root = container.firstElementChild as HTMLElement;
@@ -276,7 +206,7 @@ describe("CortexChatPanel", () => {
   describe("Minimized State", () => {
     it("should render minimized state", () => {
       const { container } = render(() => <CortexChatPanel state="minimized" />);
-      expect(container.textContent).toContain("What would you like to build");
+      expect(container.textContent).toContain("What would you like to build?");
     });
 
     it("should render minimized title as h2", () => {
@@ -681,7 +611,7 @@ describe("CortexChatPanel", () => {
       const { container } = render(() => <CortexChatPanel />);
       const h1 = container.querySelector("h1");
       expect(h1).toBeTruthy();
-      expect(container.textContent).toContain("What would you like to build");
+      expect(container.textContent).toContain("Hey, start building or open your project.");
     });
   });
 
diff --git a/src/components/cortex/primitives/CortexInput.tsx b/src/components/cortex/primitives/CortexInput.tsx
diff --git a/src/components/cortex/primitives/__tests__/CortexInput.test.tsx b/src/components/cortex/primitives/__tests__/CortexInput.test.tsx
