Updated components/pages to use the new Picture component

qresp-code-development · Oct 20, 2020 · 193c57c · 193c57c
1 parent 715abfd
commit 193c57c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 38 deletions.
diff --git a/frontend/components/footer.js b/frontend/components/footer.js
@@ -1,4 +1,5 @@
 import { Box, Typography } from "@material-ui/core";
+import Picture from "./picture";
 
 const Footer = () => {
   const style = {
@@ -22,25 +23,25 @@ const Footer = () => {
         p={4}
       >
         <a href="http://miccom-center.org/" target="_blank" rel="noopener">
-          <img
-            src="/images/MICCoMLogo.webp"
+          <Picture
+            imgSrc="/images/MICCoMLogo"
+            imgAlt="Miccom Logo"
             height="48px"
-            alt="Miccom Logo"
-          ></img>
+          />
         </a>
         <a href="https://www.anl.gov/" target="_blank" rel="noopener">
-          <img
-            src="/images/ArgonneLogo.webp"
+          <Picture
+            imgSrc="/images/ArgonneLogo"
+            imgAlt="Miccom Logo"
             height="48px"
-            alt="Argonne National Lab Logo"
-          ></img>
+          />
         </a>
         <a href="https://www.uchicago.edu/" target="_blank" rel="noopener">
-          <img
-            src="/images/UchicagoLogo.webp"
+          <Picture
+            imgSrc="/images/UchicagoLogo"
+            imgAlt="Miccom Logo"
             height="48px"
-            alt="University of Chicago Logo"
-          ></img>
+          />
         </a>
       </Box>
       <Box

diff --git a/frontend/components/header.js b/frontend/components/header.js
@@ -16,6 +16,9 @@ import StyledButton, {
   InternalStyledButton,
   ExternalStyledButton,
 } from "./button";
+
+import Picture from "./picture";
+
 import Link from "next/link";
 
 const Header = () => {
@@ -74,11 +77,11 @@ const Header = () => {
             <Box display="flex" alignItems="center" flexGrow={1}>
               <Link href="/">
                 <Button>
-                  <img
-                    src="/images/Qresp-logo.png"
+                  <Picture
+                    imgSrc="/images/qrespLogo"
+                    imgAlt="Qresp Logo"
                     height="64px"
-                    alt="Qresp Logo"
-                  ></img>
+                  />
                 </Button>
               </Link>
             </Box>

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { InternalStyledButton } from "../components/button";
 import SEO from "../components/seo";
+import Picture from "../components/picture";
 import { Box, Typography, Container } from "@material-ui/core";
 
 export default function Home() {
@@ -23,12 +24,17 @@ export default function Home() {
             maxHeight: "48vh",
           }}
         >
-          <img
-            src="/images/qrespPoster.webp"
+          <Picture
+            imgSrc="/images/qrespPoster"
+            imgAlt="Qresp Banner Blurred Background"
             width="100%"
             className="blur"
-          ></img>
-          <img src="/images/qrespPoster.webp" className="poster"></img>
+          />
+          <Picture
+            imgSrc="/images/qrespPoster"
+            imgAlt="Qresp Banner"
+            className="poster"
+          />
         </div>
         <Box display="flex" m={3} alignItems="center" justifyContent="center">
           <Container>
@@ -56,24 +62,6 @@ export default function Home() {
           </Container>
         </Box>
       </Box>
-      <style jsx>
-        {`
-          .poster {
-            object-fit: scale-down;
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%);
-            min-height: 48vmin;
-            max-width: 125vmin;
-          }
-
-          .blur {
-            overflow: hidden;
-            height: 48vmin;
-            filter: blur(10px);
-          }
-        `}
-      </style>
     </Fragment>
   );
 }