minor improvements

Author: Siddhant-K-code

components/dashboard/src/AppNotifications.tsx

@@ -20,6 +20,8 @@ import { useOrgBillingMode } from "./data/billing-mode/org-billing-mode-query";
 import { Organization } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { MaintenanceModeBanner } from "./org-admin/MaintenanceModeBanner";
 import { MaintenanceNotificationBanner } from "./org-admin/MaintenanceNotificationBanner";
+import { useToast } from "./components/toasts/Toasts";
+import { getPrimaryEmail } from "@gitpod/public-api-common/lib/user-utils";
 import onaWordmark from "./images/ona-wordmark.svg";
 
 const KEY_APP_DISMISSED_NOTIFICATIONS = "gitpod-app-notifications-dismissed";
@@ -129,36 +131,84 @@ const INVALID_BILLING_ADDRESS = (stripePortalUrl: string | undefined) => {
     } as Notification;
 };
 
-const GITPOD_CLASSIC_SUNSET = {
-    id: "gitpod-classic-sunset",
-    type: "info" as AlertType,
-    message: (
-        <span className="text-md text-white font-semibold items-center justify-center">
-            Meet <img src={onaWordmark} alt="Ona" className="inline align-middle w-12 mb-0.5" draggable="false" /> | the
-            privacy-first software engineering agent |{" "}
-            <a href="https://ona.com/" target="_blank" rel="noreferrer" className="underline hover:no-underline">
-                Get early access
-            </a>
-        </span>
-    ),
-} as Notification;
+const GITPOD_CLASSIC_SUNSET = (
+    user: User | undefined,
+    toast: any,
+    onaClicked: boolean,
+    handleOnaBannerClick: () => void,
+) => {
+    return {
+        id: "gitpod-classic-sunset",
+        type: "info" as AlertType,
+        message: (
+            <span className="text-md text-white font-semibold items-center justify-center">
+                Meet <img src={onaWordmark} alt="Ona" className="inline align-middle w-12 mb-0.5" draggable="false" /> |
+                the privacy-first software engineering agent |{" "}
+                {!onaClicked ? (
+                    <button
+                        onClick={handleOnaBannerClick}
+                        className="underline hover:no-underline cursor-pointer bg-transparent border-none text-white font-semibold"
+                    >
+                        Get early access
+                    </button>
+                ) : (
+                    <a
+                        href="https://www.gitpod.io/solutions/ai"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="underline hover:no-underline"
+                    >
+                        Learn more
+                    </a>
+                )}
+            </span>
+        ),
+    } as Notification;
+};
 
 export function AppNotifications() {
     const [topNotification, setTopNotification] = useState<Notification | undefined>(undefined);
+    const [onaClicked, setOnaClicked] = useState(false);
     const { user, loading } = useUserLoader();
     const { mutateAsync } = useUpdateCurrentUserMutation();
+    const { toast } = useToast();
 
     const currentOrg = useCurrentOrg().data;
     const { data: billingMode } = useOrgBillingMode();
 
+    useEffect(() => {
+        const storedOnaData = localStorage.getItem("ona-banner-data");
+        if (storedOnaData) {
+            const { clicked } = JSON.parse(storedOnaData);
+            setOnaClicked(clicked || false);
+        }
+    }, []);
+
+    const handleOnaBannerClick = useCallback(() => {
+        const userEmail = user ? getPrimaryEmail(user) || "" : "";
+        trackEvent("waitlist_joined", { email: userEmail, feature: "Ona" });
+
+        setOnaClicked(true);
+        const existingData = localStorage.getItem("ona-banner-data");
+        const parsedData = existingData ? JSON.parse(existingData) : {};
+        localStorage.setItem("ona-banner-data", JSON.stringify({ ...parsedData, clicked: true }));
+
+        toast(
+            <div>
+                <div className="font-medium">You're on the waitlist</div>
+                <div className="text-sm opacity-80">We'll reach out to you soon.</div>
+            </div>,
+        );
+    }, [user, toast]);
+
     useEffect(() => {
         let ignore = false;
 
         const updateNotifications = async () => {
             const notifications = [];
             if (!loading) {
                 if (isGitpodIo()) {
-                    notifications.push(GITPOD_CLASSIC_SUNSET);
+                    notifications.push(GITPOD_CLASSIC_SUNSET(user, toast, onaClicked, handleOnaBannerClick));
                 }
 
                 if (
@@ -192,7 +242,7 @@ export function AppNotifications() {
         return () => {
             ignore = true;
         };
-    }, [loading, mutateAsync, user, currentOrg, billingMode]);
+    }, [loading, mutateAsync, user, currentOrg, billingMode, onaClicked, handleOnaBannerClick, toast]);
 
     const dismissNotification = useCallback(() => {
         if (!topNotification) {

components/dashboard/src/Login.tsx

@@ -389,16 +389,16 @@ const RightProductDescriptionPanel = () => {
                 </div>
 
                 <div className="flex flex-col gap-4 flex-1">
-                    <h2 className="text-white text-2xl font-bold leading-tight text-center max-w-sm mx-auto">
+                    <h2 className="text-white text-xl font-bold leading-tight text-center max-w-sm mx-auto">
                         Meet Ona - the privacy-first software engineering agent.
                     </h2>
 
                     <div className="space-y-3 mt-4">
-                        <p className="text-white/70 text-xl">
+                        <p className="text-white/70 text-base">
                             Delegate software tasks to Ona. It writes code, runs tests, and opens a pull request. Or
                             jump in to inspect output or pair program in your IDE.
                         </p>
-                        <p className="text-white/70 text-xl mt-2">
+                        <p className="text-white/70 text-base mt-2">
                             Ona runs inside your infrastructure (VPC), with full audit trails, zero data exposure, and
                             support for any LLM.
                         </p>

components/dashboard/src/OnaRightPanel.tsx

@@ -103,7 +103,9 @@ export const OnaRightPanel = () => {
                             </form>
                         ) : (
                             <button
-                                onClick={() => window.open("https://ona.com/", "_blank", "noopener,noreferrer")}
+                                onClick={() =>
+                                    window.open("https://www.gitpod.io/solutions/ai", "_blank", "noopener,noreferrer")
+                                }
                                 className="w-full bg-white/20 backdrop-blur-sm text-white font-medium py-2.5 px-4 rounded-lg hover:bg-white/30 transition-colors border border-white/20 inline-flex items-center justify-center gap-2 text-sm"
                             >
                                 Learn more

components/dashboard/src/start/OnaBanner.tsx

@@ -91,14 +91,14 @@ export const OnaBanner: React.FC<OnaBannerProps> = ({ compact = false }) => {
                     <img src={onaWordmark} alt="ONA" className="w-12" draggable="false" />
                 </div>
 
-                <p className="text-white !text-lg font-bold leading-tight text-left">
+                <p className="text-white text-base font-semibold leading-tight text-left">
                     The privacy-first software engineering agent
                 </p>
 
                 {!onaClicked ? (
                     <button
                         onClick={handleOnaBannerClick}
-                        className="bg-white/20 backdrop-blur-sm text-white font-medium py-1.5 px-4 rounded-full hover:bg-white/30 transition-colors border border-white/20 inline-flex items-center gap-2 text-sm w-fit"
+                        className="bg-white/20 backdrop-blur-sm text-white font-medium py-1 px-3 rounded-full hover:bg-white/30 transition-colors border border-white/20 inline-flex items-center gap-2 text-sm w-fit"
                     >
                         {onaBanner.ctaText}
                         <span className="font-bold">→</span>
@@ -108,7 +108,7 @@ export const OnaBanner: React.FC<OnaBannerProps> = ({ compact = false }) => {
                         href={onaBanner.link}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="bg-white/20 backdrop-blur-sm text-white font-medium py-1.5 px-4 rounded-full hover:bg-white/30 transition-colors border border-white/20 inline-flex items-center gap-2 text-sm w-fit"
+                        className="bg-white/20 backdrop-blur-sm text-white font-medium py-1 px-3 rounded-full hover:bg-white/30 transition-colors border border-white/20 inline-flex items-center gap-2 text-sm w-fit"
                     >
                         {onaBanner.learnMoreText}
                         <span className="font-bold">→</span>

components/dashboard/src/workspaces/BlogBanners.tsx

@@ -17,7 +17,7 @@ const onaBanner = {
     subtitle: "The privacy-first software engineering agent.",
     ctaText: "Get early access",
     learnMoreText: "Learn more",
-    link: "https://ona.com/",
+    link: "https://www.gitpod.io/solutions/ai",
 };
 
 export const OnaBanner: React.FC = () => {

components/dashboard/src/workspaces/Workspaces.tsx

@@ -34,7 +34,7 @@ import { useUserLoader } from "../hooks/use-user-loader";
 import { ReactComponent as GitpodStrokedSVG } from "../icons/gitpod-stroked.svg";
 import { VideoSection } from "../onboarding/VideoSection";
 import { OrganizationJoinModal } from "../teams/onboarding/OrganizationJoinModal";
-import { BlogBanners } from "./BlogBanners";
+// import { BlogBanners } from "./BlogBanners";
 import { EmptyWorkspacesContent } from "./EmptyWorkspacesContent";
 import PersonalizedContent from "./PersonalizedContent";
 import { VideoCarousel } from "./VideoCarousel";
@@ -504,7 +504,8 @@ const WorkspacesPage: FunctionComponent = () => {
                                         </div>
                                     </div>
                                     <PersonalizedContent />
-                                    <BlogBanners />
+                                    {/* Uncomment the following, if you need side banners in future */}
+                                    {/* <BlogBanners /> */}
                                 </div>
                             )}
                         </div>