Fix the ghost icon in the drive and add missing text

www/common/cryptpad-common.js

@@ -1427,23 +1427,37 @@ define([
         return $icon;
     };
 
-    common.createFileDialog = function (cfg) {
+    common.createModal = function (cfg) {
         var $body = cfg.$body || $('body');
-        var $blockContainer = $body.find('#fileDialog');
+        var $blockContainer = $body.find('#'+cfg.id);
         if (!$blockContainer.length) {
-            $blockContainer = $('<div>', {id: "fileDialog"}).appendTo($body);
+            $blockContainer = $('<div>', {
+                'class': 'cp-modal-container',
+                'id': cfg.id
+            });
         }
-        $blockContainer.html('');
+        $blockContainer.html('').appendTo($body);
         var $block = $('<div>', {'class': 'cp-modal'}).appendTo($blockContainer);
         $('<span>', {
-            'class': 'close fa fa-times',
+            'class': 'cp-modal-close fa fa-times',
             'title': Messages.filePicker_close
         }).click(function () {
             $blockContainer.hide();
         }).appendTo($block);
+        $body.keydown(function (e) {
+            if (e.which === 27) { $blockContainer.hide(); }
+        });
+        return $blockContainer;
+    };
+    common.createFileDialog = function (cfg) {
+        var $blockContainer = common.createModal({
+            id: 'fileDialog',
+            $body: cfg.$body
+        });
+        var $block = $blockContainer.find('.cp-modal');
         var $description = $('<p>').text(Messages.filePicker_description);
         $block.append($description);
-        var $filter = $('<p>', {'class': 'cp-form'}).appendTo($block);
+        var $filter = $('<p>', {'class': 'cp-modal-form'}).appendTo($block);
         var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
         var updateContainer = function () {
             $container.html('');
@@ -1483,9 +1497,6 @@ define([
             $blockContainer.hide();
         }));
         updateContainer();
-        $body.keydown(function (e) {
-            if (e.which === 27) { $blockContainer.hide(); }
-        });
         $blockContainer.show();
     };
 

www/common/file-dialog.less

@@ -1,63 +1,8 @@
 @import (once) '../customize/src/less2/include/colortheme.less';
+@import '../customize/src/less2/include/modal.less';
 
 #fileDialog {
-    display: none;
-
-    z-index: 100000;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: @colortheme_modal-dim;
-
     .cp-modal {
-        background-color: @colortheme_modal-bg;
-        color: @colortheme_modal-fg;
-        box-shadow: @colortheme_modal-shadow;
-
-        padding: @colortheme_modal-padding;
-
-        position: absolute;
-        top: 15vh; bottom: 15vh;
-        left: 10vw; right: 10vw;
-
-        overflow: auto;
-
-        font-family: @colortheme_font;
-        text-align: center;
-
-        & > p {
-            margin-bottom: 1em;
-        }
-
-        .cp-form {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
-        }
-
-        input {
-            background-color: @colortheme_modal-input;
-            color: @colortheme_modal-fg;
-            border: 0;
-            padding: 8px 12px;
-            margin: 1em;
-            width: 300px;
-        }
-
-        .close {
-            text-shadow: none;
-            color: inherit;
-
-            position: absolute;
-            top: 0;
-            right: 0;
-            margin: @colortheme_modal-padding;
-            cursor: pointer;
-        }
-
         .fileContainer {
             display: flex;
             flex-wrap: wrap;