Headers and Footers

NCAR · May 1, 2024 · b0bdb3f · b0bdb3f
1 parent 017d3db
commit b0bdb3f
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 85 deletions.
diff --git a/src/assets/nsf-stackseal-logo-lockup-dark.png b/src/assets/nsf-stackseal-logo-lockup-dark.png
diff --git a/src/webPages/Components/HeaderFooter.tsx b/src/webPages/Components/HeaderFooter.tsx
@@ -3,6 +3,11 @@ import Box from '@mui/material/Box';
 import Button from "@mui/material/Button";
 import NavDropDown from './NavDropDown';
 import { Drawer } from '@mui/material';
+import Paper from "@mui/material/Paper";
+import Container from "@mui/material/Container";
+import DensitySmallSharpIcon from '@mui/icons-material/DensitySmallSharp';
+// import Modal from '@mui/material/Modal';
+// import Typography from '@mui/material/Typography';
 
 export const Header = () => {
     const [openDrawer, setOpenDrawer] = React.useState(false);
@@ -11,26 +16,79 @@ export const Header = () => {
     };
 
     return(
-        <div style={{backgroundColor: 'green', height: '70%'}}>
+        <Paper square={true} variant='outlined'>
+            <Button onClick={toggleDrawer(true)}>
+                <DensitySmallSharpIcon sx={{fontSize: 50}}></DensitySmallSharpIcon>
+            </Button> 
             <Drawer open={openDrawer} onClose={toggleDrawer(false)}>
                 <NavDropDown />
             </Drawer>
-            {/* <Button sx={{backgroundColor: 'red'}}>
-                CHEMISTRY CAFE
-            </Button> */}
-        </div>
+        </Paper>
     );
 };
 
 
 export const Footer = () => {
+    const handleBugClick = () => {
+        window.open("https://github.com/NCAR/chemistrycafe/issues", "_blank");
+    };
+
+    const handleAccessabilityClick = () => {
+        window.open("https://www.ucar.edu/accessibility", "_blank");
+    }
+
+    const [aboutOpen, setAboutOpen] = React.useState(false);
+    const handleAboutOpen = () => setAboutOpen(true);
+    const handleAboutClose = () => setAboutOpen(false);
+    const handleAbout = () => {
+        handleAboutOpen();
+    };
+
+    const [collabOpen, setCollabOpen] = React.useState(false);
+    const handleCollabOpen = () => setCollabOpen(true);
+    const handleCollabClose = () => setCollabOpen(false);
+    const handleCollab = () => {
+        handleCollabOpen();
+    };
+
+    const [sponsorOpen, setSponsorOpen] = React.useState(false);
+    const handleSponsorOpen = () => setSponsorOpen(true);
+    const handleSponsorClose = () => setSponsorOpen(false);
+    const handleSponsor = () => {
+        handleSponsorOpen();
+    };
+
     return(
-        <div style={{backgroundColor: 'green', height: '100%',width: '100%'}}>
-            <Button sx={{backgroundColor: 'red', height: '100%'}}>
-                FOOT
-            </Button>
-        </div>
-
-
+        <Paper component="footer" square={true} variant='outlined'>
+            <Container maxWidth="lg" sx={{display: "flex"}}>
+                <Box component="img" src={"src/assets/nsf-stackseal-logo-lockup-dark.png"} sx={{height: "100px", width: "auto", pr: 10}}>
+                </Box>
+                <Box sx={{pr: 10}}>
+                    <Button onClick={handleAbout}>
+                        About
+                    </Button>
+                </Box>
+                <Box sx={{pr: 10}}>
+                    <Button onClick={handleCollab}>
+                        Collaborators
+                    </Button>
+                </Box>
+                <Box sx={{pr: 10}}>
+                    <Button onClick={handleSponsor}>
+                        Sponsors
+                    </Button>
+                </Box>
+                <Box sx={{pr: 10}}>
+                    <Button onClick={handleBugClick} variant="text">
+                        Report a bug
+                    </Button>
+                </Box>
+                <Box sx={{pr: 10}}>
+                    <Button onClick={handleAccessabilityClick}>
+                        Accessability
+                    </Button>
+                </Box>
+            </Container>        
+        </Paper>
     );
 };
