Converted all LabelsAndDetails Components to Tailwind

This commit is contained in:
knownotunknown
2024-02-17 11:06:36 -06:00
parent f049a25aac
commit 8e3502593e
2 changed files with 21 additions and 34 deletions

View File

@@ -15,39 +15,26 @@ export function InfoCard({
bodyText
}: React.PropsWithChildren<Props>): JSX.Element {
return (
<div style = {{
display: "flex",
width: "200px",
minWidth: "200px",
maxWidth: "200px",
padding: "15px",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
borderRadius: "4px",
border: "1px solid #D6D2C4",
background: "#FFF" //White
}}>
<div style = {{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: "7px",
alignSelf: "stretch",
<div
className = 'w-50 flex flex-col items-start justify-center border rounded p-4'
style = {{
border: "1px solid #D6D2C4",
background: "#FFF" // White
}}>
<Text variant = "h4" as = 'span'
style = {{
color: '#F8971F', //Orange
}}>
{titleText}
</Text>
<Text variant = "small" as = 'span'
style = {{
color: '#333F48', //Black
}}>
{bodyText}
</Text>
</ div>
<div className="flex flex-col items-start self-stretch gap-1.5">
<Text variant = "h4" as = 'span'
style = {{
color: '#F8971F', // Orange
}}>
{titleText}
</Text>
<Text variant = "small" as = 'span'
style = {{
color: '#333F48', // Black
}}>
{bodyText}
</Text>
</ div>
</div>
);
}

View File

@@ -17,7 +17,7 @@ export interface ScheduleTotalHoursAndCoursesProps {
*/
export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
return (
<div className="flex min-w-64 content-center gap-2 flex-wrap uppercase items-baseline">
<div className="min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase">
<Text
className="text-[#BF5700]"
variant='h1'
@@ -28,7 +28,7 @@ export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours
<Text
variant='h3'
as='div'
className="text-[#1A2024] flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2 text-[#1A2024]"
>
{`${totalHours} HOURS`}
<Text