update onboarding banner and volume icon

Author: zixlin7

crates/fig_desktop/icons/VolumeIcon.png

@@ -452,12 +452,20 @@ export default function LoginModal({ next }: { next: () => void }) {
           </h2>
         )}
         {completedOnboarding && tab == "builderId" && (
-          <div className="text-center flex flex-col">
+          <div
+            className="text-center flex flex-col p-4"
+            style={{
+              backgroundColor: "var(--banner-bg)",
+              border: "1px solid var(--banner-border)",
+              borderRadius: "var(--banner-radius)",
+            }}
+          >
             <div className="font-ember font-bold">
-              {PREVIOUS_PRODUCT_NAME} is now {PRODUCT_NAME}
+              {PREVIOUS_PRODUCT_NAME} CLI is now {PRODUCT_NAME} CLI
             </div>
+            All existing features remain unchanged.{" "}
             <Link href={Q_MIGRATION_URL} className="text-sm">
-              Read the announcement blog post
+              Learn more
             </Link>
           </div>
         )}

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

@@ -140,10 +140,25 @@ export function Keybindings({ size }: { size?: number }) {
   );
 }
 
-export function QLogo({ size }: { size?: number }) {
+export function Logo({ size }: { size?: number }) {
   return (
-    <Svg size={size}>
-      <D path="M12.763 22.8533C12.665 22.9083 12.3961 23 12 23C11.6039 23 11.3329 22.9083 11.237 22.8533L2.76298 18.0724C2.41276 17.8748 2 17.1741 2 16.7809V7.21907C2 6.82389 2.41276 6.12518 2.76298 5.92759L11.237 1.14667C11.335 1.09167 11.6039 1 12 1C12.3961 1 12.6671 1.09167 12.763 1.14667L21.237 5.92759C21.5872 6.12518 22 6.82593 22 7.21907V16.4652L14.0846 12V11.118C14.0846 10.9367 13.9846 10.7676 13.8241 10.678L12.2606 9.79593C12.1793 9.75111 12.0896 9.7287 12 9.7287C11.9104 9.7287 11.8207 9.75111 11.7394 9.79593L10.1759 10.678C10.0154 10.7696 9.91536 10.9367 9.91536 11.118V12.882C9.91536 13.0633 10.0154 13.2324 10.1759 13.322L11.7394 14.2041C11.8207 14.2489 11.9104 14.2713 12 14.2713C12.0896 14.2713 12.1793 14.2489 12.2606 14.2041L13.0423 13.762L20.9577 18.2272L12.763 22.8493V22.8533Z" />
+    <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/components/svg/icons.tsx

@@ -72,6 +72,9 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+    --banner-bg: #262626;
+    --banner-border: #C6A0FF;
+    --banner-radius: 13px;
   }
 
   body {

packages/dashboard-app/src/index.css

@@ -2,7 +2,7 @@ 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 { Logo } from "@/components/svg/icons";
 import {
   AUTOCOMPLETE_SSH_WIKI_URL,
   Q_MIGRATION_URL,
@@ -19,20 +19,28 @@ 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 items-start text-white"
+        style={{
+          backgroundColor: "var(--banner-bg)",
+          border: "1px solid var(--banner-border)",
+          borderRadius: "var(--banner-radius)",
+        }}
+      >
         <div className="flex flex-row gap-4 w-full items-center">
-          <QLogo size={42} />
+          <Logo size={42} />
           <div className="flex flex-col gap-1">
             <h1 className="font-bold text-xl font-ember leading-none">
-              {PREVIOUS_PRODUCT_NAME} is now {PRODUCT_NAME}
+              {PREVIOUS_PRODUCT_NAME} CLI is now {PRODUCT_NAME} CLI
             </h1>
             <p className="text-base leading-tight">
+              All existing features remain unchanged.{" "}
               <Link
                 href={Q_MIGRATION_URL}
                 className="font-medium"
                 variant="primary"
               >
-                Read the announcement blog post
+                Learn more
               </Link>
             </p>
           </div>