Merge branch '48804-redesign-gcp-banner' into 'master'

Resolve "Redesign GCP banner"

Closes #48804

See merge request gitlab-org/gitlab-ce!20542

5 files changed, 28 insertions, 48 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 6cfa09b56a7..6c2fdbe0608 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -297,7 +297,6 @@ $performance-bar-height: 35px;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
-$gcp-signup-offer-icon-max-width: 125px;
 
 /*
 * Common component specific colors
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 56beb7718a4..0f22fe21143 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -32,49 +32,23 @@
 }
 
 .gcp-signup-offer {
-  background-color: $blue-50;
-  border: 1px solid $blue-300;
-  border-radius: $border-radius-default;
+  border-left-color: $blue-500;
 
-  // TODO: To be superceded by cssLab
-  &.alert {
-    padding: 24px 16px;
-
-    &-dismissable {
-      padding-right: 32px;
-
-      .close {
-        top: -8px;
-        right: -16px;
-        color: $blue-500;
-        opacity: 1;
-      }
-    }
-  }
-
-  .gcp-logo {
-    margin-bottom: $gl-padding;
-    text-align: center;
-  }
-
-  img {
-    max-width: $gcp-signup-offer-icon-max-width;
+  svg {
+    fill: $blue-500;
+    vertical-align: middle;
   }
 
-  a:not(.btn) {
-    color: $gl-link-color;
-    font-weight: normal;
-    text-decoration: none;
-  }
+  .gcp-signup-offer--content {
+    display: flex;
 
-  @include media-breakpoint-up(sm) {
-    > div {
-      display: flex;
-      align-items: center;
+    h4 {
+      font-size: 16px;
+      line-height: 24px;
     }
 
-    .gcp-logo {
-      margin: 0;
+    .gcp-signup-offer--icon {
+      align-self: flex-start;
     }
   }
 }
diff --git a/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml b/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml
index 9298d93663d..73b11d509d3 100644
--- a/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/projects/clusters/_gcp_signup_offer_banner.html.haml
@@ -1,12 +1,12 @@
 - link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.append-bottom-default{ role: 'alert' }
+.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.append-bottom-default{ role: 'alert' }
   %button.close{ type: "button", data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }  ×
-  %div
-    .col-sm-2.gcp-logo
-      = image_tag 'illustrations/logos/google-cloud-platform_logo.svg'
-    .col-sm-10
-      %h4= s_('ClusterIntegration|Redeem up to $500 in free credit for Google Cloud Platform')
+  .gcp-signup-offer--content
+    .gcp-signup-offer--icon.append-right-8
+      = sprite_icon("information", size: 16)
+    .gcp-signup-offer--copy
+      %h4= s_('ClusterIntegration|Did you know?')
       %p= s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for both new and existing GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
-      %a.btn.btn-info{ href: 'https://goo.gl/AaJzRW', target: '_blank', rel: 'noopener noreferrer' }
+      %a.btn.btn-default{ href: 'https://goo.gl/AaJzRW', target: '_blank', rel: 'noopener noreferrer' }
         Apply for credit
 
diff --git a/changelogs/unreleased/48804-redesign-gcp-banner.yml b/changelogs/unreleased/48804-redesign-gcp-banner.yml
new file mode 100644
index 00000000000..729f959badc
--- /dev/null
+++ b/changelogs/unreleased/48804-redesign-gcp-banner.yml
@@ -0,0 +1,5 @@
+---
+title: Redesign GCP offer banner
+merge_request:
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8e23383609f..a5f97e9548a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8,6 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-07-10 16:02-0700\n"
+"PO-Revision-Date: 2018-07-10 16:02-0700\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -1245,6 +1247,9 @@ msgstr ""
 msgid "ClusterIntegration|Create Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Did you know?"
+msgstr ""
+
 msgid "ClusterIntegration|Enter the details for your Kubernetes cluster"
 msgstr ""
 
@@ -1407,9 +1412,6 @@ msgstr ""
 msgid "ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration."
 msgstr ""
 
-msgid "ClusterIntegration|Redeem up to $500 in free credit for Google Cloud Platform"
-msgstr ""
-
 msgid "ClusterIntegration|Remove Kubernetes cluster integration"
 msgstr ""