Merge pull request #315 from CodeForPhilly/solid-ui-updates

Solid UI updates

Author: Michael-Dratch

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

@@ -70,26 +70,37 @@ const EligibilityCheckListView = ({
   return (
     <>
       <div class="p-4">
-        <div class="flex items-center mb-2">
+        <div class="flex justify-between items-center mb-2">
           <div class="text-2xl font-bold">{activeCheckConfig().title}</div>
-          <div class="ml-auto flex gap-2">
-            <For
-              each={
-                [PublicCheckConfig, UserDefinedCheckConfig] as CheckModeConfig[]
+          <div class="grid w-full grid-cols-2 items-center justify-center rounded-md bg-muted bg-gray-100 p-1 text-gray-500 mb-2 w-xs">
+            <button
+              onClick={() =>
+                mode() === "public"
+                  ? setMode("user-defined")
+                  : setMode("public")
               }
+              class={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded ${
+                mode() === "public"
+                  ? "bg-white text-gray-950 shadow-sm"
+                  : "hover:bg-gray-200"
+              }`}
             >
-              {(modeOption) => (
-                <div
-                  class={`btn-default ${
-                    mode() === modeOption.mode ? "btn-blue" : "btn-gray"
-                  }`}
-                  onClick={() => setMode(modeOption.mode)}
-                  title={modeOption.buttonTitle}
-                >
-                  {modeOption.buttonTitle}
-                </div>
-              )}
-            </For>
+              Public Checks
+            </button>
+            <button
+              onClick={() =>
+                mode() === "public"
+                  ? setMode("user-defined")
+                  : setMode("public")
+              }
+              class={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded ${
+                mode() === "user-defined"
+                  ? "bg-white text-gray-950 shadow-sm"
+                  : "hover:bg-gray-200"
+              }`}
+            >
+              Custom Checks
+            </button>
           </div>
         </div>
         <div>{activeCheckConfig().description}</div>

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

@@ -56,7 +56,9 @@ const ConfigureCheckModal = ({
                     <div class="pl-2">
                       <div class="mb-2 font-bold">
                         {titleCase(parameter.key)}{" "}
-                        {parameter.required && <span class="text-red-600">*</span>}
+                        {parameter.required && (
+                          <span class="text-red-600">*</span>
+                        )}
                       </div>
                       <div class="pl-2">
                         <ParameterInput
@@ -73,13 +75,16 @@ const ConfigureCheckModal = ({
           </div>
         )}
 
-        <div class="flex justify-end space-x-2">
-          <div class="btn-default btn-gray" onClick={closeModal}>
+        <div class="flex justify-end gap-2 space-x-2">
+          <button class="btn-default btn-gray !text-sm" onClick={closeModal}>
             Cancel
-          </div>
-          <div class="btn-default btn-blue" onClick={confirmAndClose}>
+          </button>
+          <button
+            class="btn-default btn-blue !text-sm"
+            onClick={confirmAndClose}
+          >
             Confirm
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -136,7 +141,9 @@ const ParameterInput = ({
     return (
       <ParameterMultiStringInput
         onParameterChange={onParameterChange}
-        currentValue={() => tempCheck().parameters[parameterKey()] as string[] | undefined}
+        currentValue={() =>
+          tempCheck().parameters[parameterKey()] as string[] | undefined
+        }
       />
     );
   }

builder-frontend/src/index.css

@@ -3,19 +3,22 @@
   strategy: "class"; /* only generate form-* classes */
 }
 
+body {
+   @apply
+      text-gray-800
+}
 @layer components {
   .btn-default {
     @apply
-      inline-block px-6 py-1
-    border-gray-300 border-2
-      cursor-pointer select-none rounded-md
+      inline-block px-5 py-1
+      cursor-pointer select-none !rounded-md text-sm font-semibold
   }
   .btn-default.btn-gray {
-    @apply bg-white hover:bg-gray-200;
+    @apply border-gray-300 border-2 bg-white hover:bg-gray-200 text-gray-800;
     /* @apply bg-white hover:bg-gray-200 hover:scale-500 transition-all duration-1000; */
   }
   .btn-default.btn-red {
-    @apply bg-red-800 hover:bg-red-900 text-white;
+    @apply border-gray-300 border-2 border-red-400 text-red-500 hover:bg-red-200 hover:text-red-700;
   }
   .btn-default.btn-yellow {
     @apply bg-yellow-700 hover:bg-yellow-800 text-white;