modal css

2 files changed, 50 insertions, 23 deletions

diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css
index 9589b8f4..3ac9237e 100644
--- a/client/modalImage/modal.css
+++ b/client/modalImage/modal.css
@@ -1,7 +1,7 @@
 .modal {
   position: fixed;
   top: 0; left: 0; width: 100%; height: 100%;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0,0,0,0.9);
   color: white;
   display: flex;
   justify-content: center;
@@ -25,12 +25,14 @@
   align-items: center;
 }
 .modal img {
-  max-width: 90vw;
+  max-width: 85vw;
   max-height: 90vh;
 }
 .modal .caption {
   display: block;
   text-align: center;
+  background: black;
+  padding: 10px;
 }
 .modal .prev span,
 .modal .next span,
@@ -53,38 +55,63 @@
   background: #000;
   box-shadow: 0 1px 2px rgba(255,255,255,0.6);
 }
-.modal .prev {
+.modal .prev,
+.modal .next,
+.modal .close {
   position: absolute;
-  top: 0; left: 0;
-  width: 10%;
+  top: 0;
+  padding: 20px;
+  width: 8%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: white;
-  font-size: 40px;
   cursor: pointer;
+  transition: all 0.1s cubic-bezier(0,0,0,1);
+}
+.modal .prev {
+  left: 0;
 }
 .modal .next {
-  position: absolute;
-  top: 0; right: 0;
-  width: 10%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  font-size: 40px;
-  cursor: pointer;
+  right: 0;
 }
+.modal .prev img,
+.modal .next img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .modal .close {
   position: absolute;
   top: 0; right: 0;
-  width: 10vw; height: 10vw;
+  width: 80px;
+  height: 80px;
+  max-width: 10vw;
+  max-height: 10vw;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: white;
-  font-size: 40px;
   cursor: pointer;
+  transition: all 0.1s cubic-bezier(0,0,0,1);
+  padding: 20px;
+}
+.modal .close img {
+  width: 100%;
+  height: 100%;
+}
+
+.desktop .modal .prev:hover {
+  width: 9%;
+  left: -8px;
+}
+.desktop .modal .next:hover {
+  width: 9%;
+  right: -8px;
+}
+.desktop .modal .close:hover {
+  padding: 10px;
+}
+
+@media all and (max-device-width: 1024px) {
+
 }
\ No newline at end of file
diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js
index 5479ca5f..d6271d61 100644
--- a/client/modalImage/modalImage.container.js
+++ b/client/modalImage/modalImage.container.js
@@ -83,9 +83,9 @@ class ModalImage extends Component {
             {caption && <div class='caption'>{caption}</div>}
           </div>
         </div>
-        <div onClick={() => this.prev()}className='prev'><span>{'<'}</span></div>
-        <div onClick={() => this.next()} className='next'><span>{'>'}</span></div>
-        <div onClick={() => this.close()} className='close'><span>{'×'}</span></div>
+        <div onClick={() => this.prev()} className='prev' aria-label='Previous image' alt='Previous image'><img src='/assets/img/arrow-left.png' /></div>
+        <div onClick={() => this.next()} className='next' aria-label='Next image' alt='Next image'><img src='/assets/img/arrow-right.png' /></div>
+        <div onClick={() => this.close()} className='close' aria-label='Close' alt='Close'><img src='/assets/img/close.png' /></div>
       </div>
     )
   }