chore: Switch to Bootstrap5 form classes

2i2c-org · Nov 7, 2024 · 95614a9 · 95614a9
1 parent 653e51c
commit 95614a9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/src/ImageBuilder.jsx b/src/ImageBuilder.jsx
@@ -146,20 +146,17 @@ export function ImageBuilder({ name }) {
   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}
@@ -172,16 +169,14 @@ export function ImageBuilder({ name }) {
             </div>
           )}
           {repoError && (
-            <div className="profile-option-control-error">{repoError}</div>
+            <div className="invalid-feedback">{repoError}</div>
           )}
         </div>
       </div>
 
-      <div
-        className={`profile-option-container ${repoError ? "has-error" : ""}`}
-      >
+      <div className="profile-option-container">
         <div className="profile-option-label-container">
-          <label>Git Ref</label>
+          <div className="form-label">Git Ref</div>
         </div>
         <div className="profile-option-control-container">
           <Select
@@ -197,7 +192,7 @@ export function ImageBuilder({ name }) {
             </div>
           )}
           {refError && (
-            <div className="profile-option-control-error">{refError}</div>
+            <div className="is-invalid">{refError}</div>
           )}
         </div>
       </div>

diff --git a/src/components/form/fields.jsx b/src/components/form/fields.jsx
@@ -21,14 +21,14 @@ function validateField(value, validateConfig, touched) {
 
 function Field({ id, label, 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>}
       </div>
     </div>
   );
@@ -91,6 +91,7 @@ export function TextField({
   return (
     <Field id={id} label={label} error={touched && error}>
       <input
+        className={`form-control ${error ? "is-invalid" : ""}`}
         type="text"
         id={id}
         name={id}

diff --git a/src/form.css b/src/form.css
@@ -66,30 +66,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-container.has-error input {
-  border-color: red;
+.profile-option-control-container input[type="text"]:not(.is-invalid) {
+  border: 1px solid gray;
 }
 
-.profile-option-control-error {
-  color: red;
-  margin-top: 0.5rem;
+.profile-option-control-info {
+  margin-top: 0.25rem;
+  font-size: 0.875em;
 }
 
 .profile-form-error {