From e3301cc200d6d1ff3f1f287a32ed15e5395d121a Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:57:22 -0600
Subject: [PATCH 1/3] Done, but might want to update font size

---
 .../SchedulTotalHoursAndCourses.stories.tsx   | 27 ++++++++
 .../ScheduleTotalHoursAndCourses.tsx          | 64 +++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
 create mode 100644 src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

diff --git a/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx b/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
new file mode 100644
index 00000000..7546c40d
--- /dev/null
+++ b/src/stories/components/SchedulTotalHoursAndCourses.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+
+const meta = {
+    title: 'Components/Common/ScheduleTotalHoursAndCourses',
+    component: ScheduleTotalHoursAndCourses,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        scheduleName: { control: 'text' },
+        totalHours: { control: 'number' },
+        totalCourses: { control: 'number' }
+    },
+} satisfies Meta<typeof ScheduleTotalHoursAndCourses>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        scheduleName: 'text',
+        totalHours: 22,
+        totalCourses: 8
+    },
+};
\ No newline at end of file
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
new file mode 100644
index 00000000..3e655e26
--- /dev/null
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
@@ -0,0 +1,64 @@
+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 Text from '../Text/Text';
+
+/**
+ * Props for ScheduleTotalHoursAndCourses
+ */
+export interface ScheduleTotalHoursAndCoursesProps {
+    scheduleName: string;
+    totalHours: number;
+    totalCourses: number;
+}
+
+/**
+ * The ScheduleTotalHoursAndCourses as per the Labels and Details Figma section
+ *
+ * @param props 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',
+            }}
+        >
+            <Text
+                style={{
+                    color: '#BF5700',
+                }}
+                variant='h1'
+                as='span'
+            >
+                {`${scheduleName}: `}
+            </Text>
+            <Text
+                variant='h3'
+                as='span'
+                style={{
+                    color: '#1A2024'
+                }}
+            >
+                {`${totalHours} HOURS`}
+            </Text>
+            <Text
+                variant='h4'
+                as='span'
+                style={{
+                    color: '#333F48'
+                }}
+            >
+                {`${totalCourses} courses`}
+            </Text>
+        </div>
+    );
+}

From 279ac076b0c0aa3c2795e1c6cedfa449eb88d621 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 2/3] Updated with Tailwind

---
 .../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>

From 1a4d22ccf00bf394060493659e0e4359499930ff Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Fri, 9 Feb 2024 14:33:11 -0600
Subject: [PATCH 3/3] Updated alignment

---
 .../ScheduleTotalHoursAndCourses.tsx          | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
index 2409045e..a63e348a 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
+++ b/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 items-center content-center gap-2 flex-wrap uppercase">
+        <div className="flex min-w-64 content-center gap-2 flex-wrap uppercase items-baseline">
             <Text
                 className="text-[#BF5700]"
                 variant='h1'
@@ -27,17 +27,17 @@ export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours
             </Text>
             <Text
                 variant='h3'
-                as='span'
-                className="text-[#1A2024]"
+                as='div'
+                className="text-[#1A2024] flex flex-row gap-2 items-center"
             >
                 {`${totalHours} HOURS`}
-            </Text>
-            <Text
-                variant='h4'
-                as='span'
-                className="text-[#333F48]"
-            >
-                {`${totalCourses} courses`}
+                <Text
+                    variant='h4'
+                    as='span'
+                    className="text-[#333F48]"
+                >
+                    {`${totalCourses} courses`}
+                </Text>
             </Text>
         </div>
     );