feat: add explanation to grade distribution (#325)

* feat: add 'About the data' link to grade distribution chart

* chore: change the About the data text style/variant to small

---------

Co-authored-by: doprz <[email protected]>

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -1,6 +1,7 @@
 import type { Course } from '@shared/types/Course';
 import type { Distribution, LetterGrade } from '@shared/types/Distribution';
 import { extendedColors } from '@shared/types/ThemeColors';
+import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
 import {
     NoDataError,
@@ -13,6 +14,8 @@ import type { ChangeEvent } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
+const UT_GRADE_DISTRIBUTION_URL = 'https://reports.utexas.edu/spotlight-data/ut-course-grade-distributions';
+
 interface GradeDistributionProps {
     course: Course;
 }
@@ -246,6 +249,9 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
                                     </option>
                                 ))}
                         </select>
+                        <Link variant='small' href={UT_GRADE_DISTRIBUTION_URL} className='link'>
+                            About the data
+                        </Link>
                     </div>
                     {distributions[semester] && !distributions[semester]!.instructorIncluded && (
                         <div className='mt-3 flex flex-wrap content-center items-center self-stretch justify-center gap-3'>