Skip to content

Solid UI updates #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Michael-Dratch merged 4 commits into from
Mar 1, 2026
Merged

Solid UI updates #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
58b39d0
style updates
Michael-Dratch Mar 1, 2026
08e109b
ui updates
Michael-Dratch Mar 1, 2026
c792864
removed uneeded change
Michael-Dratch Mar 1, 2026
126604e
removed change
Michael-Dratch Mar 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 28 additions & 17 deletions ...ntend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
21 changes: 14 additions & 7 deletions ...end/src/components/project/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -136,7 +141,9 @@ const ParameterInput = ({
return (
<ParameterMultiStringInput
onParameterChange={onParameterChange}
currentValue={() => tempCheck().parameters[parameterKey()] as string[] | undefined}
currentValue={() =>
tempCheck().parameters[parameterKey()] as string[] | undefined
}
/>
);
}
Expand Down
13 changes: 8 additions & 5 deletions builder-frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading