29595 Customize experience callout design

3 files changed, 60 insertions, 22 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8c6dd392865..a8dad58b1d3 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: lighten($blue-50, 3%);
+    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..108643f2f6f 100644
--- a/app/views/shared/_user_callout.html.haml
+++ b/app/views/shared/_user_callout.html.haml
@@ -1,14 +1,13 @@
 .user-callout
   .bordered-box.landing.content-block
-    %button.btn.btn-default.close.js-close-callout{ type: 'button',
+    %button.btn.btn-default.close.close-user-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 user-callout-btn'
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: