use chip component in header

src/views/components/common/Chip/Chip.tsx

@@ -1,26 +1,37 @@
 import React from 'react';
 import Text from '../Text/Text';
 
-
+/**
-export const flags = ["WR", "QR", "GC", "CD", "E", "II"]
+ * A type that represents the flags that a course can have.
+ */
+export type Flag = 'WR' | 'QR' | 'GC' | 'CD' | 'E' | 'II';
+export const flagMap: Record<string, Flag> = {
+    Writing: 'WR',
+    'Quantitative Reasoning': 'QR',
+    'Global Cultures': 'GC',
+    'Cultural Diversity in the United States': 'CD',
+    Ethics: 'E',
+    'Independent Inquiry': 'II',
+};
 
 interface Props {
-    label: string;
+    label: Flag;
 }
 
 /**
  * A reusable chip component that follows the design system of the extension.
  * @returns
  */
-export function Chip({
+export function Chip({ label }: React.PropsWithChildren<Props>): JSX.Element {
-    label
-}: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <Text as = 'div' variant = 'h4'
+        <Text
-        className="min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5" 
+            as='div'
-        style={{
+            variant='h4'
-            backgroundColor: "#FFD600"
+            className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5'
-        }}>
+            style={{
+                backgroundColor: '#FFD600',
+            }}
+        >
             {label}
         </Text>
     );

src/views/components/injected/CoursePopup2/CourseHeadingAndActions.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Course } from 'src/shared/types/Course';
 import { Button } from '../../common/Button/Button';
+import { Chip, flagMap } from '../../common/Chip/Chip';
 import Icon from '../../common/Icon/Icon';
 import Text from '../../common/Text/Text';
 
@@ -31,20 +32,12 @@ const CourseHeadingAndActions = ({ course, onClose }: CourseHeadingAndActionsPro
                     </Button>
                 </div>
                 <div className='flex gap-2.5 flex-content-center'>
-                    <Text variant='h4'>
+                    <Text variant='h4' className='text-'>
                         with <span className='text-ut-burntorange underline'>{instructorString}</span>
                     </Text>
                     <div className='flex gap-1 flex-content-center'>
                         {flags.map(flag => (
-                            <div className='p flex justify-center flex-content-center rounded-lg bg-ut-yellow px-1 py-px'>
+                            <Chip label={flagMap[flag]} />
-                                {/* get the first letter of each word in flag */}
-                                <Text variant='h4' className='text-ut-black'>
-                                    {flag
-                                        .split(' ')
-                                        .map(word => word.charAt(0))
-                                        .join('')}
-                                </Text>
-                            </div>
                         ))}
                     </div>
                 </div>