fixing links to be more accessible by adding underline

UniversityOfHelsinkiCS · Oct 17, 2024 · 689f435 · 689f435
1 parent b839630
commit 689f435
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/client/components/Footer-default.jsx b/src/client/components/Footer-default.jsx
@@ -56,7 +56,7 @@ const Footer = ({ user }) => {
           <div>
             <Typography>
               {t('footer:contactSupport')}:{' '}
-              <Link href={`mailto:${t('links:supportEmail')}`} underline="hover">
+              <Link href={`mailto:${t('links:supportEmail')}`} underline="always">
                 {t('links:supportEmail')}
               </Link>
             </Typography>
@@ -71,7 +71,7 @@ const Footer = ({ user }) => {
             )}
           </div>
           <Box display="flex" flexDirection="column" alignItems="center" rowGap="1rem">
-            <Link href={t('links:toska')} target="_blank" rel="noopener" underline="hover">
+            <Link href={t('links:toska')} target="_blank" rel="noopener" underline="always">
               <img src={images.toska_color} loading="lazy" style={styles.logo} alt="Toska" />
             </Link>
             {duration && (

diff --git a/src/client/components/common/ExternalLink.jsx b/src/client/components/common/ExternalLink.jsx
@@ -10,7 +10,7 @@ const styles = {
 }
 
 const ExternalLink = ({ children, ...props }) => (
-  <Link target="_blank" rel="noopener" {...props} underline="hover">
+  <Link target="_blank" rel="noopener" {...props} underline="always">
     {children}
     <ExternalLinkIcon sx={styles.icon} />
   </Link>

diff --git a/src/client/components/common/LinkButton.jsx b/src/client/components/common/LinkButton.jsx
@@ -11,7 +11,12 @@ const LinkButton = ({ title, to, external = false, ...rest }) => {
   }
 
   return (
-    <Button {...rest} size="small" {...buttonProps}>
+    <Button
+      {...rest}
+      size="small"
+      {...buttonProps}
+      sx={{ textDecoration: 'underline', '&:hover': { textDecoration: 'underline' } }}
+    >
       {title}
     </Button>
   )