From 0ceff44000a0a25c5b885a5f6923c85fed28dc32 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 3 Apr 2017 02:18:43 +0300
Subject: [PATCH] manage: use svg icons in messageBox()

---
 manage.html       |  3 +++
 msgbox/msgbox.css | 12 ++++++------
 msgbox/msgbox.js  |  5 ++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/manage.html b/manage.html
index 5172331b..a5c055a3 100644
--- a/manage.html
+++ b/manage.html
@@ -110,6 +110,9 @@
   <symbol id="svg-icon-external-link" height="16" width="16" viewBox="0 0 8 8">
     <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
   </symbol>
+  <symbol id="svg-icon-close" height="16" width="12" viewBox="0 0 12 16">
+    <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
+  </symbol>
 </svg>
 
 <script src="manage.js"></script>
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index f53ca76c..d632efc7 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -78,15 +78,15 @@
   font-weight: bold;
 }
 
+#message-box.danger #message-box-close-icon svg:hover {
+  fill: #600;
+}
+
 #message-box-close-icon {
   cursor: pointer;
-  width: 8px;
-  height: 8px;
-  border: 8px solid transparent;
   position: absolute;
-  right: 0;
-  top: 0;
-  background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat, linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat;
+  right: 3px;
+  top: 7px;
 }
 
 #message-box-contents {
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index 310a998f..03a4363e 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -55,7 +55,10 @@ function messageBox({
     messageBox.element = $element({id, className, appendChild: [
       $element({appendChild: [
         $element({id: `${id}-title`, innerHTML: title}),
-        $element({id: `${id}-close-icon`, onclick: messageBox.listeners.closeIcon}),
+        $element({
+          id: `${id}-close-icon`,
+          innerHTML: '<svg class="svg-icon"><use xlink:href="#svg-icon-close"/></svg>',
+          onclick: messageBox.listeners.closeIcon}),
         $element({id: `${id}-contents`, [putAs]: contents}),
         $element({id: `${id}-buttons`, appendChild:
           buttons.map((textContent, buttonIndex) => textContent &&