Skip to content

Commit 71508c4

Browse files
Michael-DratchMichael-Dratch
authored
Merge pull request #153 from Justin-MacIntosh/screener-frontend-css-updates
feat: TailwindCSS updates to Screener/Results - Separated Benefit Result into new component - Increased size of form-js headers
2 parents 9087453 + dd5f780 commit 71508c4

File tree

2 files changed

+81
-65
lines changed

2 files changed

+81
-65
lines changed

‎screener-frontend/src/EligibilityResults.tsx‎

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,72 +6,86 @@ import checkIcon from "./assets/images/checkIcon.svg";
66
import questionIcon from "./assets/images/questionIcon.svg";
77
import xIcon from "./assets/images/xIcon.svg";
88

9-
export default function EligibilityResults({ results }: { results: Accessor<ResultDetail[] | undefined> }) {
9+
10+
export default function EligibilityResults(
11+
{ results }: { results: Accessor<ResultDetail[] | undefined> }
12+
) {
1013
console.log(results());
1114
return (
1215
<div class="my-2 mx-12">
1316
<h2 class="text-gray-600 font-bold">Eligibility Results</h2>
1417
<For each={results() ?? []}>
15-
{(benefit) => (
16-
<div class="border-gray-500 border p-5 my-4 rounded-lg shadow-md">
17-
<Switch>
18-
<Match when={benefit.result === true}>
19-
<p class="mb-3 bg-green-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
20-
Eligible
21-
</p>
22-
</Match>
23-
<Match when={benefit.result === null}>
24-
<p class="mb-3 bg-yellow-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
25-
Need more information
26-
</p>
27-
</Match>
28-
<Match when={benefit.result === false}>
29-
<p class="mb-3 bg-red-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
30-
Ineligible
31-
</p>
32-
</Match>
33-
</Switch>
34-
<h3 class="font-bold mb-2 text-lg">{benefit.displayName}</h3>
35-
<div class="my-2">
36-
<For each={benefit.checks ?? []}>
37-
{(check) => (
38-
<p class="mb-1">
39-
<Switch>
40-
<Match when={check.result === true}>
41-
<img src={checkIcon} alt="" class="inline w-4 mr-2" />
42-
</Match>
43-
<Match when={check.result === null}>
44-
<img
45-
src={questionIcon}
46-
alt=""
47-
class="inline w-4 mr-2"
48-
/>
49-
</Match>
50-
<Match when={check.result === false}>
51-
<img src={xIcon} alt="" class="inline w-4 mr-2" />
52-
</Match>
53-
</Switch>
54-
<span class="text-xs">{check.displayName}</span>
55-
</p>
56-
)}
57-
</For>
58-
</div>
59-
{benefit.info && (
60-
<>
61-
<h4 class="font-bold mb-1 text-sm">Overview</h4>
62-
<p class="mb-4 text-xs">{benefit.info}</p>
63-
</>
64-
)}
65-
{benefit.appLink && (
66-
<a href={benefit.appLink} target="_blank">
67-
<p class="bg-green-600 px-5 py-2 rounded-lg font-bold text-white w-fit text-sm">
68-
Apply Now
69-
</p>
70-
</a>
71-
)}
72-
</div>
73-
)}
18+
{(benefit) => <BenefitResult benefit={benefit}/>}
7419
</For>
7520
</div>
7621
);
7722
}
23+
24+
function BenefitResult({ benefit }: { benefit: ResultDetail }) {
25+
return (
26+
<div class="border-gray-500 border p-5 my-4 rounded-lg shadow-md">
27+
<Switch>
28+
<Match when={benefit.result === true}>
29+
<p class="mb-3 bg-green-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
30+
Eligible
31+
</p>
32+
</Match>
33+
<Match when={benefit.result === null}>
34+
<p class="mb-3 bg-yellow-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
35+
Need more information
36+
</p>
37+
</Match>
38+
<Match when={benefit.result === false}>
39+
<p class="mb-3 bg-red-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
40+
Ineligible
41+
</p>
42+
</Match>
43+
</Switch>
44+
<div class="[&:has(+div)]:mb-2">
45+
<h3 class="font-bold text-lg">{benefit.displayName}</h3>
46+
<For each={benefit.checks ?? []}>
47+
{(check) => (
48+
<p class="mb-1">
49+
<Switch>
50+
<Match when={check.result === true}>
51+
<img src={checkIcon} alt="" class="inline w-4 mr-2" />
52+
</Match>
53+
<Match when={check.result === null}>
54+
<img
55+
src={questionIcon}
56+
alt=""
57+
class="inline w-4 mr-2"
58+
/>
59+
</Match>
60+
<Match when={check.result === false}>
61+
<img src={xIcon} alt="" class="inline w-4 mr-2" />
62+
</Match>
63+
</Switch>
64+
<span class="text-xs">{check.displayName}</span>
65+
</p>
66+
)}
67+
</For>
68+
</div>
69+
{benefit.info && (
70+
<div class="[&:has(+div)]:mb-4">
71+
<h4 class="font-bold mb-1 text-sm">Overview</h4>
72+
<p class="text-xs">{benefit.info}</p>
73+
</div>
74+
)}
75+
{benefit.appLink && (
76+
<div class="[&:has(+div)]:mb-4">
77+
<a href={benefit.appLink} target="_blank">
78+
<p
79+
class="
80+
px-5 py-2 rounded-lg select-none
81+
rounded-lg font-bold text-white w-fit text-sm
82+
bg-green-600 hover:bg-green-700 transition-colors"
83+
>
84+
Apply Now
85+
</p>
86+
</a>
87+
</div>
88+
)}
89+
</div>
90+
);
91+
}

‎screener-frontend/src/index.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
@import "tailwindcss";
22

3-
.fjs-powered-by {
4-
display: none;
5-
}
6-
73
body {
84
font-family: "IBM Plex Sans", sans-serif;
95
}
106

11-
h1 {
7+
/* Hide Form.io branding */
8+
.fjs-powered-by {
9+
display: none;
10+
}
11+
12+
/* Increase size of h1 specifically in Form.io forms */
13+
.fjs-container h1 {
1214
font-size: 2em;
1315
}

0 commit comments

Comments
 (0)