Modified Footer links, added links.ts to store test links

cisagov · Apr 5, 2024 · 91b0afc · 91b0afc
1 parent 1ae0357
commit 91b0afc
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 25 deletions.
diff --git a/frontend/src/components/ReadySetCyber/RSCFooter.tsx b/frontend/src/components/ReadySetCyber/RSCFooter.tsx
@@ -7,11 +7,13 @@ import {
   Link,
   Menu,
   MenuItem,
-  Typography, 
+  Typography,
+  Stack, 
 } from '@mui/material';
 import LogoutIcon from '@mui/icons-material/Logout';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'; // Import the AccountCircle icon
 import cisaFooterLogo from './assets/cisa_footer_logo.png'; // Import the logo
+import { links } from './links';
 
 export const RSCFooter: React.FC = () => {
   const [value, setValue] = React.useState(0);
@@ -49,40 +51,58 @@ export const RSCFooter: React.FC = () => {
         }}
       >
         <Grid container direction="column" alignItems="flex-start">
-          <Box sx={{ display: 'flex', alignItems: 'center', paddingLeft: '4em', paddingTop: '1.5em' }}>
-            <Box sx={{ marginRight: '1em' }}>
+         <Stack>
+          <Box sx={{ 
+            display: 'flex', 
+            alignItems: 'flex-start', 
+            paddingLeft: '4em', 
+            paddingTop: '1.5em' 
+            }}
+            >
+            <Box sx={{ marginRight: '0.7em' }}>
               <img src={cisaFooterLogo} 
                 alt="CISA Footer Logo"
                 style={{
                   width: 55,
                   height: 55, 
                   flexShrink: 0,
                 }}
-              /> {/* Use the logo */}
-            </Box>
-            <Box>
-            <Typography variant="h7" style={{ color: 'white' }}>{`CISA.gov\nAn Official website of the U.S. Department of Homeland Security`}</Typography>
-            {/* <Typography variant="h6" style={{ color: 'white' }}>CISA.gov</Typography> */}
+              /> 
             </Box>
+            <Box sx={{paddingTop: '0.2em'}}>
+            <Typography style={{ 
+              color: 'white',
+              fontSize: '0.85em', 
+              }}>
+              CISA.gov
+              </Typography>
+            <Typography style={{ 
+              color: 'white',
+              fontSize: '0.85em', 
+              }}>
+              An Official website of the U.S. Department of Homeland Security
+              </Typography>
+             </Box>
           </Box>
-          <Box sx={{ marginTop: '1em' }}>
-            <Grid container spacing={2}>
-              {Array.from({ length: 12 }).map((_, index) => (
-                <Grid item xs={4} key={index}>
-                  <Link 
-                    style={{ 
-                      color: 'white',
-                      textDecoration: 'underline',
-                      fontSize: 10,
-                     }}
-                    href={`#link${index + 1}`} 
+            <Box sx={{ paddingLeft: '4em' }}>
+              <Grid container spacing={2}>
+                {links.map((link, index) => (
+                  <Grid item xs={3} key={index}>
+                    <Link 
+                      style={{ 
+                        color: 'white',
+                        textDecoration: 'underline',
+                        fontSize: '0.9em',
+                      }}
+                      href={link.href}
                     >
-                    Link {index + 1}
-                  </Link>
-                </Grid>
-              ))}
-            </Grid>
-          </Box>
+                      {link.text}
+                    </Link>
+                  </Grid>
+                ))}
+              </Grid>
+            </Box>
+          </Stack>
         </Grid>
       </BottomNavigation>
     </Box>

diff --git a/frontend/src/components/ReadySetCyber/links.ts b/frontend/src/components/ReadySetCyber/links.ts
@@ -0,0 +1,14 @@
+export const links = [
+    { text: 'About CISA', href: '#link1' },
+    { text: 'Accessibility', href: '#link2' },
+    { text: 'Budget and Performance', href: '#link3' },
+    { text: 'DHS.gov', href: '#link10' },
+    { text: 'FOIA Requests', href: '#link4' },
+    { text: 'No FEAR Act', href: '#link5' },
+    { text: 'Office of Inspector General', href: '#link6' },
+    { text: 'Privacy Policy', href: '#link11' },
+    { text: 'Subscribe', href: '#link7' },
+    { text: 'The White House', href: '#link8' },
+    { text: 'USA.gov', href: '#link9' },
+    { text: 'Website Feedback', href: '#link12' },
+  ];