Merge pull request #64 from oslabs-beta/dev

Dev to Master

website/components/Carousel.jsx

@@ -20,31 +20,31 @@ const Carousel = () => {
         </div>
         <div className="carousel-inner">
           <div className="carousel-item active">
-            <Image className="d-block w-100" src={firstSlide} alt="First slide"/>
+            <Image className="d-block w-100" src={firstSlide} alt="First slide" priority={true}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Open a root component to structure your app&apos;s files so they match its dependency relationships.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={secondSlide} alt="Second slide"/>
+            <Image className="d-block w-100" src={secondSlide} alt="Second slide" priority={true}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Use Sapling&apos;s intuitive icons to get a list of props available to each component, see which components are connected to your Redux store, and open the file you wish to edit.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={thirdSlide} alt="Third slide"/>
+            <Image className="d-block w-100" src={thirdSlide} alt="Third slide" priority={true}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Sapling is highly responsive, and notices whenever you edit and save a file.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={fourthSlide} alt="Fourth slide"/>
+            <Image className="d-block w-100" src={fourthSlide} alt="Fourth slide" priority={true}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Rebuild the tree with your currently open file as the root. Note that Sapling retains its expanded state between sessions.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={fifthSlide} alt="Fifth slide"/>
+            <Image className="d-block w-100" src={fifthSlide} alt="Fifth slide" priority={true}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Toggle the display of third-party and React Router components, and watch as Sapling&apos;s theme changes to match your preferences.</p>
             </div>

website/styles/globals.scss

@@ -92,7 +92,8 @@ nav#navbar {
 
 .carousel-caption {
   color: #CECECE;
-  background: rgb(0, 0, 0, 0.5);
+  font-weight: 600;
+  background: rgb(0, 0, 0, 0.6);
   border-radius: 20px;
 }