Change header icons into images for better positioning

assets/stylesheets/common/create/listing/imports_options.scss

@@ -127,24 +127,15 @@ $w: $sLayout-width;
 }
 
 @mixin importIcon($name) {
-  .ImportOptions__item .is-#{$name},
-  .SelectedImport__header .is-#{$name} {
+  .ImportOptions__item .is-#{$name} {
     display: block;
     width: 44px;
     height: 20px;
+    margin-bottom: 8px;
     background-image: url($assetsDir + '/images/layout/connectors/#{$name}.svg');
     background-repeat: no-repeat;
-  }
-
-  .ImportOptions__item .is-#{$name} {
-    margin-bottom: 8px;
     background-position: center center;
   }
-
-  .SelectedImport__header .is-#{$name} {
-    margin-right: 8px;
-    background-position: right center;
-  }
 }
 
 @include importIcon(box);
@@ -170,6 +161,10 @@ $w: $sLayout-width;
     border-bottom: 1px solid $cStructure-mainLine;
   }
 
+  &__icon {
+    margin-right: 8px;
+  }
+
   &__back {
     position: absolute;
     left: 0;

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/selected-import/selected-import-header-view.js

@@ -25,7 +25,8 @@ module.exports = CoreView.extend({
     this.$el.html(
       template({
         title: this._title,
-        name: this._name
+        name: this._name,
+        __ASSETS_PATH__: '__ASSETS_PATH__'
       })
     );
     return this;

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/selected-import/selected-import-header.tpl

@@ -2,6 +2,6 @@
   <button class="SelectedImport__back CDB-Size-large js-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev u-actionTextColor"></i>
   </button>
-  <i class='is-<%- name %>'></i>
+  <img class="SelectedImport__icon" src="<%= __ASSETS_PATH__ %>/images/layout/connectors/<%= name %>.svg" alt="<%= _t('components.modals.add-layer.imports.header-alt', { brand: cdb.core.sanitize.html(title)}) %>">
   <span><%= _t('components.modals.add-layer.imports.header', { brand: cdb.core.sanitize.html(title)}) %></span>
 </div>

lib/assets/javascripts/locale/en.json

@@ -1234,6 +1234,7 @@
                 "add-layer-error": "Could not add layer",
                 "imports": {
                     "header": "Connect with %{brand}",
+                    "header-alt": "%{brand} connector logo",
                     "ask-for-demo": "ask for demo",
                     "contact-us": "Contact us",
                     "request-beta": "Request beta access",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.140-grid-1",
+  "version": "1.0.0-assets.140-grid-2",
   "description": "CARTO UI frontend",
   "repository": {
     "type": "git",

webpack/v4/webpack.base.config.js

@@ -37,7 +37,8 @@ module.exports = {
     new webpack.DefinePlugin({
       __IN_DEV__: JSON.stringify(false),
       __ENV__: JSON.stringify('prod'),
-      __ASSETS_VERSION__: JSON.stringify(version)
+      __ASSETS_VERSION__: JSON.stringify(version),
+      __ASSETS_PATH__: JSON.stringify(`${http_path_prefix}/assets/${version}`)
     }),
 
     new MiniCssExtractPlugin({