Skip to content

Commit e106b77

Browse files
Michael-DratchMichael-Dratch
authored
Merge pull request #245 from CodeForPhilly/home_page
Added introduction content to home screen
2 parents b0cc4b3 + c7ca815 commit e106b77

File tree

3 files changed

+77
-50
lines changed

3 files changed

+77
-50
lines changed

‎builder-frontend/src/components/homeScreen/HomeScreen.tsx‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,51 @@
11
import { Accessor, createSignal, Match, Switch } from "solid-js";
22

33
import EligibilityChecksList from "./eligibilityCheckList/EligibilityChecksList";
4-
import ProjectsList from "./ProjectsList"
4+
import ProjectsList from "./ProjectsList";
55
import Header from "../Header";
66

7-
import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";0
7+
import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
8+
0;
89

910
const HomeScreen = () => {
10-
const [screenMode, setScreenMode] = createSignal<"screeners" | "checks">("screeners");
11+
const [screenMode, setScreenMode] = createSignal<"screeners" | "checks">(
12+
"screeners"
13+
);
1114

1215
const navbarDefs: Accessor<NavbarProps> = () => {
1316
return {
1417
tabDefs: [
15-
{ key: "screeners", label: "Screeners", onClick: () => setScreenMode("screeners") },
16-
{ key: "checks", label: "Eligibility checks", onClick: () => setScreenMode("checks") },
18+
{
19+
key: "screeners",
20+
label: "Screeners",
21+
onClick: () => setScreenMode("screeners"),
22+
},
23+
{
24+
key: "checks",
25+
label: "Eligibility checks",
26+
onClick: () => setScreenMode("checks"),
27+
},
1728
],
1829
activeTabKey: () => screenMode(),
1930
titleDef: null,
20-
}
31+
};
2132
};
2233

2334
return (
2435
<div>
25-
<Header/>
36+
<Header />
2637
<BdtNavbar navProps={navbarDefs} />
27-
<Switch>
28-
<Match when={screenMode() === "screeners"}>
29-
<ProjectsList />
30-
</Match>
31-
<Match when={screenMode() === "checks"}>
32-
<EligibilityChecksList />
33-
</Match>
34-
</Switch>
38+
<div class="px-12 py-8 text-gray-700">
39+
<Switch>
40+
<Match when={screenMode() === "screeners"}>
41+
<ProjectsList />
42+
</Match>
43+
<Match when={screenMode() === "checks"}>
44+
<EligibilityChecksList />
45+
</Match>
46+
</Switch>
47+
</div>
3548
</div>
36-
)
37-
}
38-
export default HomeScreen;
49+
);
50+
};
51+
export default HomeScreen;

‎builder-frontend/src/components/homeScreen/ProjectsList.tsx‎

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ import NewScreenerForm from "./NewScreenerForm";
66
import MenuIcon from "../icon/MenuIcon";
77

88
import {
9-
fetchProjects, updateScreener, deleteScreener, createNewScreener,
9+
fetchProjects,
10+
updateScreener,
11+
deleteScreener,
12+
createNewScreener,
1013
} from "@/api/screener";
1114
import { useAuth } from "@/context/AuthContext";
1215

