Design changes for Renku 2.0

client/.eslintrc.json

@@ -100,6 +100,7 @@
           "azureblob",
           "backend",
           "beforeunload",
+          "blockquote",
           "bioconductor",
           "bool",
           "booleans",
@@ -114,6 +115,7 @@
           "ciyer",
           "ckeditor",
           "cktextarea",
+          "clearfix",
           "cloudstorage",
           "codegen",
           "codemirror",
@@ -200,11 +202,13 @@
           "papermill",
           "pathname",
           "pdfjs",
+          "plaintext",
           "poller",
           "popups",
           "prepend",
           "presentational",
           "profiler",
+          "progressbar",
           "proxying",
           "Pupikofer",
           "pygments",

client/.storybook/preview.tsx

@@ -9,7 +9,7 @@ import { DEFAULT_APP_PARAMS } from "../src/utils/context/appParams.constants";
 import { createStore } from "../src/utils/helpers/EnhancedState";
 import { createCoreApiVersionedUrlConfig } from "../src/utils/helpers/url";
 
-import "../src/styles/index.scss";
+import "../src/styles/renku_bootstrap.scss";
 
 // This how the documentation recommends introducing the store into storybook
 // https://storybook.js.org/addons/@dreamworld/addon-redux/

client/package.json

@@ -42,7 +42,7 @@
     "@renku/ckeditor5-build-renku": "0.0.6",
     "@sentry/react": "^7.81.1",
     "ajv": "^6.12.6",
-    "bootstrap": "^5.3.0",
+    "bootstrap": "^5.3.3",
     "classnames": "^2.3.2",
     "cookieconsent": "^3.1.1",
     "d3": "^7.9.0",

client/src/App.jsx

