fix(client): modal dialogs night mode

client/src/templates/Challenges/components/HelpModal.js

@@ -40,7 +40,7 @@ export class HelpModal extends Component {
           >
           <Modal.Title className='text-center'>Ask for help?</Modal.Title>
         </Modal.Header>
-        <Modal.Body className='text-center'>
+        <Modal.Body className='help-modal-body text-center'>
           <h3>
             If you've already tried the&nbsp;
             <a

client/src/templates/Challenges/components/ResetModal.js

@@ -56,7 +56,7 @@ function ResetModal({ reset, close, isOpen }) {
           </p>
         </div>
       </Modal.Body>
-      <Modal.Footer>
+      <Modal.Footer className='reset-modal-footer'>
         <Button
           block={true}
           bsSize='large'

client/src/templates/Challenges/components/VideoModal.js

@@ -32,13 +32,13 @@ export class VideoModal extends Component {
         show={isOpen}
         >
         <Modal.Header
-          className='help-modal-header fcc-modal'
+          className='video-modal-header fcc-modal'
           closeButton={true}
           >
           <Modal.Title className='text-center'>Watch A Video</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body className='video-modal-body'>
-          <iframe frameBorder='0' src={videoUrl} title='Watch a video'/>
+          <iframe frameBorder='0' src={videoUrl} title='Watch a video' />
           <p>
             Tip: If the mini-browser is covering the code, click and drag to
             move it. Also, feel free to stop and edit the code in the video at

client/src/templates/Challenges/components/help-modal.css

@@ -3,3 +3,15 @@
     font-size: 16px;
   }
 }
+
+.night .help-modal-header .close {
+  color: #fff;
+}
+
+.night .help-modal-body,
+.night .help-modal-header {
+  background-color: #333;
+}
+.night .help-modal-header {
+  border-bottom-color: #222;
+}

client/src/templates/Challenges/components/reset-modal.css

@@ -10,8 +10,20 @@
   text-shadow: none;
 }
 
+.night .reset-modal-header .close {
+  color: #222;
+}
+
 @media screen and (max-width: 767px) {
   .reset-modal .btn-lg {
     font-size: 16px;
   }
 }
+
+.night .reset-modal-body,
+.night .reset-modal-footer {
+  background-color: #333;
+}
+.night .reset-modal-footer {
+  border-top-color: #222;
+}

client/src/templates/Challenges/components/video-modal.css

@@ -1,10 +1,44 @@
 .video-modal {
+  height: calc(100vh - 20px);
+}
+
+@media (min-width: 768px) {
+  .video-modal {
     width: 90%;
+    height: calc(100vh - 60px);
+  }
+}
+
+.video-modal .modal-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.video-modal-body {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .video-modal iframe {
-    width: 100%;
+  width: 100%;
-    height: 70vh;
+  margin-bottom: 0;
-    margin-bottom: 0px;
+  flex-grow: 1;
 }
 
+.video-modal p {
+  margin-bottom: 0;
+}
+
+.night .video-modal-header .close {
+  color: #fff;
+}
+
+.night .video-modal-body,
+.night .video-modal-header {
+  background-color: #333;
+}
+.night .video-modal-header {
+  border-bottom-color: #222;
+}