Update extension warning dialog to match others

Also clean up the unnecessary stuff in the dialog JS/CSS now that it's working better

index.html

@@ -456,18 +456,18 @@ <h2>Scratch Family</h2>
     <div class="scratch_loading"></div>
 </section>
 <script type="text/template" id="template-warning">
-<div>
-    <header><a class="modal-close" href="#"></a></header>
-    <section class="warning">
-        <h2>Warning: all extensions are experimental</h2>
-        <p><strong>Warning:</strong> The extensions on this site are experimental</p>
-        <p>The Scratch Team is <strong>not</strong> responsible for the extensions and projects on this site. Please use caution when using these extensions. <a href="#faq">Learn More.</a></p>
+<dialog class="extension-warning with-icon">
+    <section>
+        <h2>Warning</h2>
+        <p>The extensions on this site are experimental</p>
     </section>
     <section>
+        <p>The Scratch Team is <strong>not</strong> responsible for the extensions and projects on this site. Please use caution when using these extensions. <a href="#faq">Learn More</a></p>
+
         <button data-action="show" data-target="home">Back to ScratchX home</button>
         <button class="success">I understand, continue</button>
     </section>
-</div>
+</dialog>
 </script>
 <script type="text/template" id="template-short-url">
 <dialog class="single">
@@ -484,7 +484,7 @@ <h2>Short URL</h2>
 </dialog>
 </script>
 <script type="text/template" id="template-extension-url">
-<dialog class="single extension-url">
+<dialog class="extension-url with-icon">
     <section>
         <h2>Open an Extension URL</h2>
         <p>Paste the web address below</p>
@@ -499,7 +499,7 @@ <h2>Open an Extension URL</h2>
 </dialog>
 </script>
 <script type="text/template" id="template-extension-file">
-<dialog class="single extension-file">
+<dialog class="extension-file with-icon">
     <section>
         <h2>Open an Extension Project</h2>
         <p>Choose a .sbx file from your local drive</p>

js/scratchx.js

@@ -228,16 +228,10 @@ function showModal(templateId, data) {
 
     var zIndex = 100;
     var modalId = ("modal-" + templateId).replace(",", "-");
-    $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'><div class='modal-content'></div></div></div>");
+    $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>");
     var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper, data);
-    $(".modal-inner", $modal).append('<div class="modal-close" for="'+modalId+'"></div>');
-    $modal.addClass("modal");
 
-    if (typeof(templateId) != "string") {
-        $modal.addClass("n-children-" + templateId.length);
-    } else {
-        $modal.addClass("n-children-1");
-    }
+    $modal.addClass("modal");
 
     $(".modal-fade-screen", $modal)
         .addClass("visible")

sass/base/_base.scss

@@ -128,41 +128,3 @@ body > main > article > section {
         color: $white;
     }
 }
-
-#modal-template-warning {
-    .modal-inner {
-        border: 1px solid $light-gray;
-        padding: 0;
-        width: 50%;
-        text-align: center;
-    }
-    section {
-        padding: 2em;
-        overflow: hidden;
-    }
-
-    header {
-        background: $light-gray;
-        text-align: right;
-        line-height: 1.5;
-        position: relative;
-        height: 3em;
-    }
-
-    .modal-close {
-        background: $light-gray;
-
-        &:before, &:after {
-            background: darken($light-gray, 50%);
-        }
-
-        &:hover:before, &:hover:after {
-            background: darken($light-gray, 60%);
-        }
-    }
-
-    button {
-        width: auto;
-    }
-
-}