fixes + added button titles

src/views/components/common/Button/Button.tsx

@@ -8,6 +8,7 @@ interface Props {
     onClick?: () => void;
     type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
     disabled?: boolean;
+    title?: string;
     testId?: string;
 }
 
@@ -22,6 +23,7 @@ export function Button({
     testId,
     children,
     disabled,
+    title,
     onClick,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
@@ -31,6 +33,7 @@ export function Button({
             className={classNames(styles.button, className, styles[type ?? 'primary'], {
                 [styles.disabled]: disabled,
             })}
+            title={title}
             onClick={disabled ? undefined : onClick}
         >
             {children}

src/views/components/common/Link/Link.tsx

@@ -7,6 +7,7 @@ import styles from './Link.module.scss';
 type Props = Omit<TextProps, 'span'> & {
     url?: string;
     disabled?: boolean;
+    title?: string;
 };
 
 /**

src/views/components/common/Text/Text.tsx

@@ -11,6 +11,7 @@ export type TextProps = {
     span?: boolean;
     className?: string;
     onClick?: () => void;
+    title?: string;
     align?: React.CSSProperties['textAlign'];
     style?: React.CSSProperties;
 };
@@ -32,14 +33,14 @@ export default function Text(props: PropsWithChildren<TextProps>) {
 
     if (props.span) {
         return (
-            <span className={className} style={style} onClick={props.onClick}>
+            <span title={props.title} className={className} style={style} onClick={props.onClick}>
                 {props.children}
             </span>
         );
     }
 
     return (
-        <div className={className} style={style} onClick={props.onClick}>
+        <div title={props.title} className={className} style={style} onClick={props.onClick}>
             {props.children}
         </div>
     );

src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx

@@ -85,19 +85,30 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 disabled={!course.instructors.length}
                 type='primary'
                 className={styles.button}
+                title='Search for this professor on RateMyProfessor'
             >
                 <Text size='medium' weight='regular' color='white'>
                     RateMyProf
                 </Text>
                 <Icon className={styles.icon} color='white' name='school' size='medium' />
             </Button>
-            <Button onClick={openSyllabiURL} type='secondary' className={styles.button}>
+            <Button
+                onClick={openSyllabiURL}
+                type='secondary'
+                className={styles.button}
+                title='Search for syllabi for this course'
+            >
                 <Text size='medium' weight='regular' color='white'>
                     Syllabi
                 </Text>
                 <Icon className={styles.icon} color='white' name='grading' size='medium' />
             </Button>
-            <Button onClick={openTextbookURL} type='tertiary' className={styles.button}>
+            <Button
+                onClick={openTextbookURL}
+                type='tertiary'
+                className={styles.button}
+                title='Search for textbooks for this course'
+            >
                 <Text size='medium' weight='regular' color='white'>
                     Textbook
                 </Text>
@@ -106,6 +117,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 disabled={!activeSchedule}
                 onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
+                title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
                 type={isCourseSaved ? 'danger' : 'success'}
                 className={styles.button}
             >

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

@@ -37,6 +37,7 @@ export default function CourseHeader({ course, activeSchedule, onClose }: Props)
                     size='medium'
                     weight='semi_bold'
                     color='burnt_orange'
+                    title='View course details on UT Course Schedule'
                 >
                     #{course.uniqueId}
                 </Link>
@@ -55,7 +56,13 @@ export default function CourseHeader({ course, activeSchedule, onClose }: Props)
                     return (
                         <>
                             {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
-                            <Link key={name} size='medium' weight='normal' url={url}>
+                            <Link
+                                key={name}
+                                size='medium'
+                                weight='normal'
+                                url={url}
+                                title="View instructor's directory page"
+                            >
                                 {name}
                             </Link>
                             {numInstructors > 2 && !isLast ? ', ' : ''}
@@ -82,6 +89,7 @@ export default function CourseHeader({ course, activeSchedule, onClose }: Props)
                     <Link
                         size='medium'
                         weight='normal'
+                        title='View building on UT Map'
                         url={getBuildingUrl(meeting.location?.building)}
                         disabled={!meeting.location?.building}
                     >

src/views/components/injected/CoursePopup/CoursePopup.module.scss

@@ -1,7 +1,7 @@
 .popup {
     border-radius: 12px;
     position: relative;
-    max-width: 55%;
+    width: 55%;
     overflow-y: auto;
     max-height: 90%;