Skip to content

Commit 5551bd4

Browse files
taichan03taichan03
authored
Merge pull request #315 from CodeForPhilly/282-standardize-icon-sizes-in-navigation-bar-in-the-admin-portal-medium
Standardized icon and Balancer logo sizes in the sidebar
2 parents e0c0479 + d99d2f4 commit 5551bd4

File tree

2 files changed

+231
-201
lines changed

2 files changed

+231
-201
lines changed

‎frontend/src/pages/AdminPortal/AdminPortal.tsx‎

Lines changed: 121 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,131 @@
11
//import Welcome from "../../components/Welcome/Welcome.tsx";
2-
import { Link } from "react-router-dom";
2+
import {Link} from "react-router-dom";
33
import pencilSVG from "../../assets/pencil.svg";
44
import uploadSVG from "../../assets/upload.svg";
55
import Layout_V2_Main from "../Layout/Layout_V2_Main";
6+
import React from "react";
67

78
const AdminPortal = () => {
8-
return (
9-
<>
10-
<Layout_V2_Main>
11-
<div className="flex h-full w-full justify-center">
12-
<div className="mt-10 flex w-1/2 flex-col">
13-
<div className="mb-8 items-center justify-center">
14-
<div className="text-lg text-gray-500">
15-
Let's take a look inside Balancer's brain. You can manage the
16-
brain from this portal.
17-
</div>
18-
</div>
19-
{/* <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2"> */}
20-
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 ">
21-
<Link to={`/listoffiles`} className="w-full">
22-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
23-
<div>
24-
<span className="text-md mb-0.5 block font-semibold">
25-
Manage Files
26-
</span>
27-
<span className="text-textGray block text-sm">
28-
Manage the files stored in the Balancer's brain
29-
</span>
30-
</div>
31-
<img
32-
src={pencilSVG}
33-
alt="Description of SVG"
34-
className="mr-2 h-5 w-5"
35-
></img>
36-
</div>
37-
</Link>
38-
<Link to={`/UploadFile`} className="w-full">
39-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
40-
<div>
41-
<span className="text-md mb-0.5 block font-semibold">
42-
Upload PDF
43-
</span>
44-
<span className="text-textGray block text-sm">
45-
Add to Balancer's brain
46-
</span>
47-
</div>
48-
<img
49-
src={uploadSVG}
50-
alt="Description of SVG"
51-
className="mr-2 h-5 w-5"
52-
></img>
53-
</div>
54-
</Link>
55-
<Link to={`/drugSummary`} className="w-full">
56-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
57-
<div>
58-
<span className="text-md mb-0.5 block font-semibold">
59-
Ask General Questions
60-
</span>
61-
<span className="text-textGray block text-sm">
62-
Get answers from Balancer's brain
63-
</span>
64-
</div>
65-
<img
66-
src={uploadSVG}
67-
alt="Description of SVG"
68-
className="mr-2 h-5 w-5"
69-
></img>
70-
</div>
71-
</Link>
72-
<Link to={`/rulesmanager`} className="w-full">
73-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
74-
<div>
75-
<span className="text-md mb-0.5 block font-semibold">
76-
Rules Manager for Medication Suggester
77-
</span>
78-
<span className="text-textGray block text-sm">
79-
Manage and view the rules for the Medication Suggester
80-
</span>
81-
</div>
82-
<img
83-
src={uploadSVG}
84-
alt="Description of SVG"
85-
className="mr-2 h-5 w-5"
86-
></img>
87-
</div>
88-
</Link>
89-
<Link to={`/ManageMeds`} className="w-full">
90-
<div className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.5rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100">
91-
<div>
92-
<span className="text-md mb-0.5 block font-semibold">
93-
Medications Database Manager
94-
</span>
95-
<span className="text-textGray block text-sm">
96-
Manager the Medications store currently inside Balancer's
97-
brain
98-
</span>
99-
</div>
100-
<img
101-
src={uploadSVG}
102-
alt="Description of SVG"
103-
className="mr-2 h-5 w-5"
104-
></img>
9+
return (
10+
<>
11+
<Layout_V2_Main>
12+
<div className="flex h-full w-full justify-center">
13+
<div className="mt-10 flex flex-col w-3/4 md:w-2/3 max-w-3xl">
14+
<div className="mb-8 items-center justify-center">
15+
<div className="text-lg text-gray-500">
16+
Let's take a look inside Balancer's brain. You can manage the
17+
brain from this portal.
18+
</div>
19+
</div>
20+
{/* <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2"> */}
21+
<div className="mb-8 grid grid-cols-1 lg:grid-cols-2 gap-4 ">
22+
23+
<Link to={`/listoffiles`} className="w-full">
24+
<AdminDashboardItemWrapper>
25+
<div className="min-w-0">
26+
<span className="text-md mb-0.5 block font-semibold">
27+
Manage Files
28+
</span>
29+
<span className="text-textGray block text-sm truncate">
30+
Manage the files stored in the Balancer's brain
31+
</span>
32+
</div>
33+
<img
34+
src={pencilSVG}
35+
alt="Description of SVG"
36+
className="mr-2 h-5 w-5"
37+
></img>
38+
</AdminDashboardItemWrapper>
39+
</Link>
40+
41+
<Link to={`/UploadFile`} className="w-full">
42+
<AdminDashboardItemWrapper>
43+
<div className="min-w-0">
44+
<span className="text-md mb-0.5 block font-semibold">
45+
Upload PDF
46+
</span>
47+
<span className="text-textGray block text-sm truncate">
48+
Add to Balancer's brain
49+
</span>
50+
</div>
51+
<img
52+
src={uploadSVG}
53+
alt="Description of SVG"
54+
className="mr-2 h-5 w-5"
55+
></img>
56+
57+
</AdminDashboardItemWrapper>
58+
</Link>
59+
<Link to={`/drugSummary`} className="w-full">
60+
<AdminDashboardItemWrapper>
61+
<div className="min-w-0">
62+
<span className="text-md mb-0.5 block font-semibold">
63+
Ask General Questions
64+
</span>
65+
<span className="text-textGray block text-sm truncate">
66+
Get answers from Balancer's brain
67+
</span>
68+
</div>
69+
<img
70+
src={uploadSVG}
71+
alt="Description of SVG"
72+
className="mr-2 h-5 w-5"
73+
></img>
74+
</AdminDashboardItemWrapper>
75+
</Link>
76+
<Link to={`/rulesmanager`} className="w-full">
77+
<AdminDashboardItemWrapper>
78+
<div className="min-w-0">
79+
<span className="text-md mb-0.5 block font-semibold">
80+
Rules Manager
81+
</span>
82+
<span
83+
className="text-textGray block text-sm truncate">
84+
Manage and view the rules for the Medication Suggester
85+
</span>
86+
</div>
87+
<img
88+
src={uploadSVG}
89+
alt="Description of SVG"
90+
className="mr-2 h-5 w-5"
91+
></img>
92+
</AdminDashboardItemWrapper>
93+
</Link>
94+
<Link to={`/ManageMeds`} className="w-full">
95+
<AdminDashboardItemWrapper>
96+
<div className="min-w-0">
97+
<span className="text-md mb-0.5 block font-semibold">
98+
Medications Database
99+
</span>
100+
<span className="text-textGray block text-sm truncate ">
101+
Manage the Medications store currently inside Balancer's
102+
brain
103+
</span>
104+
</div>
105+
<img
106+
src={uploadSVG}
107+
alt="Description of SVG"
108+
className="mr-2 h-5 w-5"
109+
></img>
110+
</AdminDashboardItemWrapper>
111+
112+
</Link>
113+
</div>
114+
</div>
105115
</div>
106-
</Link>
107-
</div>
108-
</div>
109-
</div>
110-
</Layout_V2_Main>
111-
</>
112-
);
116+
</Layout_V2_Main>
117+
</>
118+
);
113119
};
114120

115121
export default AdminPortal;
122+
123+
124+
const AdminDashboardItemWrapper = ({children}: { children: React.ReactNode }) => {
125+
return (
126+
<div
127+
className="flex-basis-0 transition-border border-border3 shadow-feint flex h-[5.75rem] flex-grow cursor-pointer flex-row items-start justify-between rounded-xl border p-4 px-4 duration-150 ease-in hover:scale-[1.015] hover:bg-gray-100 max-w-[26rem]">
128+
{children}
129+
</div>
130+
)
131+
}

0 commit comments

Comments
 (0)