diff --git a/client/public/dashboardV2header.png b/client/public/dashboardV2header.png new file mode 100644 index 0000000000..69a38afe89 Binary files /dev/null and b/client/public/dashboardV2header.png differ diff --git a/client/public/earlyAccessDark.png b/client/public/earlyAccessDark.png new file mode 100644 index 0000000000..16a16e4e28 Binary files /dev/null and b/client/public/earlyAccessDark.png differ diff --git a/client/public/earlyAccessDark.svg b/client/public/earlyAccessDark.svg new file mode 100644 index 0000000000..847674b21b --- /dev/null +++ b/client/public/earlyAccessDark.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/static/public/img/earlyAccessDark.png b/client/public/static/public/img/earlyAccessDark.png new file mode 100644 index 0000000000..16a16e4e28 Binary files /dev/null and b/client/public/static/public/img/earlyAccessDark.png differ diff --git a/client/public/static/public/img/earlyAccessDark.svg b/client/public/static/public/img/earlyAccessDark.svg new file mode 100644 index 0000000000..847674b21b --- /dev/null +++ b/client/public/static/public/img/earlyAccessDark.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/static/public/img/earlyAccessLight.svg b/client/public/static/public/img/earlyAccessLight.svg new file mode 100644 index 0000000000..39d50a6846 --- /dev/null +++ b/client/public/static/public/img/earlyAccessLight.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/static/public/img/renku2.0Logo.svg b/client/public/static/public/img/renku2.0Logo.svg new file mode 100644 index 0000000000..62ddeebd4f --- /dev/null +++ b/client/public/static/public/img/renku2.0Logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/client/public/static/public/img/renku2.0LogoDark.svg b/client/public/static/public/img/renku2.0LogoDark.svg new file mode 100644 index 0000000000..1c74c82a32 --- /dev/null +++ b/client/public/static/public/img/renku2.0LogoDark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/client/src/App.jsx b/client/src/App.jsx index 9886cd918e..bd2303af46 100644 --- a/client/src/App.jsx +++ b/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"; @@ -267,6 +268,7 @@ function App(props) { + ; + + return ; +} + +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 = ( + + Try it out + + ); + + return ( + + +
+ Small image +
+
+ Full image +
+
+ Renku 2.0 +
EARLY ACCESS!
+
+
+ {callToActionBtn} + + Learn more + +
+ + + ); +} diff --git a/client/src/components/navbar/NavBarItems.tsx b/client/src/components/navbar/NavBarItems.tsx index 0323654b50..4f84d21320 100644 --- a/client/src/components/navbar/NavBarItems.tsx +++ b/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((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,17 +340,26 @@ export function RenkuToolbarItemUser({ - {renku10Enabled && ( + {isV2 && ( <> - - - Renku 2.0 - - Renku 2.0 Settings + Integrations + + + + Back Renku 1.0 + + + )} + + {!isV2 && ( + <> + + + Renku 2.0 Early access )} diff --git a/client/src/features/connectedServices/ConnectedServicesPage.tsx b/client/src/features/connectedServices/ConnectedServicesPage.tsx index 9a6a4ad29f..f73355938f 100644 --- a/client/src/features/connectedServices/ConnectedServicesPage.tsx +++ b/client/src/features/connectedServices/ConnectedServicesPage.tsx @@ -94,7 +94,8 @@ export default function ConnectedServicesPage() { return (
-

Connected services

+

Integrations

+

These integrations are only supported in Renku 2.0

{content}
); diff --git a/client/src/features/dashboardV2/DashboardV2.module.scss b/client/src/features/dashboardV2/DashboardV2.module.scss index b5d373eaae..88bd5b80c9 100644 --- a/client/src/features/dashboardV2/DashboardV2.module.scss +++ b/client/src/features/dashboardV2/DashboardV2.module.scss @@ -6,18 +6,14 @@ .DashboardHeader { height: auto; +} - img { - height: 150px; - - @include media-breakpoint-up(md) { - height: 180px; - } - - @include media-breakpoint-up(lg) { - height: 130px; - } - } +.DashboardHeaderImg { + height: 150px; + background-image: url("/dashboardV2header.png"); + background-size: cover; + background-position: top center; + overflow: hidden; } .AnonymousAvatar { diff --git a/client/src/features/dashboardV2/DashboardV2.tsx b/client/src/features/dashboardV2/DashboardV2.tsx index 0714e93063..0a7579a552 100644 --- a/client/src/features/dashboardV2/DashboardV2.tsx +++ b/client/src/features/dashboardV2/DashboardV2.tsx @@ -115,36 +115,13 @@ function HeaderDashboard() { className={cx( DashboardStyles.DashboardHeader, "position-absolute", - "w-100" + "w-100", + "bg-navy" )} > - - - - - - - Dashboard Header - +
); } diff --git a/client/src/features/projectsV2/shared/WipBadge.module.scss b/client/src/features/projectsV2/shared/WipBadge.module.scss new file mode 100644 index 0000000000..c138afa027 --- /dev/null +++ b/client/src/features/projectsV2/shared/WipBadge.module.scss @@ -0,0 +1,3 @@ +.EarlyAccessBadge { + background-color: #ca4e86 !important; +} diff --git a/client/src/features/projectsV2/shared/WipBadge.tsx b/client/src/features/projectsV2/shared/WipBadge.tsx index 99fcbc38ef..8e6b78be0f 100644 --- a/client/src/features/projectsV2/shared/WipBadge.tsx +++ b/client/src/features/projectsV2/shared/WipBadge.tsx @@ -16,9 +16,10 @@ * limitations under the License */ -import { ReactNode, useRef } from "react"; import cx from "classnames"; +import { ReactNode, useRef } from "react"; import { Badge, UncontrolledTooltip } from "reactstrap"; +import styles from "./WipBadge.module.scss"; interface WipBadeProps { className?: string; @@ -28,16 +29,16 @@ interface WipBadeProps { export default function WipBadge({ className, - children = "Beta", - tooltip = "Renku 2.0 is under active development and features may not work as expected.", + children = "2 .0 Early access", + tooltip = "The platform is stable, but some core features are still being developed and will be added soon.", }: WipBadeProps) { const ref = useRef(null); return ( <> {children} diff --git a/client/src/features/rootV2/NavbarV2.tsx b/client/src/features/rootV2/NavbarV2.tsx index 6c2e56767b..6a336a68c5 100644 --- a/client/src/features/rootV2/NavbarV2.tsx +++ b/client/src/features/rootV2/NavbarV2.tsx @@ -49,7 +49,7 @@ import { PROJECT_CREATION_HASH } from "../projectsV2/new/createProjectV2.constan import BackToV1Button from "../projectsV2/shared/BackToV1Button"; import WipBadge from "../projectsV2/shared/WipBadge"; -const RENKU_ALPHA_LOGO = "/static/public/img/logo-yellow.svg"; +const RENKU_ALPHA_LOGO = "/static/public/img/logo.svg"; function NavbarItemPlus() { const [isOpen, setIsOpen] = useState(false); @@ -162,7 +162,9 @@ export default function NavbarV2() { > Renku v2 (beta) - 2.0 Beta + + 2.0 Early access +
diff --git a/client/src/utils/constants/Docs.js b/client/src/utils/constants/Docs.js index 644805a689..480938e0e7 100644 --- a/client/src/utils/constants/Docs.js +++ b/client/src/utils/constants/Docs.js @@ -46,6 +46,7 @@ const Links = { EPFL: "https://www.epfl.ch/en/", ETHZ: "https://ethz.ch/en.html", RENKU_BLOG: "https://blog.renkulab.io", + RENKU_2_LEARN_MORE: "https://blog.renkulab.io/early-access", }; const GitlabLinks = {