description stuff done

Author: abhinavchadaga

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>
 );

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;

src/views/components/injected/CoursePopup/CoursePopupGradeDistribution.tsx

@@ -0,0 +1,7 @@
+interface CoursePopupGradeDistributionProps {}
+
+const CoursePopupGradeDistribution: React.FC<
+    CoursePopupGradeDistributionProps
+> = ({}: CoursePopupGradeDistributionProps) => {};
+
+export default CoursePopupGradeDistribution;

src/views/components/injected/CoursePopup/CourseHeadingAndActions.tsx src/views/components/injected/CoursePopup/CoursePopupHeadingAndActions.tsx

@@ -130,6 +130,7 @@ const CourseHeadingAndActions = ({ course, onClose, activeSchedule }: CourseHead
                     Add Course
                 </Button>
             </div>
+            <Divider />
         </div>
     );
 };