Add i18n for Database Importer name - fixes #3213 (#3217)

* Add i18n for database importer name - fixes #3213

* Clean up database config list styling

- use full width of panel so that the heading doesn't get truncated
  (NOTE: Heading should really be outside the list, not in it)
- use the same color as the rest of the UI for the border

* One more border color definition

This should really be an override rather than hacking on the
pure.less file, but since that's how it was done originally,
that's where we'll fix it for now.

* Get rid of weird grey dashed bottom border

extensions/database/module/langs/translation-en.json

@@ -1,4 +1,5 @@
 {
+    "database-import/importer-name": "Database",
     "database-import/title": "Database Servers",
     "database-import/preparing": "Preparing result …",
     "database-import/checking": "Validating query …",

extensions/database/module/langs/translation-fr.json

@@ -1,4 +1,5 @@
 {
+    "database-import/importer-name": "Base de données",
     "database-import/title": "Serveurs de base de données",
     "database-import/preparing": "Préparation du résultat…",
     "database-import/checking": "Validation de la requête…",

extensions/database/module/scripts/index/database-import-controller.js

@@ -52,7 +52,7 @@ Refine.DatabaseImportController = function(createProjectUI) {
   this._parsingPanel = createProjectUI.addCustomPanel();
 
   createProjectUI.addSourceSelectionUI({
-    label: "Database",
+    label: $.i18n('database-import/importer-name'),
     id: "database-source",
     ui: new Refine.DatabaseSourceUI(this)
   });

extensions/database/module/scripts/index/database-import-form.html

@@ -5,7 +5,7 @@
             <div class="pure-g">
                <div class="pure-u-1-5">
                        <div class="pure-u-1"><button type="button" id="newConnectionButtonDiv" bind="newConnectionButton" class="pure-button pure-button-primary">New Connection</button></div>
-                       <div class="pure-u-1-2" style="border-bottom: 1px dashed; border-color:lightgrey; margin-top:1px; padding-right:1px;"></div>
+                       <div class="pure-u-1-2" style="margin-top:1px; padding-right:1px;"></div>
                        <div class="pure-u-1 sidebarDiv" bind="sidebarDiv">
                  
                           <div class="pure-menu pure-menu-scrollable custom-restricted">	

extensions/database/module/styles/database-import.less

@@ -88,13 +88,12 @@
 
 .custom-restricted {
     height: 300px;
-    width: 200px;
+    width: 100%;
-    border: 1px solid #bce8f1;
+    border: 1px solid #bcf;
     border-radius: 4px;
-    margin-right:10px;
-	  padding-right:10px;
-	  margin-bottom:10px;
 }
+
+// FIXME: This is a duplicate
 .custom-restricted-width {
     /* To limit the menu width to the content of the menu: */
     display: inline-block;
@@ -117,7 +116,7 @@
 .new-connection-legend {
   padding-left: 2px;
   margin-left: 2px;
-  border-color: #bce8f1;
+  border-color: #bcf;
 }
 
 .sql-editor-div {
@@ -131,9 +130,6 @@
 .new-connection-fieldset {
    border:  1px solid gray;
 }
-.sc-list {
-   border-bottom: 1px dotted #bce8f1;
-}
 
 .sc-context-more-vert:after {
   content: "";

extensions/database/module/styles/pure.css

@@ -1040,7 +1040,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
     margin-left: 5px;
     color: #333;
     /* border-bottom: 1px solid #e5e5e5; */
-    border-bottom: 1px solid #bce8f1;
+    border-bottom: 1px solid #bcf;
 }
 
 .pure-form-stacked input[type="text"],