Merge branch 'main' into leafty/home-page-route

Author: leafty

client/src/components/progress/Progress.css

@@ -0,0 +1,30 @@
+// TODO: use bootstrap margin classes
+.progressBoxSmall {
+  max-width: 500px;
+  margin: auto;
+
+  &Steps {
+    padding-top: 110px;
+  }
+}
+
+.progressBox {
+  width: 100%;
+  padding: 40px 25px 20px 25px;
+
+  & h2 {
+    color: var(--bs-dark);
+    font-weight: bold;
+    font-size: 20px;
+  }
+
+  & p {
+    color: var(--bs-dark);
+    font-weight: normal;
+    font-size: 16px;
+  }
+
+  &_dark {
+    background-color: var(--bs-rk-dark-bg);
+  }
+}

client/src/components/progress/ProgressBox.module.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2022 - Swiss Data Science Center (SDSC)
+ * Copyright 2026 - Swiss Data Science Center (SDSC)
  * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
  * Eidgenössische Technische Hochschule Zürich (ETHZ).
  *
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import {
   CheckCircleFill,
   SlashCircle,
@@ -24,7 +25,7 @@ import {
 
 import { Loader } from "../Loader";
 
-import "./Progress.css";
+import styles from "./ProgressBox.module.scss";
 
 /**
  *  renku-ui
@@ -74,31 +75,27 @@ interface ProgressStepsIndicatorProps {
   moreOptions?: React.ReactNode;
 }
 
-/**
- * Project Visibility functional component
- * @param {ProgressIndicatorProps} props - progress indicator options
- */
-const ProgressStepsIndicator = ({
+export default function ProgressStepsIndicator({
   style = ProgressStyle.Dark,
   title,
   description,
   status,
   moreOptions,
-}: ProgressStepsIndicatorProps) => {
+}: ProgressStepsIndicatorProps) {
   const content = status.map((s) => (
     <ProgressStep key={`step-${s.id}`} step={s} />
   ));
   return (
-    <div className={`progress-box progress-box--${style}`}>
-      <h2 className="progress-title">{title}</h2>
+    <div className={cx(styles.progressBox, styles[`progressBox_${style}`])}>
+      <h2>{title}</h2>
       <p className="pb-2">{description}</p>
-      <div className="mt-3 details-progress-box">
+      <div className="mt-3">
         {content}
         {moreOptions}
       </div>
     </div>
   );
-};
+}
 
 interface progressStepProps {
   step: StepsProgressBar;
@@ -148,7 +145,9 @@ function ProgressStep({ step }: progressStepProps) {
       break;
   }
 
-  return <div className="d-flex gap-2 mt-2 align-items-center">{content}</div>;
+  return (
+    <div className={cx("d-flex", "gap-2", "mt-2", "align-items-center")}>
+      {content}
+    </div>
+  );
 }
-
-export default ProgressStepsIndicator;

client/src/components/progress/ProgressSteps.tsx

@@ -22,6 +22,8 @@ import { Button } from "reactstrap";
 import { Loader } from "~/components/Loader";
 import { SessionV2 } from "../sessionsV2.types";
 
+import progressBoxStyles from "~/components/progress/ProgressBox.module.scss";
+
 interface StartSessionProgressBarV2Props {
   session?: SessionV2;
   toggleLogs: () => void;
@@ -39,7 +41,12 @@ export function StartSessionProgressBarV2({
       : "Requesting session resources";
 
   return (
-    <div className={cx("progress-box-small", "progress-box-small--steps")}>
+    <div
+      className={cx(
+        progressBoxStyles.progressBoxSmall,
+        progressBoxStyles.progressBoxSmallSteps
+      )}
+    >
       <div data-cy="session-status-starting">
         <h2 className="fw-bold">Launching Session</h2>
         <p className="pb-2">Starting session services</p>
@@ -48,7 +55,7 @@ export function StartSessionProgressBarV2({
           <div>{description}</div>
         </div>
       </div>
-      <div className={cx("progress-box", "pt-0")}>
+      <div>
         <Button className="mt-3" color="outline-primary" onClick={toggleLogs}>
           Open Logs
         </Button>