i lied robbery is a really good idea

- robbed a new X button
- double-wrapped some divs to abuse relative positioning and absolute positioning
- the x button now works because i'm very cool yes yes

scripts/contextmenu/newfolder.js

@@ -11,10 +11,13 @@ const clearModals = require('../modal/clearmodals');
 module.exports = () => {
     if (window.kade.modal) {console.log('hboonk'); return;}
     preModal('new-folder-modal-container');
+    let modalOut = document.createElement('div');
+    modalOut.className = 'modal';
+    modalOut.id = 'new-folder-modal-container';
+    document.body.appendChild(modalOut);
     let modal = document.createElement('div');
-    modal.className = 'modal';
+    modal.className = 'modal-wrapper';
-    modal.id = 'new-folder-modal-container';
+    modalOut.appendChild(modal);
-    document.body.appendChild(modal);
     let title = document.createElement('h2');
     title.innerHTML = 'New Folder';
     modal.appendChild(title);
@@ -50,8 +53,8 @@ module.exports = () => {
             }
             fs.mkdirSync(path.join(window.kade.cpath, input.value));
             lightRefresh();
-            modal.remove();
+            modalOut.remove();
-            postModal(modal.id);
+            postModal(modalOut.id);
         } catch {
             clearModals();
             showError("Folder Creation", "There was an unknown error while trying to create that folder. It may be a permissions issue, or the host folder doesn't exist anymore.");
@@ -62,8 +65,19 @@ module.exports = () => {
     let msm = new mousetrap(modal);
     msm.bind('esc', () => {
         lightRefresh();
-        modal.remove();
+        modalOut.remove();
-        postModal(modal.id);
+        postModal(modalOut.id);
     });
     msm.bind('enter', () => {conf.click();});
+    let close = document.createElement('a');
+    close.className = 'close-button';
+    close.onclick = () => {
+        lightRefresh();
+        modalOut.remove();
+        postModal(modalOut.id);
+    };
+    let closeWrap = document.createElement('div');
+    closeWrap.className = 'close-button-wrapper';
+    modal.appendChild(closeWrap);
+    closeWrap.appendChild(close);
 }

styles/modal.css

@@ -60,3 +60,45 @@
     z-index: 2;
 }
 
+.modal-wrapper {
+    margin: 0 0;
+    padding: 0 0;
+    position: relative;
+}
+
+.close-button-wrapper {
+    margin: 0 0;
+    padding: 0 0;
+    top: 0;
+    right: 10px;
+    position: absolute;
+}
+
+.close-button {
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    left: 10px;
+    bottom: 10px;
+    display: block;
+    z-index: 200;
+    position: relative;
+}
+.close-button:before, .close-button:after {
+    content: '';
+    width: 55%;
+    height: 2px;
+    background: #fff;
+    position: absolute;
+    top: 48%;
+    left: 22%;
+    transform: rotate(-45deg);
+    transition: all 0.3s ease-out;
+}
+.close-button:after {
+    transform: rotate(45deg);
+    transition: all 0.3s ease-out;
+}
+.close-button:hover:before, .close-button:hover:after {
+    transform: rotate(180deg);
+}