feat: conditional style loading for v1/v2 (#3094)

Co-authored-by: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>

client/src/index.jsx

@@ -1,13 +1,16 @@
 import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
+import { Helmet } from "react-helmet";
 import { connect, Provider } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { Route, Switch, useHistory } from "react-router-dom";
+import { CompatRoute } from "react-router-dom-v5-compat";
 
 import "bootstrap";
 import "jquery";
 
 // Use our version of bootstrap, not the one in import 'bootstrap/dist/css/bootstrap.css';
-import "./styles/index.scss";
+import v1Styles from "./styles/index.scss?inline";
+import v2Styles from "./styles/indexV2.scss?inline";
 
 import App from "./App";
 // Disable service workers for the moment -- see below where registerServiceWorker is called
@@ -21,9 +24,9 @@ import { globalSchema, StateModel } from "./model";
 import { pollStatuspage } from "./statuspage";
 import { UserCoordinator } from "./user";
 import { validatedAppParams } from "./utils/context/appParams.utils";
+import useFeatureFlagSync from "./utils/feature-flags/useFeatureFlagSync.hook";
 import { Sentry } from "./utils/helpers/sentry";
 import { createCoreApiVersionedUrlConfig, Url } from "./utils/helpers/url";
-import useFeatureFlagSync from "./utils/feature-flags/useFeatureFlagSync.hook";
 
 const configFetch = fetch("/config.json");
 
@@ -60,6 +63,9 @@ configFetch.then((valuesRead) => {
     if (maintenance) {
       root.render(
         <Provider store={model.reduxStore}>
+          <Helmet>
+            <style type="text/css">{v1Styles}</style>
+          </Helmet>
           <Maintenance info={maintenance} />
         </Provider>
       );
@@ -103,6 +109,7 @@ configFetch.then((valuesRead) => {
           <AppErrorBoundary>
             <LoginHandler />
             <FeatureFlagHandler />
+            <StyleHandler />
             <VisibleApp
               client={client}
               coreApiVersionedUrlConfig={coreApiVersionedUrlConfig}
@@ -131,3 +138,20 @@ function FeatureFlagHandler() {
   useFeatureFlagSync();
   return null;
 }
+
+function StyleHandler() {
+  return (
+    <Switch>
+      <CompatRoute path="/v2">
+        <Helmet>
+          <style type="text/css">{v2Styles}</style>
+        </Helmet>
+      </CompatRoute>
+      <Route path="*">
+        <Helmet>
+          <style type="text/css">{v1Styles}</style>
+        </Helmet>
+      </Route>
+    </Switch>
+  );
+}

client/src/styles/bootstrap/_custom_bootstrap_variables2.0.scss

@@ -0,0 +1,109 @@
+// RENKU UI COLORS
+$rk-blue: #01192d;
+$rk-green: #00ffb0;
+$rk-green-highlight: #007a6c;
+$rk-pink: #ca4e86;
+$rk-pink-highlight: #aa2c61;
+$rk-yellow: #d1bb4c;
+$rk-dark: #3a3a3d; // titles
+$rk-text: #757575; // contrast ratio 4.6:1 bg white
+$rk-text-medium-light: #b3b3b3;
+$rk-text-light: #545863; // contrast ratio 7:1 bg white
+$rk-light: #e4e7ea; // borders
+$rk-border-input: #8b93a7; // contrast ratio 3:1 for background-0
+//backgrounds
+$rk-background-0: #f5f6fa;
+$rk-background-0-dark: #01192d;
+$rk-background-1: #ffffff;
+$rk-background-2: #f5f6fa;
+$rk-background-table: #ededf2;
+$rk-green-background: rgb(34, 53, 52);
+$rk-white: #ffffff;
+$rk-hover: #f9f9f9;
+$rk-hover-blue: #99a3ab; //from bootraps mix https://codepen.io/emdeoh/pen/zYOQOPB
+
+$rk-info: #0f7396;
+$rk-success: #84ffd9;
+$rk-danger: #b40a3c;
+$rk-warning: #d1bb4c;
+
+$rk-info-text: #0a4c63; // contrast ratio 7:1 for blue bg (#cfe3ea)
+$rk-success-text: #009568;
+$rk-danger-text: #b40a3c;
+$rk-warning-text: #7e6d20; // contrast ratio 4.5:1 for background
+$rk-dark-bg: #c5cbcf;
+
+$rk-danger-shadow: rgba(180, 10, 60, 0.5);
+$rk-table-border: #e4e7ea;
+
+$transparent: rgba(0, 0, 0, 0);
+
+// This will be added to the theme colors in custom_bootstrap
+$rk-colors: (
+  "rk-blue": $rk-blue,
+  "rk-yellow": $rk-yellow,
+  "rk-pink": $rk-pink,
+  "rk-green": $rk-green,
+  "rk-text": $rk-text,
+  "rk-text-light": $rk-text-light,
+  "rk-green-background": $rk-green-background,
+  "rk-white": $rk-white,
+  "rk-hover": $rk-hover,
+  "rk-danger-shadow": $rk-danger-shadow,
+  "rk-dark-bg": $rk-dark-bg,
+  "rk-background-0": $rk-background-0,
+  "rk-background-table": $rk-background-table,
+  "rk-border-input": $rk-border-input,
+);
+
+// We overwrite bootstraps variables
+$primary: $rk-blue;
+$secondary: $rk-green;
+$success: $rk-success;
+$info: $rk-info;
+$warning: $rk-warning;
+$danger: $rk-danger;
+$light: $rk-light;
+$dark: $rk-dark;
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+);
+
+$theme-colors: map-merge($theme-colors, $rk-colors);
+
+$enable-rounded: false;
+$input-bg: $rk-white;
+
+// Table styles
+$table-border-color: $rk-table-border;
+$table-bg: $transparent;
+
+// Body styles
+$body-bg: $rk-background-0;
+$body-color: $rk-dark;
+
+// Box shadow
+$rk-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+
+// Card styles
+$card-bg: $rk-white;
+
+// Font styles
+$font-family-base: "Inter", sans-serif;
+
+// Popover styles
+$popover-bg: $rk-white;
+
+// List styles
+$list-group-bg: $transparent;
+
+// Breadcumb styles
+$breadcrumb-divider: quote(">");

client/src/styles/indexV2.scss

@@ -0,0 +1,39 @@
+// -------------------       FONTS  -----------------------------
+
+@import "./fonts/fonts";
+
+// -------------------       BOOTSTRAP CONFIG  -----------------------------
+
+@import "./bootstrap/custom_bootstrap_variables2.0";
+@import "./bootstrap/custom_utilities";
+
+@import "~bootstrap/scss/bootstrap";
+@import "./bootstrap/custom_bootstrap";
+
+// -------------------       BOOTSTRAP EXT  -----------------------------
+
+@import "./bootstrap_ext/alert";
+@import "./bootstrap_ext/badge";
+@import "./bootstrap_ext/button";
+@import "./bootstrap_ext/nav";
+@import "./bootstrap_ext/nav_bar";
+@import "./bootstrap_ext/underline_pill_nav";
+
+// -------------------       EVERYTHING ELSE  -----------------------------
+
+@import "./components/bootstrap_icons";
+@import "./components/jupyter_notebook";
+@import "./components/renku_general";
+@import "./components/renku_home";
+@import "./components/renku_search";
+@import "./components/renku_files";
+@import "./components/renku_cards";
+@import "./components/renku_tree";
+@import "./components/input_tag";
+@import "./components/file_uploader";
+@import "./components/renku_styleguide";
+@import "./components/project_display";
+@import "./components/renku_form";
+@import "./components/renku_modals";
+
+@import "./icons/icons.scss";