Update Other button styles and title colors

app/assets/stylesheets/editor-3/_privacy-toggler.scss

@@ -3,7 +3,7 @@
 
 // TODO: remove editor
 $cStructure-softLine: rgba(#000, 0.06);
-$cHighlight-positive: rgba(#8FB83F, 1);
+$cHighlight-positive: rgba(#00B303, 1);
 $cHighlight-negative: rgba(#F15743, 1);
 
 .PrivacyToggler {

app/assets/stylesheets/variables/colors.css.scss

@@ -27,7 +27,7 @@ $cCard-selectedBorder: rgba(#9DC2E0, 1);
 
 // Highlight
 $cHighlight-main: rgba(#0090D7, 1);
-$cHighlight-positive: rgba(#8FB83F, 1);
+$cHighlight-positive: rgba(#00B303, 1);
 $cHighlight-negative: rgba(#F15743, 1);
 $cHighlight-alert: rgba(#C67B44, 1);
 $cHighlight-alert2: rgba(#FFA500, 1);

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

@@ -275,6 +275,14 @@ $import-button-width: 174px;
       display: block;
     }
   }
+
+  .title--success {
+    color: $cHighlight-positive;
+  }
+
+  .title--error {
+    color: $cHighlight-negative;
+  }
 }
 
 .is-disabled {
@@ -385,6 +393,10 @@ $import-button-width: 174px;
   color: $cLocationBlue;
 }
 
+.ImportOther__step4.is-active {
+  align-items: flex-start;
+}
+
 .ImportOther__step2,
 .ImportOther__step3,
 .ImportOther__step4 {
@@ -457,39 +469,25 @@ $import-button-width: 174px;
 }
 
 .ImportOther__step4 {
-  .ImportOther_requestText {
-    margin: 0 20px;
+  box-sizing: border-box;
+  width: calc(#{$import-button-width} - 32px);
+  height: 80px;
+  padding: 12px 16px;
+
+  .ImportOther_requestTitle {
+    margin-bottom: 4px;
+    color: $cHighlight-positive;
+    font-weight: 600;
   }
 
   .ImportOther__requestButton {
-    box-sizing: content-box;
+    width: 100px;
     margin-top: 12px;
   }
 
-  .ImportOther__requestButton {
-    width: 60px;
-
-    &Text {
-      display: block;
-      margin-right: -20px;
-      margin-left: -8px;
-      background-image: url($assetsDir + '/images/layout/connectors/request-success.svg');
-      background-repeat: no-repeat;
-      background-position: left center;
-      background-size: 12px;
-    }
-  }
-
   &.hasError {
-    border-color: $cHighlight-caution;
-
-    .ImportOther__requestButton {
-      width: auto;
-
-      &Text {
-        margin: auto;
-        background: none;
-      }
+    .ImportOther_requestTitle {
+      color: $cHighlight-negative;
     }
   }
 }

assets/stylesheets/editor-3/_privacy-toggler.scss

@@ -3,7 +3,7 @@
 
 // TODO: remove editor
 $cStructure-softLine: rgba(#000, 0.06);
-$cHighlight-positive: rgba(#8FB83F, 1);
+$cHighlight-positive: rgba(#00B303, 1);
 $cHighlight-negative: rgba(#F15743, 1);
 
 .PrivacyToggler {

assets/stylesheets/variables/colors.scss

@@ -27,7 +27,7 @@ $cCard-selectedBorder: rgba(#9DC2E0, 1);
 
 // Highlight
 $cHighlight-main: rgba(#0090D7, 1);
-$cHighlight-positive: rgba(#8FB83F, 1);
+$cHighlight-positive: rgba(#00B303, 1);
 $cHighlight-negative: rgba(#F15743, 1);
 $cHighlight-alert: rgba(#C67B44, 1);
 $cHighlight-alert2: rgba(#FFA500, 1);

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/imports-selector/import-other-button.tpl

@@ -19,15 +19,22 @@
       <div class="ImportOther__spinner Spinner"></div>
     </div>
   <li class="ImportOther__step4 js-step js-step4 <%- hasError ? 'hasError' : '' %>">
-    <span class="ImportOther_requestText">
+    <span class="ImportOther_requestTitle">
       <% if (hasError) { %>
         <%- _t('components.modals.add-layer.imports.request.error.title') %>
       <% } else { %>
         <%- _t('components.modals.add-layer.imports.request.success.title') %>
       <% } %>
     </span>
-    <button class="CDB-Button CDB-Button--primary ImportOther__requestButton js-ok">
-      <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase ImportOther__requestButtonText">
+    <span class="ImportOther_requestText">
+      <% if (hasError) { %>
+        <%- _t('components.modals.add-layer.imports.request.error.desc') %>
+      <% } else { %>
+        <%- _t('components.modals.add-layer.imports.request.success.desc') %>
+      <% } %>
+    </span>
+    <button class="CDB-Button CDB-Button--primary ImportOther__requestButton js-ok success-icon">
+      <span class="CDB-Text is-semibold CDB-Size-small u-upperCase">
         <%- _t('components.modals.add-layer.imports.request.ok') %>
       </span>
     </button>

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

@@ -25,6 +25,7 @@ module.exports = CoreView.extend({
 
   step3: {
     selector: '.js-step3',
+    titleClass: 'title--success',
     title: _t('components.modals.add-layer.imports.request.success.title'),
     description: _t('components.modals.add-layer.imports.request.success.desc'),
     buttonClass: 'js-ok success-icon',
@@ -33,6 +34,7 @@ module.exports = CoreView.extend({
 
   step4: {
     selector: '.js-step4',
+    titleClass: 'title--error',
     title: _t('components.modals.add-layer.imports.request.error.title'),
     description: _t('components.modals.add-layer.imports.request.error.desc'),
     buttonClass: 'js-ok success-icon',

lib/assets/javascripts/locale/en.json

@@ -1416,7 +1416,7 @@
                     },
                     "request": {
                         "other": "Request connector",
-                        "type": "Type the one you look for",
+                        "type": "What you're looking for",
                         "sending": "Sending request",
                         "submit": "Submit",
                         "success": {