Commit e6d87a97 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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

29595 Customize experience callout design

Closes #29595

See merge request !10026
parents 60f59899 d3186abf
......@@ -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: $cycle-analytics-dismiss-icon-color;
color: $blue-300;
}
&: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;
}
}
}
}
}
......@@ -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
.svg-container
= custom_icon('icon_customization')
.col-sm-8.col-xs-12.inner-content
.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-default js-close-callout'
= link_to 'Check it out', profile_preferences_path, class: 'btn btn-primary js-close-callout'
---
title: 29595 Update callout design
merge_request:
author:
......@@ -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) => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment