updated rover imager component

Author: Hannah Dunsmore

src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "./App.scss";
 import RoverDetails from "./Components/RoverDetails/RoverDetails";
+import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
 
 function App() {
   return <RoverDetails />;

src/Components/MissionManifest/MissionManifest.scss

@@ -3,6 +3,13 @@
 body{
     background-color: $blueBackground;
 }
+
+#loading-text {
+    text-align: center;
+    font-family: $PublicSans;
+    color: whitesmoke;
+    margin: 30px 0;
+}
 #mission-manifest-container {
     font-family: $MartianMono;
     width: 40vw;

src/Components/MissionManifest/MissionManifest.tsx

@@ -47,7 +47,7 @@ function MissionManifest(props: MissionManifestProps) {
   }, [props.roverType]);
 
   if (!manifestData) {
-    return <p>Loading...</p>;
+    return <p id="loading-text">Loading...</p>;
   } else {
     return (
       <div

src/Components/RoverImages/RoverImages.scss

@@ -1,3 +1,6 @@
+@import "../../Styles/GlobalStyles.scss";
+
+
 body {
   background: #062356;
   color: #fffff2;
@@ -14,6 +17,13 @@ body {
   font-size: 50px;
 }
 
+h2 {
+  font-family: $PublicSans;
+  text-align: center;
+  padding: 100px auto;
+  font-size: 0.8rem;
+}
+
 
 @media (max-width: 898px) {
   .sliderContainer {

src/Components/RoverImages/RoverImages.tsx

@@ -4,7 +4,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./RoverImages.scss";
 import { ClipLoader } from "react-spinners";
-import { MissionManifestProps } from "../RoverDetails/RoverDetails";
+import { MissionManifestProps, rovers } from "../RoverDetails/RoverDetails";
 
 type RoverResponse = {
   id: number;
@@ -61,6 +61,9 @@ function RoverImages(props: MissionManifestProps) {
     fetchData();
   }, [props.roverType]);
 
+  let firstLetter = props.roverType.charAt(0).toUpperCase;
+
+
   if (error) {
     return (
       <div>
@@ -83,7 +86,7 @@ function RoverImages(props: MissionManifestProps) {
         />
       </div>
     );
-  } else {
+  } else if (props.roverType === rovers.CURIOSITY) {
     return (
       <div className="sliderContainer">
         <Slider {...sliderSettings}>
@@ -93,6 +96,8 @@ function RoverImages(props: MissionManifestProps) {
         </Slider>
       </div>
     );
+  } else {
+    return <h2>Sorry no images taken by the rover today. <br/> The rover's mission has been completed! </h2>
   }
 }