manage: use svg icons in messageBox()

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>

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 {

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 &&