Merge branch '29595-customize-experience-callout' into 'master'

29595 Customize experience callout design

Closes #29595

See merge request !10026

4 files changed, 59 insertions, 22 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8c6dd392865..fe084eb9397 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -289,8 +289,12 @@ table.u2f-registrations {
   margin: 0 auto;
 
   .bordered-box {
-    border: 1px solid $border-color;
+    border: 1px solid $blue-300;
     border-radius: $border-radius-default;
+    background-color: $blue-25;
+    position: relative;
+    display: flex;
+    justify-content: center;
   }
 
   .landing {
@@ -298,28 +302,59 @@ table.u2f-registrations {
     margin-bottom: $gl-padding;
 
     .close {
-      margin-right: 20px;
-    }
+      position: absolute;
+      right: 20px;
+      opacity: 1;
+
+      .dismiss-icon {
+        float: right;
+        cursor: pointer;
+        color: $blue-300;
+      }
 
-    .dismiss-icon {
-      float: right;
-      cursor: pointer;
-      color: $cycle-analytics-dismiss-icon-color;
+      &:hover {
+        background-color: transparent;
+        border: 0;
+
+        .dismiss-icon {
+          color: $blue-400;
+        }
+      }
     }
 
     .svg-container {
-      text-align: center;
+      margin-right: 30px;
+      display: inline-block;
 
       svg {
-        width: 136px;
-        height: 136px;
+        height: 110px;
+        vertical-align: top;
       }
     }
+
+    .user-callout-copy {
+      display: inline-block;
+      vertical-align: top;
+    }
   }
 
   @media(max-width: $screen-xs-max) {
-    .inner-content {
-      padding-left: 30px;
+    text-align: center;
+
+    .bordered-box {
+      display: block;
+    }
+
+    .landing {
+      .svg-container,
+      .user-callout-copy {
+        margin: 0;
+        display: block;
+
+        svg {
+          height: 75px;
+        }
+      }
     }
   }
 }
diff --git a/app/views/shared/_user_callout.html.haml b/app/views/shared/_user_callout.html.haml
index 8f1293adcb1..8308baa7829 100644
--- a/app/views/shared/_user_callout.html.haml
+++ b/app/views/shared/_user_callout.html.haml
@@ -3,12 +3,11 @@
     %button.btn.btn-default.close.js-close-callout{ type: 'button',
       'aria-label' => 'Dismiss customize experience box' }
       = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
-    .row
-      .col-sm-3.col-xs-12.svg-container
-        = custom_icon('icon_customization')
-      .col-sm-8.col-xs-12.inner-content
-        %h4
-          Customize your experience
-        %p
-          Change syntax themes, default project pages, and more in preferences.
-        = link_to 'Check it out', profile_preferences_path, class: 'btn btn-default js-close-callout'
+    .svg-container
+      = custom_icon('icon_customization')
+    .user-callout-copy
+      %h4
+        Customize your experience
+      %p
+        Change syntax themes, default project pages, and more in preferences.
+      = link_to 'Check it out', profile_preferences_path, class: 'btn btn-primary js-close-callout'
diff --git a/changelogs/unreleased/29595-customize-experience-callout.yml b/changelogs/unreleased/29595-customize-experience-callout.yml
new file mode 100644
index 00000000000..ec8393142c6
--- /dev/null
+++ b/changelogs/unreleased/29595-customize-experience-callout.yml
@@ -0,0 +1,4 @@
+---
+title: 29595 Update callout design
+merge_request:
+author:
diff --git a/spec/javascripts/user_callout_spec.js b/spec/javascripts/user_callout_spec.js
index c0375ebc61c..28d0c7dcd99 100644
--- a/spec/javascripts/user_callout_spec.js
+++ b/spec/javascripts/user_callout_spec.js
@@ -14,7 +14,6 @@ describe('UserCallout', function () {
     this.userCallout = new UserCallout();
     this.closeButton = $('.js-close-callout.close');
     this.userCalloutBtn = $('.js-close-callout:not(.close)');
-    this.userCalloutContainer = $('.user-callout');
   });
 
   it('hides when user clicks on the dismiss-icon', (done) => {