Make form background darker

jupyterhub · Dec 15, 2024 · 7276451 · 7276451
1 parent 0fd5bb1
commit 7276451
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/binderhub/static/js/components/BuilderLauncher.jsx b/binderhub/static/js/components/BuilderLauncher.jsx
@@ -221,7 +221,7 @@ export function BuilderLauncher({
     setup();
   }, [isLaunching]);
   return (
-    <div className="bg-light p-4">
+    <div className="bg-custom-dark p-4 pt-2">
       <Progress progressState={progressState} />
       <ImageLogs
         setTerm={setTerm}

diff --git a/binderhub/static/js/components/LinkGenerator.jsx b/binderhub/static/js/components/LinkGenerator.jsx
@@ -176,7 +176,7 @@ export function LinkGenerator({
 
   return (
     <>
-      <form className="d-flex flex-column gap-3 p-4 pb-0 rounded bg-light">
+      <form className="d-flex flex-column gap-3 p-4 pb-0 rounded bg-custom-dark">
         <h4>Build and launch a repository</h4>
         <fieldset>
           <legend className="form-label">{selectedProvider.repo.label}</legend>

diff --git a/binderhub/static/js/components/Progress.jsx b/binderhub/static/js/components/Progress.jsx
@@ -60,9 +60,9 @@ progressDisplay[PROGRESS_STATES.FAILED] = {
 export function Progress({ progressState }) {
   return (
     <div
-      className="progress-stacked mb-2"
+      className="progress-stacked mb-2 border border-1"
       role="progressbar"
-      style={{ height: "24px" }}
+      style={{ height: "32px" }}
     >
       {progressState === null
         ? ""

diff --git a/binderhub/static/js/index.scss b/binderhub/static/js/index.scss
@@ -56,4 +56,8 @@ a {
   margin-bottom: 100px;
 }
 
+.bg-custom-dark {
+  background-color: rgb(235, 236, 237);
+}
+
 @import "bootstrap-icons/font/bootstrap-icons.css";