Merge pull request #189 from CodeForPhilly/issue-186_form-styling

Issue-186: Form-JS Styling

Author: Michael-Dratch

builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx

@@ -37,7 +37,7 @@ const EligibilityChecksList = () => {
       >
         Create New Check
       </div>
-      <div class="flex flex-wrap gap-4">
+      <div class="grid gap-4 justify-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
         <For each={checks()}>
           {(check) => (
             <CheckCard

builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/modals/ParameterModal.tsx

@@ -35,7 +35,7 @@ const ParameterModal = (
           <label class="block font-bold mb-2">Key:</label>
           <input
             type="text"
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            class="form-input w-full border border-gray-300 rounded px-3 py-2"
             value={newParam.key}
             onInput={(e) => setNewParam("key", e.currentTarget.value)}
             placeholder="Enter parameter key"
@@ -45,7 +45,7 @@ const ParameterModal = (
           <label class="block font-bold mb-2">Label:</label>
           <input
             type="text"
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            class="form-input w-full border border-gray-300 rounded px-3 py-2"
             value={newParam.label}
             onInput={(e) => setNewParam("label", e.currentTarget.value)}
             placeholder="Enter parameter label"
@@ -54,7 +54,7 @@ const ParameterModal = (
         <div class="mb-4">
           <label class="block font-bold mb-2">Type:</label>
           <select
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            class="form-input w-full border border-gray-300 rounded px-3 py-2"
             value={newParam.type}
             onChange={(e) => setNewParam("type", e.currentTarget.value as "string" | "number" | "boolean")}
           >
@@ -72,6 +72,7 @@ const ParameterModal = (
                 name={`param-required`}
                 checked={newParam.required === true}
                 onInput={() => setNewParam("required", true)}
+                class="form-radio"
               />
               True
             </div>
@@ -81,6 +82,7 @@ const ParameterModal = (
                 name={`param-required`}
                 checked={newParam.required === false}
                 onInput={() => setNewParam("required", false)}
+                class="form-radio"
               />
               False
             </div>

builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/CheckModal.tsx

@@ -34,7 +34,7 @@ const EditCheckModal = (
           <label class="block font-bold mb-2">Name:</label>
           <input
             type="text"
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            class="form-input w-full border border-gray-300 rounded px-3 py-2"
             value={newCheck.name}
             onInput={(e) => setNewCheck("name", e.currentTarget.value)}
             placeholder="Enter check name"
@@ -44,7 +44,7 @@ const EditCheckModal = (
           <label class="block font-bold mb-2">Module:</label>
           <input
             type="text"
-            class="w-full border border-gray-300 rounded px-3 py-2"
+            class="form-input w-full border border-gray-300 rounded px-3 py-2"
             value={newCheck.module}
             onInput={(e) => setNewCheck("module", e.currentTarget.value)}
             placeholder="Enter check module"

builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx

@@ -138,7 +138,7 @@ const EligibilityCheckRow = (
     <tr>
       <td class="eligibility-check-table-cell border-top">
         <input
-          class="rounded-sm border-2 border-gray-400"
+          class="form-checkbox rounded-sm"
           type="checkbox"
           checked={isCheckSelected()}
           onChange={() => onToggle(check)}

builder-frontend/src/components/project/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx

@@ -114,6 +114,7 @@ const ParameterNumberInput = (
         onInput={(e) => {onParameterChange(Number(e.target.value))}}
         value={currentValue()}
         type="number"
+        class="form-input"
       />
     </div>
   );
@@ -135,6 +136,7 @@ const ParameterStringInput = (
         onInput={(e) => { onParameterChange(e.target.value); }}
         type="text"
         value={currentValue() ?? ""}
+        class="form-input"
       />
     </div>
   );
@@ -159,6 +161,7 @@ const ParameterBooleanInput = (
             name={`param-${parameter().key}`}
             checked={currentValue() === true}
             onInput={() => onParameterChange(true)}
+            class="form-radio"
           />
           True
         </div>
@@ -168,6 +171,7 @@ const ParameterBooleanInput = (
             name={`param-${parameter().key}`}
             checked={currentValue() === false}
             onInput={() => onParameterChange(false)}
+            class="form-radio"
           />
           False
         </div>

builder-frontend/src/index.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
-@plugin "@tailwindcss/forms";
-
+@plugin "@tailwindcss/forms" {
+  strategy: "class"; /* only generate form-* classes */
+}
 
 @layer components {
   .btn-default {

builder-frontend/tailwind.config.js

@@ -5,7 +5,8 @@ export default {
     extend: {},
   },
   plugins: [
-    require("@tailwindcss/forms")
+    require('@tailwindcss/forms')({
+      strategy: 'class', // only apply styles when using form-* classes
+    }),
   ],
 }
-