feat: convert all LabelsAndDetails Components to Tailwind

src/views/components/common/InfoCard/InfoCard.tsx

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

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

@@ -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