13-
1416
export default function ProjectsList() {
15-
const [projectList, { refetch: refetchProjectList }] = createResource(fetchProjects);
16-
const [isNewScreenerModalVisible, setIsNewScreenerModalVisible] = createSignal(false);
17+
const [projectList, { refetch: refetchProjectList }] =
18+
createResource(fetchProjects);
19+
const [isNewScreenerModalVisible, setIsNewScreenerModalVisible] =
20+
createSignal(false);
1721
const [isEditModalVisible, setIsEditgModalVisible] = createSignal(false);
1822
const [editModelData, setEditModalData] = createSignal();
1923
const navigate = useNavigate();
@@ -67,24 +71,36 @@ export default function ProjectsList() {
6771
return (
6872
<>
6973
<div>
74+
<div class="bg-gray-100 rounded-xl p-8 flex flex-col text-sm">
75+
<div class="text-xl font-bold">
76+
Welcome to the Benefit Decision Toolkit!
77+
</div>
78+
<div class="pt-2">
79+
The Benefit Decision Toolkit is an open-source, civic tech project
80+
that aims to provide an easy and affordable platform for building
81+
benefit eligibility screening tools.
82+
</div>
83+
84+
<div class="pt-3">
85+
Create a new eligibility screener by adding and configuring
86+
eligibility checks from our library of pre-built eligibility rules.
87+
Or build custom checks that meet your specific needs.
88+
</div>
89+
<div
90+
onClick={() => setIsNewScreenerModalVisible(true)}
91+
class="
92+
mt-2 px-4 py-2 w-fit cursor-pointer bg-blue-500
93+
rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
94+
font-bold text-sm text-white"
95+
>
96+
Create new screener
97+
</div>
98+
</div>
7099
<Show when={projectList} fallback={<div>Loading...</div>}>
71-
<div class="flex flex-wrap gap-4 p-4 w-100">
72-
<div
73-
onClick={() => setIsNewScreenerModalVisible(true)}
74-
class="
75-
p-4 w-80 h-60 flex justify-center cursor-pointer
76-
border-4 border-gray-300 rounded-lg
77-
shadow-md hover:shadow-lg hover:bg-gray-200"
78-
>
79-
<div class="flex items-center text-2xl font-bold">
80-
Create new screener
81-
</div>
82-
</div>
100+
<div class="flex flex-wrap gap-4 py-4 w-100">
83101
<Show when={projectList.loading}>
84102
<div class="w-80 h-60 flex items-center justify-center border-2 border-gray-300 rounded-lg shadow-md">
85-
<div class="text-2xl font-bold">
86-
Loading screeners...
87-
</div>
103+
<div class="text-2xl font-bold">Loading screeners...</div>
88104
</div>
89105
</Show>
90106
<For each={projectList()}>
@@ -100,15 +116,13 @@ export default function ProjectsList() {
100116
class="absolute px-2 top-2 right-2 hover:bg-gray-300 rounded-xl"
101117
onClick={(e) => handleProjectMenuClicked(e, item)}
102118
>
103-
<MenuIcon/>
119+
<MenuIcon />
104120
</div>
105121
<div
106122
onClick={() => navigateToProject(item)}
107123
class="h-60 p-4 flex flex-col justify-center items-center"
108124
>
109-
<div class="text-2xl font-bold">
110-
{item.screenerName}
111-
</div>
125+
<div class="text-2xl font-bold">{item.screenerName}</div>
112126
</div>
113127
</div>
114128
)

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,26 @@ const EligibilityChecksList = () => {
2424
};
2525

2626
return (
27-
<div class="px-12 py-8">
27+
<div class="py-8">
2828
<Show when={initialLoadStatus.loading() || actionInProgress()}>
2929
<Loading />
3030
</Show>
31-
<div class="text-3xl font-bold mb-2 tracking-wide">
32-
Eligibility Checks
33-
</div>
34-
<div class="text-lg mb-3">
35-
Manage your eligibility checks here. Click on a check to view or edit
36-
its details.
31+
<div class="text-xl font-bold mb-2">Eligibility Checks</div>
32+
<div class="text-md mb-3">
33+
Manage your custom eligibility checks here. Click on a check to view or
34+
edit its details.
3735
</div>
3836
<div
39-
class="btn-default btn-blue mb-3 mr-1"
37+
class="px-4 py-2 w-fit cursor-pointer bg-blue-500
38+
rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
39+
font-bold text-sm text-white"
4040
onClick={() => {
4141
setAddingNewCheck(true);
4242
}}
4343
>
4444
Create New Check
4545
</div>
46-
<div class="grid gap-4 justify-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
46+
<div class="mt-4 grid gap-4 justify-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
4747
<For each={checks()}>
4848
{(check) => (
4949
<CheckCard

0 commit comments

Comments
 (0)