Adjusted styles for links in footer.

NASA-PDS · Sep 19, 2024 · 2780059 · 2780059
1 parent d6216f6
commit 2780059
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 30 deletions.
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -5,49 +5,33 @@
 
   a {
     color: #FFFFFF;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-style: dashed;
+      text-underline-offset: .3em;
+    }
+
+    &:focus {
+      outline: .25rem solid var(--pds-secondary-blue-t1);
+      outline-offset: 0;
+    }
+
   }
 
   & .pds-wds-footer-container {
     padding: 39px 40px 56px 40px;
   }
 
   a.pds-wds-footer-primary-link {
-
     color: var(--pds-secondary-white-s2);
     margin-bottom: 19px;
-
-    /* not working due to issues with Typography component */
-    &:hover span {
-      text-decoration: dashed;
-      text-decoration-line: dashed;
-      text-decoration-color: var(--pds-secondary-white-s2);
-    }
-
-    &:focus {
-      outline: .25rem solid var(--pds-secondary-blue-t1);
-      outline-offset: 8;
-    }
-
   }
 
   a.pds-wds-footer-secondary-link {
-
     color: var(--pds-secondary-white-s2);
     margin-bottom: 8px;
     padding: 8px 12px 8px 12px;
-
-    /* not working due to issues with Typography component */
-    &:hover span {
-      text-decoration: dashed;
-      text-decoration-line: dashed;
-      text-decoration-color: var(--pds-secondary-white-s2);
-    }
-
-    &:focus {
-      outline: .25rem solid var(--pds-secondary-blue-t1);
-      outline-offset: 0;
-    }
-
   }
 
   .pds-wds-footer-metadata {

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -5,11 +5,11 @@ import {
   Stack as MuiStack,
   } from "@mui/material";
 import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
+import { Link } from "react-router-dom";
+import { Typography } from "components/Typography";
 import nasaLogo from "../../assets/nasa.svg";
 
 import "./Footer.scss";
-import { Typography } from "components/Typography";
-import { Link } from "react-router-dom";
 
 export type FooterLink = {
   id: string;