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

Ee 48804 redesign gcp banner

See merge request gitlab-org/gitlab-ee!6530

app/assets/stylesheets/framework/variables.scss

@@ -302,7 +302,6 @@ $system-footer-height: $system-header-height;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
-$gcp-signup-offer-icon-max-width: 125px;
 
 $issue-box-upcoming-bg: #8f8f8f;
 $pages-group-name-color: #4c4e54;

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;
     }
   }
 }

app/views/projects/clusters/_gcp_signup_offer_banner.html.haml

 - 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
 

changelogs/unreleased/48804-redesign-gcp-banner.yml

+---
+title: Redesign GCP offer banner
+merge_request:
+author:
+type: changed

locale/gitlab.pot

@@ -1497,6 +1497,9 @@ msgstr ""
 msgid "ClusterIntegration|Create Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Did you know?"
+msgstr ""
+
 msgid "ClusterIntegration|Enter the details for your Kubernetes cluster"
 msgstr ""
 
@@ -1674,9 +1677,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 ""