Skip to content

in-line styling to tailwind #287

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
prooflesben merged 1 commit into from
Feb 5, 2026
+90 −381
Merged

in-line styling to tailwind #287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 7 additions & 29 deletions frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
</label>

<div
className="cost-benefit-container p-1 rounded-lg h-full flex flex-col"
style={{
backgroundColor: 'white'
}}
className="cost-benefit-container p-1 rounded-lg h-full flex flex-col bg-white"
>
{/* Hourly Rate Input */}
<div className="mb-3">
Expand All @@ -71,8 +68,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
placeholder="Enter rate"
value={hourlyRate}
onChange={(e) => setHourlyRate(e.target.value)}
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md"
style={{ backgroundColor: '#F2EBE4' }}
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-[#F2EBE4]"
/>
</div>

Expand All @@ -89,22 +85,14 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
console.log('Time per report changed to:', e.target.value);
setTimePerReport(e.target.value);
}}
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md"
style={{ backgroundColor: '#F2EBE4' }}
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-[#F2EBE4]"
/>
</div>

{/* Calculate Button */}
<button
onClick={calculateNetBenefit}
className="w-full py-1 px-4 rounded-md mb-7"
style={{
backgroundColor: '#F58D5C',
color: 'black',
borderStyle: 'solid',
borderColor: 'black',
borderWidth: '1px'
}}
className="w-full py-1 px-4 rounded-md mb-7 bg-[#F58D5C] text-black border border-black"
>
calculate
</button>
Expand All @@ -114,19 +102,9 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
<span className="text-sm font-semibold"> Net Benefit:</span>
<div
onClick={calculateNetBenefit}
className="w-1/2 py-2 px-4 rounded-md"
style={{
backgroundColor: '#F2EBE4',
color: netBenefit !== null ? 'black' : 'gray',
borderStyle: 'solid',
borderColor: 'black',
borderWidth: '1px',
overflow: 'auto',
textAlign: 'center',
whiteSpace: 'nowrap',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
}}
className={`w-1/2 py-2 px-4 rounded-md bg-[#F2EBE4] border border-black overflow-auto text-center whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] ${
netBenefit !== null ? 'text-black' : 'text-gray-500'
}`}
>
{netBenefit !== null ? formatCurrency(netBenefit) : 'Analysis'}
</div>
Expand Down
157 changes: 39 additions & 118 deletions frontend/src/main-page/grants/grant-list/GrantItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
: "No date"}
</li>
<li className="amount">{formatCurrency(curGrant.amount)}</li>
<li className="does-bcan-qualify px-8" style={{ width: "100%" }}>
<li className="does-bcan-qualify px-8 w-full" >
{curGrant.does_bcan_qualify ? (
<RingButton
text={DoesBcanQualifyText.Yes}
Expand Down Expand Up @@ -227,11 +227,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Application Date
</label>
<div
style={{
color: "black",
backgroundColor: "#D3D3D3",
}}
className="h-9 flex items-center justify-center w-full rounded-full px-4"
className="bg-[#D3D3D3] text-black h-9 flex items-center justify-center w-full rounded-full px-4"
>
{formatDate(curGrant.application_deadline)}
</div>
Expand All @@ -245,14 +241,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Grant Start Date
</label>
<div
style={{
color: "black",
backgroundColor: "#D3D3D3",
fontStyle: curGrant.grant_start_date
? "normal"
: "italic",
}}
className="h-9 flex items-center justify-center w-full rounded-full px-4"
className={`bg-[#D3D3D3] text-black h-9 flex items-center justify-center w-full rounded-full px-4 ${
curGrant.grant_start_date ? "normal" : "italic"
}`}
>
{curGrant.grant_start_date
? formatDate(curGrant.grant_start_date)
Expand All @@ -272,13 +263,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Estimated Completion Time
</label>
<div
style={{
color: "black",
fontStyle: curGrant.estimated_completion_time
? "normal"
: "italic",
}}
className="text-left sm:text-sm lg:text-base h-10 flex w-2/3 "
className={`text-left sm:text-sm lg:text-base h-10 flex w-2/3 text-black ${
curGrant.estimated_completion_time ? "normal" : "italic"
}`}
>
{curGrant.estimated_completion_time
? curGrant.estimated_completion_time + " hours"
Expand All @@ -296,13 +283,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Timeline
</label>
<div
style={{
color: "black",
fontStyle: curGrant.timeline
? "normal"
: "italic",
}}
className="text-left sm:text-sm lg:text-base h-10 w-full"
className={`text-left sm:text-sm lg:text-base h-10 w-full text-black ${
curGrant.timeline ? "" : "italic"
}`}
>
{curGrant.timeline
? curGrant.timeline + " years"
Expand All @@ -318,8 +301,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Amount
</label>
<div
style={{ color: "black" }}
className="text-left sm:text-sm lg:text-base h-10 w-full"
className="text-left sm:text-sm lg:text-base h-10 w-full text-black"
>
{formatCurrency(curGrant.amount)}
</div>
Expand All @@ -336,13 +318,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Report Deadlines
</label>
<div
className="p-2 rounded-md h-[13.5rem] w-4/5 overflow-auto grip "
style={{
backgroundColor: "#F58D5C",
borderStyle: "solid",
borderColor: "black",
borderWidth: "1px",
}}
className="p-2 rounded-md h-[13.5rem] w-4/5 overflow-auto grip bg-[#F58D5C] border border-black"
>
{/*Map each available report deadline to a div label
If no deadlines, add "No deadlines" text */}
Expand All @@ -352,11 +328,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
(deadline: string, index: number) => (
<div
key={index}
style={{
color: "black",
backgroundColor: "#D3D3D3",
}}
className="h-10 flex items-center justify-center w-full rounded-full mb-2 px-4"
className="h-10 flex items-center justify-center w-full rounded-full mb-2 px-4 bg-[#D3D3D3] text-black"
>
{formatDate(deadline)}
</div>
Expand Down Expand Up @@ -435,16 +407,10 @@ const GrantItem: React.FC<GrantItemProps> = observer(
</label>
{/*Box div*/}
<div
className="items-center flex rounded-md"
style={{
backgroundColor: "#F58D5C",
borderColor: "black",
borderWidth: "1px",
}}
className="items-center flex rounded-md bg-[#F58D5C] border border-black"
>
<MdOutlinePerson2 className="w-1/5 h-full p-1" />
<div
style={{ backgroundColor: "#F2EBE4" }}
className="w-4/5 border-l border-black bg-[#FFCEB6] rounded-r-md"
>
<h2
Expand Down Expand Up @@ -485,13 +451,11 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Does BCAN qualify?
</label>
<div
style={{
color: "black",
backgroundColor: curGrant.does_bcan_qualify
className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
curGrant.does_bcan_qualify
? ButtonColorOption.GREEN
: ButtonColorOption.GRAY,
}}
className="w-3/5 h-9 flex items-center justify-center rounded-full px-4"
: ButtonColorOption.GRAY
}`}
>
{curGrant.does_bcan_qualify ? "Yes" : "No"}
</div>
Expand All @@ -506,16 +470,13 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Status
</label>
<div
style={{
color: "black",
backgroundColor:
curGrant.status === "Active"
? ButtonColorOption.GREEN
: curGrant.status === "Potential"
? ButtonColorOption.ORANGE
: ButtonColorOption.GRAY,
}}
className="w-3/5 h-9 flex items-center justify-center rounded-full px-4"
className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
curGrant.status === "Active"
? ButtonColorOption.GREEN
: curGrant.status === "Potential"
? ButtonColorOption.ORANGE
: ButtonColorOption.GRAY
}`}
>
{curGrant.status}
</div>
Expand All @@ -530,13 +491,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Is BCAN Restricted?
</label>
<div
style={{
color: "black",
backgroundColor: curGrant.isRestricted
? "indianred"
: ButtonColorOption.GRAY,
}}
className="w-3/5 h-9 flex items-center justify-center rounded-full px-4"
className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
curGrant.isRestricted ? "bg-[#CD5C5C]" : ButtonColorOption.GRAY
}`}
>
{curGrant.isRestricted
? "Restricted"
Expand All @@ -552,13 +509,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Scope Documents
</label>
<div
className="p-2 rounded-md h-[11.5rem] overflow-auto grip grid-cols-1 gap-4"
style={{
backgroundColor: ButtonColorOption.GRAY,
borderStyle: "solid",
borderColor: "black",
borderWidth: "1px",
}}
className={`p-2 rounded-md h-[11.5rem] overflow-auto grip grid-cols-1 gap-4 border border-black ${
ButtonColorOption.GRAY
}`}
>
{/*Map each available report deadline to a div label
If no deadlines, add "No deadlines" text */}
Expand All @@ -570,14 +523,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
{attachment.url && (
<div
key={index}
style={{
color: "black",
borderStyle: "solid",
borderColor: "black",
borderWidth: "1px",
height: "42px",
}}
className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-tan"
className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-tan h-[42px] border border-black text-black"
>
<a
href={attachment.url}
Expand Down Expand Up @@ -625,13 +571,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Description
</label>
<div
style={{
color: "black",
borderStyle: "solid",
borderColor: "black",
borderWidth: "1px",
}}
className="h-64 bg-tan flex w-full rounded-md p-5 overflow-auto"
className="h-64 bg-tan flex w-full rounded-md p-5 overflow-auto border border-black text-black"
>
{curGrant.description}
</div>
Expand All @@ -642,14 +582,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
<div className="flex justify-between items-center w-full mt-6">
<>
<button
style={{
backgroundColor: "indianred",
color: "white",
borderStyle: "solid",
borderColor: "#8B0000",
borderWidth: "1px",
}}
className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors"
className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors bg-[#CD5C5C] text-white border border-[#8B0000]"
onClick={() => setShowDeleteModal(true)}
>
Delete
Expand All @@ -670,28 +603,16 @@ const GrantItem: React.FC<GrantItemProps> = observer(

<div className="space-x-4">
<button
style={{
backgroundColor: "white",
color: "black",
borderStyle: "solid",
borderColor: "black",
borderWidth: "1px",
}}
className="py-2 px-4 rounded-md"
className="py-2 px-4 rounded-md bg-white text-black border border-black"
onClick={() => setIsExpanded(false)}
>
{"Close"}
</button>

<button
style={{
backgroundColor: ButtonColorOption.ORANGE,
color: "black",
borderStyle: "solid",
borderColor: "black",
borderWidth: "1px",
}}
className="py-2 px-4 rounded-md"
className={`py-2 px-4 rounded-md text-black border border-black ${
ButtonColorOption.ORANGE
}`}
onClick={() => setShowNewGrantModal(true)}
>
{"Edit"}
Expand Down
Loading