Fix images for build (#56)

* fix: imagery on fab * fix: imagery on home page * fix: imagery on nav --------- Co-authored-by: Matthew Stankiewicz <[email protected]>
onc-healthit · May 1, 2024 · b76aab1 · b76aab1
1 parent c87efc1
commit b76aab1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/src/components/home/SiteHomeRows.tsx b/src/components/home/SiteHomeRows.tsx
@@ -13,7 +13,8 @@ import igSvg from '@public/home/ig.svg'
 import iheSvg from '@public/home/ihe.svg'
 import infernoSvg from '@public/home/inferno.svg'
 import lanternSvg from '@public/home/lantern.svg'
-import nistSvg from '@public/home/nist.svg'
+import ONCLogo from '@public/shared/ONCLogo-backgroundImage.png'
+import Image from 'next/image'
 
 import referenceDataSvg from '@public/home/reference-data.svg'
 import CardWithImageHome from '@shared/CardWithImageHome'
@@ -26,7 +27,6 @@ export default function SiteHomeRows() {
   const maxWidth: number = 350
   const rowPaddingBottom: number = 20
   const industryTestingResourceRow: number = 350
-  const imageURL: string = '../shared/ONCLogo-backgroundImage.png'
 
   const containerNoDragStyles = {
     display: 'flex',
@@ -50,17 +50,27 @@ export default function SiteHomeRows() {
     },
   }
   return (
-    <>
-      <Box
-        bgcolor={palette.primary}
-        sx={{
-          backgroundImage: `url(${imageURL})`,
-          backgroundPosition: 'center',
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundColor: palette.primary,
-        }}
-      >
+    <Box sx={{ position: 'relative' }}>
+      <Box>
+        <Image
+          style={{
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundColor: palette.primary,
+            top: 0,
+            left: 0,
+            position: 'absolute',
+            zIndex: -1,
+            overflowX: 'clip',
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+          }}
+          src={ONCLogo}
+          alt="ONC Logo"
+        />
+      </Box>
+      <Box>
         <Container>
           {/* Row 1: Scrollable: ONC Certification Tools*/}
           <SectionHeader
@@ -279,6 +289,6 @@ export default function SiteHomeRows() {
           </Box>
         </Container>
       </Box>
-    </>
+    </Box>
   )
 }
diff --git a/src/components/shared/CommunicationFab.tsx b/src/components/shared/CommunicationFab.tsx
@@ -21,12 +21,13 @@ import CloseIcon from '@mui/icons-material/Close'
 import LinkButton from './LinkButton'
 
 import palette from '@/styles/palette'
+import placeholder from '@public/shared/PlaceHolderImageSITE.png'
+import Image from 'next/image'
 
 const drawerWidth = 300
 
 const CommunicationFab: React.FC = () => {
   const [drawerOpen, setDrawerOpen] = useState(false)
-  const placeholder = '../shared/PlaceHolderImageSITE.png'
   const handleDrawerOpen = () => {
     setDrawerOpen(true)
   }
@@ -50,7 +51,9 @@ const CommunicationFab: React.FC = () => {
       >
         <Box p={2} display={'flex'} flexDirection={'column'} gap={4}>
           <Card>
-            <CardMedia style={{ height: '200px' }} component="div" image={placeholder} />
+            <CardMedia sx={{ width: 'auto' }}>
+              <Image style={{ width: 'auto', height: 'auto' }} src={placeholder} alt="Placeholder" />
+            </CardMedia>
             <CardHeader title="New release of UI, gets great feedback from users" />
             <CardContent>
               <Typography>

diff --git a/src/components/shared/nav/nav/NavHeader.tsx b/src/components/shared/nav/nav/NavHeader.tsx
@@ -5,6 +5,7 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
 import Image from 'next/image'
+import SITELogo from '@public/shared/site-nav-logo.svg'
 import { NAV_THICKER_DIVIDER } from '@/constants/navConstants'
 
 // const DrawerHeader = styled('div')(({ theme }) => ({
@@ -34,7 +35,7 @@ export default function NavHeader({ handleDrawerClose, theme }: SiteNavHeaderPro
       >
         <a href="/">
           <Image
-            src="/shared/site-nav-logo.svg"
+            src={SITELogo}
             width={250}
             height={42}
             alt="SITE logo with text: The hub for testing tools & resources"