feat: apply early access changes

client/src/App.jsx

@@ -32,10 +32,11 @@ import { CompatRoute } from "react-router-dom-v5-compat";
 import { ToastContainer } from "react-toastify";
 
 import { LoginHelper } from "./authentication";
+import { DashboardBanner } from "./components/earlyAccessBanner/EarlyAccessBanner";
 import { Loader } from "./components/Loader";
+import LazyDatasetAddToProject from "./dataset/addtoproject/LazyDatasetAddToProject";
 import { DatasetCoordinator } from "./dataset/Dataset.state";
 import LazyShowDataset from "./dataset/LazyShowDataset";
-import LazyDatasetAddToProject from "./dataset/addtoproject/LazyDatasetAddToProject";
 import LazyAdminPage from "./features/admin/LazyAdminPage";
 import LazyDashboard from "./features/dashboard/LazyDashboard";
 import { Favicon } from "./features/favicon/Favicon";
@@ -266,6 +267,7 @@ function App(props) {
   return (
     <Fragment>
       <Favicon />
+      <DashboardBanner user={props.user} />
       <RenkuNavBar {...props} notifications={notifications} />
       <CentralContentContainer
         notifications={notifications}

client/src/components/earlyAccessBanner/EarlyAccessBanner.module.scss

@@ -0,0 +1,7 @@
+.EarlyAccessBannerBtn {
+  &:hover,
+  &:active {
+    background-color: var(--bs-rk-green) !important;
+    color: var(--bs-white) !important;
+  }
+}

client/src/components/earlyAccessBanner/EarlyAccessBanner.tsx

@@ -0,0 +1,154 @@
+/*!
+ * Copyright 2025 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import { useLocation } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
+import { Alert, Container } from "reactstrap";
+import { Links } from "../../utils/constants/Docs.js";
+import { Url } from "../../utils/helpers/url";
+import style from "./EarlyAccessBanner.module.scss";
+
+const BANNER_DARK_IMG = "/static/public/img/earlyAccessDark.svg";
+const BANNER_LIGHT_IMG = "/static/public/img/earlyAccessLight.svg";
+const LOGO_V2 = "/static/public/img/renku2.0Logo.svg";
+const LOGO_V2_DARK = "/static/public/img/renku2.0LogoDark.svg";
+
+interface EarlyAccessBannerProps {
+  theme: "dark" | "light";
+}
+
+export function DashboardBanner({ user }: { user: { logged: boolean } }) {
+  const location = useLocation();
+
+  if (location.pathname !== Url.get(Url.pages.landing)) return null;
+
+  if (user.logged) return <EarlyAccessBanner theme="light" />;
+
+  return <EarlyAccessBanner theme="dark" />;
+}
+
+export function EarlyAccessBanner({ theme }: EarlyAccessBannerProps) {
+  const themeAssets = {
+    light: {
+      btnStyles: ["bg-rk-blue", "text-rk-white"],
+      bannerStyles: ["bg-white", "text-rk-blue"],
+      dotsImgUrl: BANNER_LIGHT_IMG,
+      logoImgUrl: LOGO_V2_DARK,
+      linkStyle: "text-rk-blue",
+    },
+    dark: {
+      btnStyles: ["bg-white", "text-rk-blue"],
+      bannerStyles: ["bg-rk-blue", "text-rk-white"],
+      dotsImgUrl: BANNER_DARK_IMG,
+      logoImgUrl: LOGO_V2,
+      linkStyle: "text-white",
+    },
+  };
+
+  const callToActionBtn = (
+    <Link
+      to="/v2"
+      className={cx(
+        "btn",
+        themeAssets[theme].btnStyles,
+        style.EarlyAccessBannerBtn
+      )}
+      rel="noreferrer noopener"
+    >
+      Try it out
+    </Link>
+  );
+
+  return (
+    <Alert
+      className={cx(
+        "border-start-0",
+        "border-end-0",
+        "border-top-0",
+        "border-button-1",
+        "border-white",
+        "rounded-0",
+        "mb-0",
+        "py-3",
+        themeAssets[theme].bannerStyles
+      )}
+      fade={false}
+    >
+      <Container
+        className={cx(
+          "w-100",
+          "d-flex",
+          "justify-content-between",
+          "align-items-center"
+        )}
+      >
+        <div className="d-none d-sm-block d-lg-none">
+          <img
+            src={themeAssets[theme].dotsImgUrl}
+            className={cx("img-fluid", "object-fit-cover")}
+            style={{ width: "83px", height: "50px" }}
+            alt="Small image"
+          />
+        </div>
+        <div className="d-none d-lg-block">
+          <img
+            src={themeAssets[theme].dotsImgUrl}
+            className="img-fluid"
+            alt="Full image"
+            style={{ height: "50px" }}
+          />
+        </div>
+        <div
+          className={cx(
+            "d-flex",
+            "gap-3",
+            "align-items-center",
+            "flex-column",
+            "flex-md-row"
+          )}
+        >
+          <img
+            src={themeAssets[theme].logoImgUrl}
+            alt="Renku 2.0"
+            height="25"
+          />
+          <h5 className="mt-1 mb-0">EARLY ACCESS!</h5>
+        </div>
+        <div
+          className={cx(
+            "d-flex",
+            "gap-3",
+            "align-items-center",
+            "flex-column",
+            "flex-md-row"
+          )}
+        >
+          {callToActionBtn}
+          <Link
+            to={Links.RENKU_2_LEARN_MORE}
+            className={themeAssets[theme].linkStyle}
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Learn more
+          </Link>
+        </div>
+      </Container>
+    </Alert>
+  );
+}

client/src/components/navbar/NavBarItems.tsx

@@ -39,7 +39,6 @@ import { User } from "../../model/renkuModels.types";
 import NotificationsMenu from "../../notifications/NotificationsMenu";
 import { Docs, Links, RenkuPythonDocs } from "../../utils/constants/Docs";
 import type { AppParams } from "../../utils/context/appParams.types";
-import useAppSelector from "../../utils/customHooks/useAppSelector.hook";
 import useLegacySelector from "../../utils/customHooks/useLegacySelector.hook";
 import {
   getActiveProjectPathWithNamespace,
@@ -49,8 +48,8 @@ import { ExternalDocsLink, ExternalLink } from "../ExternalLinks";
 import { Loader } from "../Loader";
 import BootstrapGitLabIcon from "../icons/BootstrapGitLabIcon";
 
-import styles from "./NavBarItem.module.scss";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
+import styles from "./NavBarItem.module.scss";
 
 export function RenkuToolbarItemPlus() {
   const location = useLocation();
@@ -291,8 +290,6 @@ export function RenkuToolbarItemUser({
 }: RenkuToolbarItemUserProps) {
   const user = useLegacySelector<User>((state) => state.stateModel.user);
 
-  const { renku10Enabled } = useAppSelector(({ featureFlags }) => featureFlags);
-
   const gatewayURL = params.GATEWAY_URL;
   const uiserverURL = params.UISERVER_URL;
   const redirect_url = encodeURIComponent(params.BASE_URL);
@@ -343,20 +340,18 @@ export function RenkuToolbarItemUser({
 
         <AdminDropdownItem />
 
-        {renku10Enabled && (
-          <>
-            <DropdownItem divider />
-            <Link to={ABSOLUTE_ROUTES.v2.root} className="dropdown-item">
-              Renku 2.0
-            </Link>
-            <Link
-              to={ABSOLUTE_ROUTES.v2.connectedServices}
-              className="dropdown-item"
-            >
-              Renku 2.0 Settings
-            </Link>
-          </>
-        )}
+        <>
+          <DropdownItem divider />
+          <Link to={ABSOLUTE_ROUTES.v2.root} className="dropdown-item">
+            Renku <span className="fw-bold">2.0</span> Early access
+          </Link>
+          <Link
+            to={ABSOLUTE_ROUTES.v2.connectedServices}
+            className="dropdown-item"
+          >
+            Integrations
+          </Link>
+        </>
 
         <DropdownItem divider />
         <a

client/src/features/connectedServices/ConnectedServicesPage.tsx

@@ -94,7 +94,7 @@ export default function ConnectedServicesPage() {
 
   return (
     <div data-cy="connected-services-page">
-      <h1>Connected services</h1>
+      <h1>Integrations</h1>
       {content}
     </div>
   );

client/src/features/dashboardV2/DashboardV2.module.scss

@@ -9,6 +9,7 @@
 
   img {
     height: 150px;
+    object-position: top;
 
     @include media-breakpoint-up(md) {
       height: 180px;

client/src/features/dashboardV2/DashboardV2.tsx

@@ -115,36 +115,17 @@ function HeaderDashboard() {
       className={cx(
         DashboardStyles.DashboardHeader,
         "position-absolute",
-        "w-100"
+        "w-100",
+        "bg-navy"
       )}
     >
-      <picture>
-        <source
-          media="(min-width: 1400px)"
-          srcSet="/dashboardHeader3840x280.png"
-        />
-        <source
-          media="(min-width: 1200px)"
-          srcSet="/dashboardHeader2560x280.png"
-        />
-        <source
-          media="(min-width: 992px)"
-          srcSet="/dashboardHeader1920x280.png"
-        />
-        <source
-          media="(min-width: 768px)"
-          srcSet="/dashboardHeader1080x280.png"
-        />
-        <source
-          media="(min-width: 576px)"
-          srcSet="/dashboardHeader750x200.png"
-        />
+      <div className="container-xxl">
         <img
-          src="/dashboardHeader640x200.png"
+          src="/dashboardV2header.png"
           alt="Dashboard Header"
           className={cx("img-fluid", "w-100", "object-fit-cover")}
         />
-      </picture>
+      </div>
     </div>
   );
 }

client/src/features/projectsV2/shared/WipBadge.module.scss

@@ -0,0 +1,3 @@
+.EarlyAccessBadge {
+  background-color: #ca4e86 !important;
+}