3 files changed, 24 insertions, 12 deletions
diff --git a/juick-www/src/main/static/dialog-close.png b/juick-www/src/main/static/dialog-close.png
deleted file mode 100644
index 9c4275cc..00000000
--- a/juick-www/src/main/static/dialog-close.png
+++ /dev/null
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 06fd78c7..7dc24dd2 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -455,10 +455,10 @@ function showPhotoDialog(fname) {
     if (minDimension < 640) {
         return true; // no dialog, open the link
     } else if (minDimension < 1280) {
-        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/photos-1024/${fname}"/></a>`);
+        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/photos-1024/${fname}"/></a>`, true);
         return false;
     } else {
-        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`);
+        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`, true);
         return false;
     }
 }
@@ -478,18 +478,24 @@ function openPostDialog() {
     return openDialog(newmessageTemplate);
 }
 
-function openDialog(html) {
+function openDialog(html, image) {
     var dialogHtml = `
         <div id="dialogt">
             <div id="dialogb"></div>
             <div id="dialogw">
-                <div id="dialogc"></div>
+                <div id="dialog_header">
+                    <div id="dialogc">${evilIcon('ei-close')}</div>
+                </div>
                 ${html}
             </div>
         </div>`;
     let body = document.querySelector('body');
     body.classList.add('dialog-opened');
     body.insertAdjacentHTML('afterbegin', dialogHtml);
+    if (image) {
+        let header = document.querySelector('#dialog_header');
+        header.classList.add('header_image');
+    }
     document.addEventListener('keydown', closeDialogListener);
     document.querySelector('#dialogb').addEventListener('click', closeDialog);
     document.querySelector('#dialogc').addEventListener('click', closeDialog);
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 84cfaba6..080a179e 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -558,6 +558,7 @@ q {
     border: 1px solid #CCC;
     box-sizing: border-box;
     margin: 0 0 5px 0;
+    margin-top: 20px;
     max-height: 6em;
     min-width: 280px;
     padding: 4px;
@@ -684,15 +685,21 @@ q {
     max-height: 90vh;
     max-width: 100%;
 }
+#dialog_header {
+    width: 100%;
+    height: 44px;
+    position: fixed;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+}
+.header_image {
+    background: rgba(0, 0, 0, 0.28);
+}
 #dialogc {
-    background: url("dialog-close.png");
     cursor: pointer;
-    height: 30px;
-    position: absolute;
-    right: -15px;
-    top: -15px;
-    width: 30px;
-    z-index: 12;
+    color: #ccc;
+    padding-right: 6px;
 }
 .dialoglogin {
     background: #EEEEE5;
@@ -730,7 +737,6 @@ q {
 }
 .dialogshare {
     background: #EEEEE5;
-    border: 1px solid #999;
     min-width: 300px;
     overflow: auto;
     padding: 20px;