Add images and styling fixes

Author: rachelekm

demo/app/public/BlackSkyLogo.png

@@ -1,13 +1,13 @@
 import Container from '@components/Container';
-
+import { E84Logo } from './../../utils/constants';
 import styles from './Footer.module.scss';
 
 const Footer = ({ ...rest }) => {
   return (
     <footer className={styles.footer} {...rest}>
       <Container className={`${styles.footerContainer} ${styles.footerLegal}`}>
         <p>
-        powered by <a href="https://element84.com" target="_blank">Element 84</a> &copy; {new Date().getFullYear()}
+        powered by <a href="https://element84.com" target="_blank">{E84Logo}</a> &copy; {new Date().getFullYear()}
         </p>
       </Container>
     </footer>

demo/app/public/EarthSearchLogo.jpg

@@ -8,6 +8,7 @@ import {
   UTurnArrowLeft
 } from '@vectopus/atlas-icons-react';
 
+import { STATLogo } from './../../utils/constants';
 import styles from './Header.module.scss';
 
 const Header = () => {
@@ -18,8 +19,8 @@ const Header = () => {
       <header className={styles.header}>
         <Container className={styles.headerContainer}>
           <p className={styles.headerTitle}>
+            {STATLogo}
             <Link href="/">
-              {/* <Image src="/logo.png" alt="logo" width={35} height={35} /> */}
               Task a Satellite
             </Link>
           </p>

demo/app/public/PlanetLogo.png

@@ -15,17 +15,19 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-
 }
 
 .headerTitle {
   font-size: 1.6em;
   font-weight: bold;
   margin: 0;
-}
+  display: inline;
 
-.headerLogo {
-  height: 1.6em;
+  svg {
+    margin-left: 20px;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
 }
 
 .headerLinks {
@@ -61,6 +63,8 @@
   height: 35px;
   background-color: $color-light-gray;
   z-index: 9999;
+  padding-left: 20px;
+  padding-top: 4px;
 
   .resetSearch,
   .resetSearchIcon {

demo/app/public/UmbraLogo.png

@@ -21,8 +21,8 @@
   &:before{
       display: table-cell;
       position: absolute;
-      top: 6px;
-      left: 6px;
+      top: 5px;
+      left: 5px;
       content: "";
       border-radius: 50%;
       background-color: #FA00FF;

demo/app/src/components/Footer/Footer.js

@@ -1,5 +1,13 @@
 import { formatToFriendlyString } from 'src/utils';
-import styles from './Sidebar.module.scss'
+import styles from './Sidebar.module.scss';
+import Image from 'next/image'
+
+const imageIdToPath = {
+  'earthsearch': '/EarthSearchLogo.jpg',
+  'planet': '/PlanetLogo.png',
+  'umbra': '/UmbraLogo.png',
+  'blacksky': '/BlackSkyLogo.png'
+}
 
 export default function Opportunity({
     title,
@@ -18,8 +26,10 @@ export default function Opportunity({
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
+        <div className={styles.logoContainer}>
+          <Image src={imageIdToPath[provider] ?? '/logo.png'} width='25' height='25' />
+        </div>
         <h1>{title}</h1>
-        <h2>{provider}</h2>
         <div className={styles.previewStartDate}>
             {formatToFriendlyString(start) ?? 'no start date given'}
         </div>

demo/app/src/components/Header/Header.js

@@ -184,6 +184,8 @@
 
 .opportunityPreview > h1 {
   font-size: medium;
+  position: absolute;
+  left: 25%;
 }
 
 .previewStartDate{
@@ -209,3 +211,17 @@
   padding-left: 10px;
   color: black;
 }
+
+.logoContainer {
+  position: absolute;
+  width: 25%;
+  top: 20px;
+
+  img {
+    width: 80%;
+    padding-right: 10px;
+    height: fit-content;
+    vertical-align: middle;
+  }
+}
+