diff --git a/src/webPages/Components/Modals.tsx b/src/webPages/Components/Modals.tsx
@@ -1116,7 +1116,7 @@ export const ReactionPropertiesModal: React.FC<ReactionPropertiesModalProps> = (
                     </div>
                     <h1 style={{marginTop: '20px'}}>Properties</h1>
 
-                    {/* <img src="./src/assets/" */}
+
 
 
                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>

diff --git a/src/webPages/Family/family.css b/src/webPages/Family/family.css
@@ -6,7 +6,7 @@
   grid:
     "L1Fam M1 R1" 1fr
     "L2Fam M2 R2" 1fr
-    "L3 M3 R3" 1fr
+    "L3Fam M3 R3" 1fr
     "L4Fam M4 R4" 1fr
     "L5 M5 R5" 1fr
     "L6 M6 R6" 1fr
@@ -20,21 +20,11 @@
 
 
 
-.L1Fam { grid-area: L1Fam; grid-column: span 3;}
-.M1 { grid-area: M1; grid-column: span 2;}
-.R1 { grid-area: R1; }
-.L2Fam { grid-area: L2Fam; height: 80vh; }
-.M2 { grid-area: M2; }
-.R2 { grid-area: R2; }
-.L3 { grid-area: L3; }
-.M3 { grid-area: M3; }
-.R3 { grid-area: R3; }
-.L4Fam { grid-area: L4Fam; grid-column: 1 / 4;}
-.M4 { grid-area: M4; }
-.R4 { grid-area: R4; }
-.L9Fam { grid-area: L9Fam; grid-column: 1 / 4;}
-.M9 { grid-area: M9; }
-.R9 { grid-area: R9; }
+.L1Fam { grid-area: L1Fam; grid-column: span 3; }
+.L2Fam { grid-area: L2Fam; grid-row: span 2; }
+.L3Fam { grid-area: L3Fam; }
+.L8Fam { grid-area: L9Fam; grid-column: 1 / 4; }
+.L9Fam { grid-area: L9Fam; grid-column: 1 / 4; }
 
 
 .modal-visible {

diff --git a/src/webPages/Family/family.tsx b/src/webPages/Family/family.tsx
@@ -7,19 +7,11 @@ import { CreateDOIModal, CreateFamilyModal, CreatePublishModal, CreateShareModal
 
 import { StyledHeader, StyledDetailBox } from './familyStyling';
 
-import { Drawer } from '@mui/material';
-import Button from "@mui/material/Button";
-import DensitySmallSharpIcon from '@mui/icons-material/DensitySmallSharp';
-
 import { Header, Footer } from '../Components/HeaderFooter';
 
 import "./family.css";
 
 const FamilyPage = () => {    
-    const [openDrawer, setOpenDrawer] = React.useState(false);
-    const toggleDrawer = (newOpenDrawer: boolean) => () => {
-      setOpenDrawer(newOpenDrawer);
-    };
 
     const [selectedFamily, setSelectedFamily] = useState<string | null>(null);
     const [selectedTagMechanism, setSelectedTagMechanism] = useState<string | null>(null);
@@ -36,16 +28,9 @@ const FamilyPage = () => {
 
     return (
         <section className="layoutFam">
-            {/* <div className='L1Fam'>
-                <Header></Header>
-            </div> */}
-
-            <div className="L1Fam">
-                <Button onClick={toggleDrawer(true)}>
-                    <DensitySmallSharpIcon sx={{fontSize: 50}}></DensitySmallSharpIcon>
-                </Button> 
-                <StyledHeader>
-                </StyledHeader>
+            <div className='L1Fam'>
+                <Header>
+                </Header>
             </div>
 
             <div className="L2Fam" style={{overflow: 'auto'}}>
@@ -62,21 +47,15 @@ const FamilyPage = () => {
                 />
             </div>
 
-            {/* <div className='L9Fam'>
+            <div className='L9Fam'>
                 <Footer>
-
                 </Footer>
-            </div> */}
+            </div>
 
             <StyledDetailBox>
                 <RenderSpeciesReactionTable selectedFamily={selectedFamily} selectedTagMechanism={selectedTagMechanism} />
             </StyledDetailBox>
 
-
-            <Drawer open={openDrawer} onClose={toggleDrawer(false)}>
-                <NavDropDown />
-            </Drawer>
-
             <CreateFamilyModal 
                 open={createFamilyOpen}
                 onClose={handleCreateFamilyClose} 

diff --git a/src/webPages/LogIn/logIn.css b/src/webPages/LogIn/logIn.css
@@ -12,7 +12,7 @@
       "L6 M6 R6" 1fr
       "L7 M7 R7" 1fr
       "L8 M8 R8" 1fr
-      "L9 M9 R9" 1fr
+      "L9LogIn M9 R9" 1fr
       / 1fr 1fr 1fr;
     background-color: #C3D7EE;
     /* background-color: black; */
@@ -43,5 +43,8 @@
 .L7 { grid-area: L7; }
 .M7 { grid-area: M7; }
 .R7 { grid-area: R7; }
+.L9LogIn {grid-area: L9LogIn; grid-column: span 3;}
+.M9 { grid-area: M9; }
+.R9 { grid-area: R9; }
 
 
diff --git a/src/webPages/LogIn/logIn.tsx b/src/webPages/LogIn/logIn.tsx
@@ -8,9 +8,10 @@ import Button from "@mui/material/Button";
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
 import Typography from '@mui/material/Typography';
-import { colors } from '@mui/material';
 import GoogleIcon from '@mui/icons-material/Google';
 import NoAccountsIcon from '@mui/icons-material/NoAccounts';
+import { Footer } from '../Components/HeaderFooter';
+
 
 interface User {
     access_token: string;
@@ -82,6 +83,7 @@ interface Profile {
 
         return (
           <section className="layoutLogIn">
+
             <div className="M2">
                 <Box sx={{ width: '100%', maxWidth: 700 }}>
                     <Typography variant="h2" sx={{color: 'white'}}>
@@ -158,6 +160,10 @@ interface Profile {
                         </Box>
                     </Modal>
             </div>
+
+            <div className='L9LogIn'>
+                <Footer></Footer>
+            </div>
           </section>
         );
 

diff --git a/src/webPages/LogIn/loggedIn.css b/src/webPages/LogIn/loggedIn.css
@@ -4,22 +4,22 @@
 
     display: grid;
     grid:
-      "L1 M1 R1" 1fr
+      "L1LoggedIn M1 R1" 1fr
       "L2 M2 R2" 1fr
       "L3 M3 R3" 1fr
       "L4 M4 R4" 1fr
       "L5 M5 R5" 1fr
       "L6 M6 R6" 1fr
       "L7 M7 R7" 1fr
       "L8 M8 R8" 1fr
-      "L9 M9 R9" 1fr
+      "L9LoggedIn M9 R9" 1fr
       / 1fr 1fr 1fr;
     background-color: #C3D7EE;
   }
 
 
 
-  .L1 { grid-area: L1; }
+  .L1LoggedIn { grid-area: L1LoggedIn; grid-column: span 3;}
   .M1 { grid-area: M1; }
   .R1 { grid-area: R1; }
   .L2 { grid-area: L2; }
@@ -34,6 +34,9 @@
   .L5 { grid-area: L5; }
   .M5 { grid-area: M5; }
   .R5 { grid-area: R5; }
+  .L9LoggedIn {grid-area: L9LoggedIn; grid-column: span 3;}
+  .M9 { grid-area: M9; }
+  .R9 { grid-area: R9; }
 
 
 
diff --git a/src/webPages/LogIn/loggedIn.tsx b/src/webPages/LogIn/loggedIn.tsx
@@ -2,10 +2,8 @@ import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
-import Drawer from '@mui/material/Drawer';
-import NavDropDown from '../Components/NavDropDown';
 
-import DensitySmallSharpIcon from '@mui/icons-material/DensitySmallSharp';
+import { Header, Footer } from '../Components/HeaderFooter';
 
 import "./loggedIn.css";
 
@@ -14,22 +12,15 @@ import "./loggedIn.css";
     const handleClickFam = () => navigate('/FamilyPage');
     const handleClickSettings = () => navigate('/Settings');
 
-    const [openDrawer, setOpenDrawer] = React.useState(false);
-    const toggleDrawer = (newOpenDrawer: boolean) => () => {
-      setOpenDrawer(newOpenDrawer);
-    };
-
     const style = {
       height: '75px',
       width: '500px',
     };
         return (
           <section className='layoutLoggedIn'>
 
-            <div className='L1'>
-              <Button onClick={toggleDrawer(true)}>
-                <DensitySmallSharpIcon sx={{fontSize: 50}}></DensitySmallSharpIcon>
-              </Button>
+            <div className='L1LoggedIn'>
+              <Header></Header>
             </div>
 
             <div className="M4">
@@ -43,12 +34,11 @@ import "./loggedIn.css";
                 </Button>
               </ButtonGroup>
             </div>
-
-            <div>
-              <Drawer open={openDrawer} onClose={toggleDrawer(false)}>
-                <NavDropDown />
-              </Drawer>
+
+            <div className='L9LoggedIn'>
+              <Footer></Footer>
             </div>
+
           </section>
 
         );
-Original file line number
+Diff line change
@@ Expand Up @@
                         </div>
                         <h1 style={{marginTop: '20px'}}>Properties</h1>
-                        {/* <img src="./src/assets/" */}
                         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ Expand Down @@