Update product icon (gitpod-io#19315)

components/dashboard/src/app/AppLoading.tsx

@@ -6,8 +6,8 @@
 
 import { FunctionComponent, useEffect, useState } from "react";
 import { Heading3, Subheading } from "../components/typography/headings";
-import gitpodIcon from "../icons/gitpod.svg";
 import { Delayed } from "@podkit/loading/Delayed";
+import { ProductLogo } from "../components/ProductLogo";
 
 function useDelay(wait: number) {
     const [done, setDone] = useState(false);
@@ -25,7 +25,7 @@ export const AppLoading: FunctionComponent = () => {
     return (
         <Delayed wait={3000}>
             <div className="flex flex-col justify-center items-center w-full h-screen space-y-4">
-                <img src={gitpodIcon} alt="Gitpod's logo" className={"h-16 flex-shrink-0 animate-fade-in"} />
+                <ProductLogo className={"h-16 flex-shrink-0 animate-fade-in"} />
                 {connectionProblems ? (
                     <Heading3 className={done ? "" : "invisible"}>This is taking longer than it should</Heading3>
                 ) : (

components/dashboard/src/components/ProductLogo.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2024 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useContext } from "react";
+import { useIsDataOps } from "../data/featureflag-query";
+import { ThemeContext } from "../theme-context";
+import gitpodIcon from "../icons/gitpod.svg";
+import dataOpsIconLight from "../icons/dataops-light.svg";
+import dataOpsIconDark from "../icons/dataops-dark.svg";
+
+export function ProductLogo(props: { className: string }) {
+    const { isDark } = useContext(ThemeContext);
+    const isDataOps = useIsDataOps();
+    return (
+        <>
+            {isDataOps ? (
+                <img src={isDark ? dataOpsIconDark : dataOpsIconLight} alt="Dataops logo" className={props.className} />
+            ) : (
+                <img src={gitpodIcon} alt="Gitpod's logo" className={props.className} />
+            )}
+        </>
+    );
+}