Merge pull request #72 from 2i2c-org/bootstrap5

Upgrade to Bootstrap 5
2i2c-org · Dec 19, 2024 · 91639ac · 91639ac
2 parents c828fb8 + 5e75611
commit 91639ac
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -5,6 +5,11 @@ for use with [jupyterhub-kubespawner](https://github.com/jupyterhub/kubespawner)
 
 ![Screenshot showing an image selector](screenshot.png)
 
+## JupyterHub version supported
+
+`jupyterhub-fancy-profiles` version 0.4.0 and above require JupyterHub 5. If you
+are using an older version of JupyterHub, please use version 0.3.x.
+
 ## Features
 
 1. Interpret a `profileList` given to kubespawner, and render a better looking

diff --git a/src/ImageBuilder.jsx b/src/ImageBuilder.jsx
@@ -75,7 +75,7 @@ function ImageLogs({ setTerm, setFitAddon, name }) {
           blue: "\x1b[38;2;147;197;253m",
           magenta: "\x1b[38;2;249;168;212m",
           cyan: "\x1b[38;2;103;232;249m",
-        }
+        },
       });
       const fitAddon = new FitAddon();
       term.loadAddon(fitAddon);
@@ -89,7 +89,7 @@ function ImageLogs({ setTerm, setFitAddon, name }) {
   }, []);
 
   return (
-    <div className="terminal-container">
+    <div className="terminal-container border">
       <div id={terminalId}></div>
     </div>
   );
@@ -157,29 +157,26 @@ export function ImageBuilder({ name, isActive }) {
   return (
     <>
       <div className="profile-option-container">
-        <div className="profile-option-label-container">
-          <b>Provider</b>
-        </div>
+        <div className="profile-option-label-container">Provider</div>
         <div className="profile-option-control-container">GitHub</div>
       </div>
 
-      <div
-        className={`profile-option-container ${repoError ? "has-error" : ""}`}
-      >
+      <div className="profile-option-container">
         <div className="profile-option-label-container">
-          <label htmlFor="repo">Repository</label>
+          <label htmlFor="repo" className="form-label">
+            Repository
+          </label>
         </div>
         <div className="profile-option-control-container">
           <input
+            className={`form-control ${repoError ? "is-invalid" : ""}`}
             id="repo"
             type="text"
             ref={repoFieldRef}
             {...repoFieldProps}
             aria-invalid={!!repoError}
           />
-          {repoError && (
-            <div className="profile-option-control-error">{repoError}</div>
-          )}
+          {repoError && <div className="invalid-feedback">{repoError}</div>}
         </div>
       </div>
 

diff --git a/src/ProfileForm.jsx b/src/ProfileForm.jsx
@@ -86,10 +86,8 @@ function Form() {
                 id={`profile-option-${slug}-label`}
                 className="profile-select-label"
               >
-                <span className="profile-select-label-heading">
-                  {display_name}
-                </span>
-                <span>{description}</span>
+                <h2>{display_name}</h2>
+                <p>{description}</p>
               </div>
 
               {profile_options && (

diff --git a/src/components/form/fields.jsx b/src/components/form/fields.jsx
@@ -21,13 +21,15 @@ function validateField(value, validateConfig, touched) {
 
 function Field({ id, label, hint, children, error }) {
   return (
-    <div className={`profile-option-container ${error ? "has-error" : ""}`}>
+    <div className="profile-option-container">
       <div className="profile-option-label-container">
-        <label htmlFor={id}>{label}</label>
+        <label htmlFor={id} className="form-label">
+          {label}
+        </label>
       </div>
       <div className="profile-option-control-container">
         {children}
-        {error && <div className="profile-option-control-error">{error}</div>}
+        {error && <div className="invalid-feedback">{error}</div>}
         {hint && <div className="profile-option-control-hint">{hint}</div>}
       </div>
     </div>
@@ -88,6 +90,7 @@ function _TextField(
   return (
     <Field id={id} label={label} hint={hint} error={touched && error}>
       <input
+        className={`form-control ${error ? "is-invalid" : ""}`}
         ref={ref}
         type="text"
         id={id}

diff --git a/src/form.css b/src/form.css
@@ -22,12 +22,6 @@
   margin-bottom: 1rem;
 }
 
-.profile-select-label-heading {
-  display: block;
-  font-size: 2rem;
-  font-weight: bold;
-}
-
 .profile-select-radio {
   display: flex;
   gap: 1rem;
@@ -59,6 +53,10 @@
   background-color: #f8f8f8;
 }
 
+[data-bs-theme="dark"] .selected-profile {
+  background-color: #070707;
+}
+
 #submit-button {
   grid-column-start: 1;
   grid-column-end: 3;
@@ -71,25 +69,20 @@
   padding: 16px;
 }
 .profile-option-control-container input[type="text"] {
-  width: 100%;
   /* 8px here, even though we only use 4px for .react-select-item-container.
        Achieves similar visual effect.
     */
   padding: 8px;
-  border: 1px solid gray;
   border-radius: 4px;
 }
 
-.profile-option-control-info {
-  margin-top: 0.5rem;
-}
-
-.profile-option-container.has-error label {
-  color: red;
+.profile-option-control-container input[type="text"]:not(.is-invalid) {
+  border: 1px solid gray;
 }
 
-.profile-option-container.has-error input {
-  border-color: red;
+.profile-option-control-info {
+  margin-top: 0.25rem;
+  font-size: 0.875em;
 }
 
 .profile-option-control-hint {
@@ -98,12 +91,6 @@
   font-size: 0.9rem;
 }
 
-.profile-option-control-error {
-  color: red;
-  margin-top: 0.3rem;
-  font-size: 0.9rem;
-}
-
 .profile-form-error {
   color: red;
   margin-bottom: 1rem;
@@ -127,14 +114,31 @@
 .react-select-item-container.react-select-item-menu-display.react-select-item-selected
   .react-select-item-description {
   /* When rendering an option in react select's *menu*, if it is the currently selected one, make the description much lighter.
-       Otherwise, it gets unreadable in the blue;
+     Otherwise, it gets unreadable in the blue;
     */
   color: #ddd;
 }
-.react-select-item-container {
-  padding: 4px;
-}
 
 .react-select-item-description {
   color: #999;
 }
+
+[data-bs-theme="dark"]
+  .react-select-item-container.react-select-item-menu-display.react-select-item-selected
+  .react-select-item-description {
+  color: #222222;
+}
+
+[data-bs-theme="dark"] .react-select-item-container .react-select-item-title {
+  color: #000;
+}
+
+[data-bs-theme="dark"]
+  .react-select-item-container
+  .react-select-item-description {
+  color: #666;
+}
+
+.react-select-item-container {
+  padding: 4px;
+}