add announcement banner (#945)

* add announcement banner

* update copy

Author: zixlin7

packages/dashboard-app/src/components/installs/modal/login/index.tsx

@@ -10,7 +10,7 @@ import Tab, { ProfileTab } from "./tabs";
 import { useLocalStateZodDefault } from "@/hooks/store/useState";
 import { z } from "zod";
 import { Link } from "@/components/ui/link";
-import { Q_MIGRATION_URL } from "@/lib/constants";
+import { KIRO_CLI_URL } from "@/lib/constants";
 import { useAuth, useAuthRequest, useRefreshAuth } from "@/hooks/store/useAuth";
 
 export default function LoginModal({ next }: { next: () => void }) {
@@ -191,10 +191,10 @@ export default function LoginModal({ next }: { next: () => void }) {
         {completedOnboarding && tab == "builderId" && (
           <div className="text-center flex flex-col">
             <div className="font-ember font-bold">
-              CodeWhisperer is now Amazon Q
+              Amazon Q Developer CLI users can now upgrade to the Kiro CLI
             </div>
-            <Link href={Q_MIGRATION_URL} className="text-sm">
-              Read the announcement blog post
+            <Link href={KIRO_CLI_URL} className="text-sm">
+              Learn more &gt;
             </Link>
           </div>
         )}

packages/dashboard-app/src/components/svg/logo.tsx

@@ -16,3 +16,26 @@ export default function Lockup({
     </Svg>
   );
 }
+
+export function KiroLogo({ size }: { size?: number }) {
+  return (
+    <Svg size={size} ratio={[45, 54]}>
+      <path
+        fill="white"
+        d="M8.07468 38.7532C2.79107 50.2061 14.0447 53.081 22.3452 46.378C24.7875 53.8935 33.934 48.2842 37.2223 42.4562C44.4533 29.6127 41.5322 16.5192 40.782 13.8162C35.642 -4.60537 9.9423 -4.63662 5.52067 13.9099C4.4831 17.1598 4.46714 20.8473 3.89249 24.6753C3.60516 26.6128 3.38169 27.8471 2.63145 29.8783C2.18449 31.0502 1.59388 32.0814 0.636126 33.8314C-0.832429 36.5501 -0.209889 41.7844 7.38829 39.0657L8.1066 38.7532H8.07468Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="black"
+        d="M23.335 21.8005C21.2279 21.8005 20.9087 19.3318 20.9087 17.8631C20.9087 16.535 21.1481 15.4881 21.611 14.8163C22.0101 14.2225 22.6007 13.9257 23.335 13.9257C24.0693 13.9257 24.7078 14.2225 25.1547 14.8319C25.6655 15.5194 25.9369 16.5662 25.9369 17.8631C25.9369 20.3318 24.9632 21.8005 23.351 21.8005H23.335Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="black"
+        d="M32.0025 21.8005C29.8954 21.8005 29.5762 19.3318 29.5762 17.8631C29.5762 16.535 29.8156 15.4881 30.2785 14.8163C30.6776 14.2225 31.2682 13.9257 32.0025 13.9257C32.7368 13.9257 33.3753 14.2225 33.8222 14.8319C34.333 15.5194 34.6044 16.5662 34.6044 17.8631C34.6044 20.3318 33.6307 21.8005 32.0184 21.8005H32.0025Z"
+      />
+    </Svg>
+  );
+}

packages/dashboard-app/src/index.css

@@ -72,6 +72,11 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+
+    /* Amazon Q Developer CLI upgrade banner colors */
+    --q-banner-bg: #262626;
+    --q-banner-border: #8e48ff;
+    --q-banner-link: #b07fff;
   }
 
   body {
@@ -107,6 +112,11 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
+
+    /* Amazon Q Developer CLI upgrade banner colors */
+    --q-banner-bg: #262626;
+    --q-banner-border: #8e48ff;
+    --q-banner-link: #b07fff;
   }
 }
 
@@ -140,7 +150,8 @@
   }
 
   .gradient-q-secondary-dark {
-    background: radial-gradient(
+    background:
+      radial-gradient(
         122.5% 122.5% at 0% 0%,
         #000000 0%,
         rgba(0, 0, 0, 0) 100%
@@ -162,6 +173,11 @@
       ),
       #301673;
   }
+
+  .q-banner {
+    background-color: var(--q-banner-bg);
+    border: 1px solid var(--q-banner-border);
+  }
 }
 
 /* Currently an issue with Linux webkit CSS variables */

packages/dashboard-app/src/lib/constants.ts

@@ -20,6 +20,7 @@ export const TELEMETRY_WIKI_URL =
   "https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/opt-out-IDE.html";
 export const Q_MIGRATION_URL =
   "https://docs.aws.amazon.com/codewhisperer/latest/userguide/whisper-legacy.html";
+export const KIRO_CLI_URL = "https://kiro.dev/cli";
 
 export const AMZN_START_URL = "https://amzn.awsapps.com/start";
 

packages/dashboard-app/src/pages/onboarding.tsx

@@ -2,9 +2,9 @@ import autocompleteDemo from "@assets/images/autocomplete_demo.gif";
 import translateDemo from "@assets/images/translate_demo.gif";
 import chatDemo from "@assets/images/chat_demo.gif";
 import { Link } from "@/components/ui/link";
-import { QLogo } from "@/components/svg/icons";
-import { AUTOCOMPLETE_SSH_WIKI_URL, Q_MIGRATION_URL } from "@/lib/constants";
+import { AUTOCOMPLETE_SSH_WIKI_URL, KIRO_CLI_URL } from "@/lib/constants";
 import { Terminal } from "@/components/ui/terminal";
+import { KiroLogo } from "@/components/svg/logo";
 
 export default function Page() {
   return (
@@ -14,20 +14,27 @@ export default function Page() {
           Getting started
         </h1>
       </div>
-      <section className="flex flex-col p-6 gap-4 w-full gradient-q-secondary-light-alt rounded-lg items-start text-white">
+      <section className="flex flex-col p-6 gap-4 w-full rounded-2xl items-start text-white q-banner">
         <div className="flex flex-row gap-4 w-full items-center">
-          <QLogo size={42} />
+          <div className="flex-shrink-0">
+            <KiroLogo size={60} />
+          </div>
           <div className="flex flex-col gap-1">
-            <h1 className="font-bold text-xl font-ember leading-none">
-              CodeWhisperer is now Amazon Q
+            <h1 className="font-bold text-lg font-ember leading-none">
+              Amazon Q Developer CLI users can now upgrade to the Kiro CLI
             </h1>
-            <p className="text-base leading-tight">
+            <p className="text-sm leading-tight">
+              The Kiro CLI leverages the agentic features of Q CLI and can be
+              used with your existing Q Developer subscription. If you have auto
+              updates enabled for the Q CLI, unless you disable that setting, Q
+              CLI will auto update to Kiro CLI on 11/24{" "}
               <Link
-                href={Q_MIGRATION_URL}
-                className="font-medium"
+                href={KIRO_CLI_URL}
+                className="font-medium no-underline"
                 variant="primary"
+                style={{ color: "var(--q-banner-link)" }}
               >
-                Read the announcement blog post
+                Learn more &gt;
               </Link>
             </p>
           </div>