Skip to content

Commit ebe2753

Browse files
author
Justin MacIntosh
committed
feat: TailwindCSS updates to Screener/Results
1 parent 9087453 commit ebe2753

6 files changed

Lines changed: 90 additions & 69 deletions

File tree

‎screener-frontend/src/EligibilityResults.tsx‎

Lines changed: 79 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,72 +6,91 @@ 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+
const isApplicationLinkEnabled: boolean = benefit.result;
26+
const applicationLinkCls: string = (
27+
isApplicationLinkEnabled ? "" : "pointer-events-none opacity-50"
28+
);
29+
30+
return (
31+
<div class="border-gray-500 border p-5 my-4 rounded-lg shadow-md">
32+
<Switch>
33+
<Match when={benefit.result === true}>
34+
<p class="mb-3 bg-green-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
35+
Eligible
36+
</p>
37+
</Match>
38+
<Match when={benefit.result === null}>
39+
<p class="mb-3 bg-yellow-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
40+
Need more information
41+
</p>
42+
</Match>
43+
<Match when={benefit.result === false}>
44+
<p class="mb-3 bg-red-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
45+
Ineligible
46+
</p>
47+
</Match>
48+
</Switch>
49+
<div class="[&:has(+div)]:mb-2">
50+
<h3 class="font-bold text-lg">{benefit.displayName}</h3>
51+
<For each={benefit.checks ?? []}>
52+
{(check) => (
53+
<p class="mb-1">
54+
<Switch>
55+
<Match when={check.result === true}>
56+
<img src={checkIcon} alt="" class="inline w-4 mr-2" />
57+
</Match>
58+
<Match when={check.result === null}>
59+
<img
60+
src={questionIcon}
61+
alt=""
62+
class="inline w-4 mr-2"
63+
/>
64+
</Match>
65+
<Match when={check.result === false}>
66+
<img src={xIcon} alt="" class="inline w-4 mr-2" />
67+
</Match>
68+
</Switch>
69+
<span class="text-xs">{check.displayName}</span>
70+
</p>
71+
)}
72+
</For>
73+
</div>
74+
{benefit.info && (
75+
<div class="[&:has(+div)]:mb-4">
76+
<h4 class="font-bold mb-1 text-sm">Overview</h4>
77+
<p class="text-xs">{benefit.info}</p>
78+
</div>
79+
)}
80+
{benefit.appLink && (
81+
<div class="[&:has(+div)]:mb-4">
82+
<a href={benefit.appLink} target="_blank" class={applicationLinkCls}>
83+
<p
84+
class="
85+
px-5 py-2 rounded-lg select-none
86+
rounded-lg font-bold text-white w-fit text-sm
87+
bg-green-600 hover:bg-green-700 transition-colors"
88+
>
89+
Apply Now
90+
</p>
91+
</a>
92+
</div>
93+
)}
94+
</div>
95+
);
96+
}

‎screener-frontend/src/Error.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export default function ErrorPage({ error }: { error: any }) {
22
console.log(error);
33
return (
44
<div class="py-24 flex-col justify-center h-screen items-center">
5-
<h1 class="text-center text-xl">
5+
<h1 class="text-center text-[2em]">
66
Sorry, there was an error loading the requested screener.
77
</h1>
88
</div>

‎screener-frontend/src/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default function Home() {
22
return (
33
<div class="py-24 flex-col justify-center h-screen items-center">
4-
<h1 class="text-center text-xl">Benefit Decision Toolkit</h1>
4+
<h1 class="text-center text-[2em]">Benefit Decision Toolkit</h1>
55
</div>
66
);
77
}

‎screener-frontend/src/Loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default function Loading() {
22
return (
33
<div class="py-24 flex-col justify-center h-screen items-center">
4-
<h1 class="text-center text-xl">Loading Screener</h1>
4+
<h1 class="text-center text-[2em]">Loading Screener</h1>
55
<div class="mt-8 flex items-center justify-center h-20">
66
<div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
77
</div>

‎screener-frontend/src/NotFound.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default function NotFound() {
22
return (
33
<div class="py-24 flex-col justify-center h-screen items-center">
4-
<h1 class="text-center text-xl">404 Screener Not Found</h1>
4+
<h1 class="text-center text-[2em]">404 Screener Not Found</h1>
55
</div>
66
);
77
}

‎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)