Standardize hyperlink colors

Author: edwardneo

csm_web/frontend/src/components/course/SectionCard.tsx

@@ -171,7 +171,9 @@ export const SectionCard = ({
           </p>
           <p title="Mentor">
             <UserIcon width={iconWidth} height={iconHeight} />{" "}
-            <Link to={`/profile/${mentor.user.id}`}>{mentor.name}</Link>
+            <Link className="hyperlink" to={`/profile/${mentor.user.id}`}>
+              {mentor.name}
+            </Link>
           </p>
           <p title="Current enrollment">
             <GroupIcon width={iconWidth} height={iconHeight} /> {`${numStudentsEnrolled}/${capacity}`}

csm_web/frontend/src/components/section/MentorSectionInfo.tsx

@@ -60,7 +60,8 @@ export default function MentorSectionInfo({
       <h3 className="section-detail-page-title">
         {isCoordinator ? (
           <>
-            <Link to={`/profile/${mentor.user.id}`}>{`${mentor.name || mentor.email}`}</Link>&apos;s
+            <Link className="hyperlink" to={`/profile/${mentor.user.id}`}>{`${mentor.name || mentor.email}`}</Link>
+            &apos;s
           </>
         ) : (
           "My"
@@ -103,7 +104,7 @@ export default function MentorSectionInfo({
                               courseRestricted={courseRestricted}
                             />
                           )}
-                          <Link to={`/profile/${studentUser.id}`}>
+                          <Link className="hyperlink" to={`/profile/${studentUser.id}`}>
                             <span className="student-info">{name || email}</span>
                           </Link>
                         </td>

csm_web/frontend/src/components/section/MentorSectionRoster.tsx

@@ -41,7 +41,9 @@ export default function MentorSectionRoster({ id }: MentorSectionRosterProps) {
             {students.map(({ name, email, id, user: studentUser }) => (
               <tr key={id} className="csm-table-row">
                 <td className="csm-table-item">
-                  <Link to={`/profile/${studentUser.id}`}>{name}</Link>
+                  <Link className="hyperlink" to={`/profile/${studentUser.id}`}>
+                    {name}
+                  </Link>
                 </td>
                 <td className="csm-table-item">{email}</td>
               </tr>

csm_web/frontend/src/components/section/StudentSection.tsx

@@ -86,7 +86,9 @@ function StudentSectionInfo({ mentor, spacetimes, associatedProfileId }: Student
         {mentor && (
           <InfoCard title="Mentor">
             <h5>
-              <Link to={`/profile/${mentor.user.id}`}>{mentor.name}</Link>
+              <Link className="hyperlink" to={`/profile/${mentor.user.id}`}>
+                {mentor.name}
+              </Link>
             </h5>
             <a href={`mailto:${mentor.email}`}>{mentor.email}</a>
           </InfoCard>

csm_web/frontend/src/css/base/base.scss

@@ -84,3 +84,15 @@ h6 {
 
   border-radius: 20px;
 }
+
+// Styling for hyperlinks
+.hyperlink {
+  color: $csm-link-blue;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $csm-link-blue;
+  }
+}