From f3a8a7db560a6b28f96a2e976c8ed33af97fe77a Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Fri, 9 Feb 2024 12:05:02 -0600
Subject: [PATCH] feat: update with TailwindCSS

---
 .../SchedulTotalHoursAndCourses.stories.tsx   |  2 +-
 .../ScheduleTotalHoursAndCourses.tsx          | 30 ++++---------------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx b/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
index 7546c40d..8164c8c6 100644
--- a/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
+++ b/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        scheduleName: 'text',
+        scheduleName: 'SCHEDULE',
         totalHours: 22,
         totalCourses: 8
     },
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
index 3e655e26..2409045e 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
@@ -1,9 +1,4 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
-import { Course, Status } from '@shared/types/Course';
-import { StatusIcon } from '@shared/util/icons';
-import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
-import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
+import React from 'react';
 import Text from '../Text/Text';
 
 /**
@@ -22,20 +17,9 @@ export interface ScheduleTotalHoursAndCoursesProps {
  */
 export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div
-            style={{
-                display: 'flex',
-                minWidth: '245px',
-                alignItems: 'center',
-                alignContent: 'center',
-                gap: '5px 10px',
-                flexWrap: 'wrap',
-            }}
-        >
+        <div className="flex min-w-64 items-center content-center gap-2 flex-wrap uppercase">
             <Text
-                style={{
-                    color: '#BF5700',
-                }}
+                className="text-[#BF5700]"
                 variant='h1'
                 as='span'
             >
@@ -44,18 +28,14 @@ export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours
             <Text
                 variant='h3'
                 as='span'
-                style={{
-                    color: '#1A2024'
-                }}
+                className="text-[#1A2024]"
             >
                 {`${totalHours} HOURS`}
             </Text>
             <Text
                 variant='h4'
                 as='span'
-                style={{
-                    color: '#333F48'
-                }}
+                className="text-[#333F48]"
             >
                 {`${totalCourses} courses`}
             </Text>