From 1f923db64b08d55deab4cca4be105efbe5b23163 Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Fri, 1 Feb 2019 03:24:28 +0300
Subject: [PATCH] fix(client): modal dialogs night mode

---
 .../Challenges/components/HelpModal.js        |  2 +-
 .../Challenges/components/ResetModal.js       |  2 +-
 .../Challenges/components/VideoModal.js       |  6 +--
 .../Challenges/components/help-modal.css      | 12 ++++++
 .../Challenges/components/reset-modal.css     | 12 ++++++
 .../Challenges/components/video-modal.css     | 40 +++++++++++++++++--
 6 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/client/src/templates/Challenges/components/HelpModal.js b/client/src/templates/Challenges/components/HelpModal.js
index 3354622d29..23543dd2e7 100644
--- a/client/src/templates/Challenges/components/HelpModal.js
+++ b/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
diff --git a/client/src/templates/Challenges/components/ResetModal.js b/client/src/templates/Challenges/components/ResetModal.js
index 74c83430eb..80915c6fba 100644
--- a/client/src/templates/Challenges/components/ResetModal.js
+++ b/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'
diff --git a/client/src/templates/Challenges/components/VideoModal.js b/client/src/templates/Challenges/components/VideoModal.js
index 721c79c885..03f916a815 100644
--- a/client/src/templates/Challenges/components/VideoModal.js
+++ b/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>
-          <iframe frameBorder='0' src={videoUrl} title='Watch a video'/>
+        <Modal.Body className='video-modal-body'>
+          <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
diff --git a/client/src/templates/Challenges/components/help-modal.css b/client/src/templates/Challenges/components/help-modal.css
index 3dde5ac671..73dcd00a05 100644
--- a/client/src/templates/Challenges/components/help-modal.css
+++ b/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;
+}
diff --git a/client/src/templates/Challenges/components/reset-modal.css b/client/src/templates/Challenges/components/reset-modal.css
index d6b83e93e0..eadba944ce 100644
--- a/client/src/templates/Challenges/components/reset-modal.css
+++ b/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;
+}
diff --git a/client/src/templates/Challenges/components/video-modal.css b/client/src/templates/Challenges/components/video-modal.css
index 25e3bc458f..60ee6d0160 100644
--- a/client/src/templates/Challenges/components/video-modal.css
+++ b/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%;
-    height: 70vh;
-    margin-bottom: 0px;
+  width: 100%;
+  margin-bottom: 0;
+  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;
+}