From 7afdbac1b8a621618a8f79d2dda361c4670c759e Mon Sep 17 00:00:00 2001
From: Abhinav Chadaga <abhinav.chadaga@utexas.edu>
Date: Sat, 17 Feb 2024 16:37:01 -0600
Subject: [PATCH] description stuff done

---
 .../injected/CoursePopup/CoursePopup.tsx      |  8 +++--
 .../CoursePopup/CoursePopupDescriptions.tsx   | 30 +++++++++++++++++++
 .../CoursePopupGradeDistribution.tsx          |  7 +++++
 ...s.tsx => CoursePopupHeadingAndActions.tsx} |  1 +
 4 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/views/components/injected/CoursePopup/CoursePopupDescriptions.tsx
 create mode 100644 src/views/components/injected/CoursePopup/CoursePopupGradeDistribution.tsx
 rename src/views/components/injected/CoursePopup/{CourseHeadingAndActions.tsx => CoursePopupHeadingAndActions.tsx} (99%)

diff --git a/src/views/components/injected/CoursePopup/CoursePopup.tsx b/src/views/components/injected/CoursePopup/CoursePopup.tsx
index 320ed7cb..1f41f55e 100644
--- a/src/views/components/injected/CoursePopup/CoursePopup.tsx
+++ b/src/views/components/injected/CoursePopup/CoursePopup.tsx
@@ -2,7 +2,8 @@ import Popup from '@views/components/common/Popup/Popup';
 import React from 'react';
 import { Course } from 'src/shared/types/Course';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
-import CourseHeadingAndActions from './CourseHeadingAndActions';
+import CoursePopupDescriptions from './CoursePopupDescriptions';
+import CoursePopupHeadingAndActions from './CoursePopupHeadingAndActions';
 
 interface CoursePopup2Props {
     course: Course;
@@ -11,9 +12,10 @@ interface CoursePopup2Props {
 }
 
 const CoursePopup = ({ course, activeSchedule, onClose }: CoursePopup2Props) => (
-    <Popup overlay className='px-6' onClose={onClose}>
+    <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
         <div className='flex flex-col'>
-            <CourseHeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
+            <CoursePopupHeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
+            <CoursePopupDescriptions lines={course.description} />
         </div>
     </Popup>
 );
diff --git a/src/views/components/injected/CoursePopup/CoursePopupDescriptions.tsx b/src/views/components/injected/CoursePopup/CoursePopupDescriptions.tsx
new file mode 100644
index 00000000..8690b15a
--- /dev/null
+++ b/src/views/components/injected/CoursePopup/CoursePopupDescriptions.tsx
@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import React from 'react';
+import Text from '../../common/Text/Text';
+
+interface CoursePopupDescriptionsProps {
+    lines: string[];
+}
+
+const CoursePopupDescriptions: React.FC<CoursePopupDescriptionsProps> = ({ lines }: CoursePopupDescriptionsProps) => {
+    const keywords = ['prerequisite', 'restricted'];
+    return (
+        <ul className='my-[5px] space-y-1.5 children:marker:text-ut-burntorange'>
+            {lines.map(line => {
+                const isKeywordPresent = keywords.some(keyword => line.toLowerCase().includes(keyword));
+                return (
+                    <div className='flex gap-2'>
+                        <span className='text-ut-burntorange'>•</span>
+                        <li key={line}>
+                            <Text variant='p' className={clsx({ 'font-bold text-ut-burntorange': isKeywordPresent })}>
+                                {line}
+                            </Text>
+                        </li>
+                    </div>
+                );
+            })}
+        </ul>
+    );
+};
+
+export default CoursePopupDescriptions;
diff --git a/src/views/components/injected/CoursePopup/CoursePopupGradeDistribution.tsx b/src/views/components/injected/CoursePopup/CoursePopupGradeDistribution.tsx
new file mode 100644
index 00000000..f16656cc
--- /dev/null
+++ b/src/views/components/injected/CoursePopup/CoursePopupGradeDistribution.tsx
@@ -0,0 +1,7 @@
+interface CoursePopupGradeDistributionProps {}
+
+const CoursePopupGradeDistribution: React.FC<
+    CoursePopupGradeDistributionProps
+> = ({}: CoursePopupGradeDistributionProps) => {};
+
+export default CoursePopupGradeDistribution;
diff --git a/src/views/components/injected/CoursePopup/CourseHeadingAndActions.tsx b/src/views/components/injected/CoursePopup/CoursePopupHeadingAndActions.tsx
similarity index 99%
rename from src/views/components/injected/CoursePopup/CourseHeadingAndActions.tsx
rename to src/views/components/injected/CoursePopup/CoursePopupHeadingAndActions.tsx
index 65c006a8..b0b18812 100644
--- a/src/views/components/injected/CoursePopup/CourseHeadingAndActions.tsx
+++ b/src/views/components/injected/CoursePopup/CoursePopupHeadingAndActions.tsx
@@ -130,6 +130,7 @@ const CourseHeadingAndActions = ({ course, onClose, activeSchedule }: CourseHead
                     Add Course
                 </Button>
             </div>
+            <Divider />
         </div>
     );
 };