@@ -260,8 +260,8 @@ function App(props) {
   const user = useLegacySelector((state) => state.stateModel.user);
   if (!user?.fetched && user?.fetching) {
     return (
-      <section className="jumbotron-header rounded px-3 px-sm-4 py-3 py-sm-5 text-center mb-3">
-        <h3 className="text-center text-primary">Checking user data</h3>
+      <section className="py-5">
+        <h3 className="text-center">Checking user data</h3>
         <Loader />
       </section>
     );

client/src/components/Alert.jsx

@@ -21,16 +21,15 @@
  *  Alert.js
  *  Alert code and presentation.
  */
-
+import cx from "classnames";
 import { Component } from "react";
 import { Alert } from "reactstrap";
 
 import {
-  WarningIcon,
-  DangerIcon,
-  InfoIcon,
-  SuccessIcon,
-} from "./icons/AlertIcon.tsx";
+  CheckCircleFill,
+  ExclamationTriangleFill,
+  InfoCircleFill,
+} from "react-bootstrap-icons";
 
 /**
  * Display a alert that can be dismissed.
@@ -86,13 +85,13 @@ class RenkuAlert extends Component {
 
   getIcon() {
     const icon = {
-      danger: <DangerIcon className="text-danger" />,
-      info: <InfoIcon className="text-info" />,
-      warning: <WarningIcon className="text-warning" />,
-      success: <SuccessIcon className="text-success" />,
+      danger: <ExclamationTriangleFill className={cx("bi", "text-danger")} />,
+      info: <InfoCircleFill className={cx("bi", "text-info")} />,
+      warning: <ExclamationTriangleFill className={cx("bi", "text-warning")} />,
+      success: <CheckCircleFill className={cx("bi", "text-success")} />,
     }[this.props.color];
 
-    return icon ? <div className="alert-icon">{icon}</div> : "";
+    return icon;
   }
 
   render() {
@@ -108,9 +107,11 @@ class RenkuAlert extends Component {
         className={this.props.className}
         data-cy={this.props.dataCy}
       >
-        <div className="alert-content gap-3">
-          {alertIcon}
-          <div className="w-100 overflow-auto">{this.props.children}</div>
+        <div className={cx("d-flex", "gap-3")}>
+          <div className={cx("fs-1", "my-auto")}>{alertIcon}</div>
+          <div className={cx("my-auto", "overflow-auto", "w-100")}>
+            {this.props.children}
+          </div>
         </div>
       </Alert>
     );

client/src/components/ExternalLinks.tsx

@@ -139,13 +139,13 @@ export function ExternalLink({
     );
     const icon = iconSup ? <sup>{iconNode}</sup> : <>{iconNode}</>;
     displayTitle = iconAfter ? (
-      <span className="btn-icon-text-after">
+      <span>
         {title}
-        {icon}
+        <span className="ms-1">{icon}</span>
       </span>
     ) : (
-      <span className="btn-icon-text">
-        {icon}
+      <span>
+        <span className="me-1">{icon}</span>
         {title}
       </span>
     );

client/src/components/Logs.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import { faSave, faSyncAlt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect } from "react";
 import {
   Button,
@@ -45,6 +43,8 @@ import {
 import { Loader } from "./Loader";
 
 import "./Logs.css";
+import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
+import cx from "classnames";
 
 export interface ILogs {
   data: Record<string, string>;
@@ -104,7 +104,7 @@ const LogTabs = ({ logs }: { logs: Record<string, string> }) => {
 
   return (
     <div>
-      <Nav pills className="nav-pills-underline log-nav bg-white">
+      <Nav tabs className="mb-2">
         {Object.keys(data).map((tab) => {
           return (
             <NavItem key={tab} data-cy="log-tab" role="button">
@@ -125,7 +125,10 @@ const LogTabs = ({ logs }: { logs: Record<string, string> }) => {
           return (
             <TabPane key={`log_${tab}`} tabId={tab}>
               <div className="d-flex flex-column">
-                <pre className="bg-primary text-white p-2 w-100 overflow-hidden log-container border-radius-8">
+                <pre
+                  className="overflow-hidden"
+                  style={{ whiteSpace: "pre-line" }}
+                >
                   {data[tab]}
                 </pre>
               </div>
@@ -163,14 +166,14 @@ const LogDownloadButton = ({
   return (
     <Button
       data-cy="session-log-download-button"
-      color={color ?? "rk-green"}
+      color={color ?? "primary"}
       size={size ?? "s"}
       disabled={!canDownload(logs)}
       onClick={() => {
         save();
       }}
     >
-      <FontAwesomeIcon icon={faSave} />
+      <FileEarmarkArrowDown className={cx("bi", "me-1")} />
       {downloading ? " Downloading " : " Download"}
       {downloading && <Loader inline size={16} />}
     </Button>
@@ -221,8 +224,8 @@ function NoLogsAvailable(props: LogBodyProps) {
       <p>
         You can try to{" "}
         <Button
+          color="primary"
           data-cy="retry-logs-body"
-          className="btn-outline-rk-green"
           size="sm"
           onClick={() => {
             fetchLogs(name);
@@ -244,11 +247,11 @@ function SessionLogsBody(props: LogBodyProps) {
       <p data-cy="logs-unavailable-message">
         Logs unavailable. Please{" "}
         <Button
-          className="btn-outline-rk-green"
-          size="sm"
+          color="primary"
           onClick={() => {
             fetchLogs(name);
           }}
+          size="sm"
         >
           download
         </Button>{" "}
@@ -280,29 +283,27 @@ function SessionLogs(props: LogBodyProps) {
   // TODO: Revisit after #1219
   return (
     <>
-      <div className="p-2 p-lg-3 text-nowrap">
+      <div className={cx("text-nowrap", "mb-3")}>
         <Button
           key="button"
-          color="rk-green"
-          size="sm"
+          color="outline-primary"
           style={{ marginRight: 8 }}
           id="session-refresh-logs"
           onClick={() => {
             fetchLogs(sessionName);
           }}
           disabled={logs.fetching}
         >
-          <FontAwesomeIcon icon={faSyncAlt} /> Refresh logs
+          <ArrowRepeat className={cx("bi", "me-1")} /> Refresh logs
         </Button>
         <LogDownloadButton
           logs={logs}
           downloading={downloading}
           save={save}
-          size="sm"
-          color="secondary"
+          color="outline-primary"
         />
       </div>
-      <div className="p-2 p-lg-3 border-top">
+      <div>
         <SessionLogsBody fetchLogs={fetchLogs} logs={logs} name={sessionName} />
       </div>
     </>
@@ -377,14 +378,14 @@ const EnvironmentLogsPresent = ({
   return (
     <Modal
       isOpen={!!logs.show}
-      className="bg-body modal-dynamic-width"
+      className="modal-xl"
       scrollable={true}
       toggle={() => {
         toggleLogs(name);
       }}
     >
       <ModalHeader
-        className="bg-body header-multiline"
+        className="header-multiline"
         toggle={() => {
           toggleLogs(name);
         }}
@@ -398,8 +399,8 @@ const EnvironmentLogsPresent = ({
           </small>
         </div>
       </ModalHeader>
-      <ModalBody className="logs-modal">
-        <div className="mx-2 bg-white">
+      <ModalBody>
+        <div className="mx-2">
           <SessionLogs fetchLogs={fetchLogs} logs={logs} name={name} />
         </div>
       </ModalBody>