diff --git a/services/web/app/views/_mixins/reconfirm_affiliation.pug b/services/web/app/views/_mixins/reconfirm_affiliation.pug
index 8d6ce5f9a1..259a794a2f 100644
--- a/services/web/app/views/_mixins/reconfirm_affiliation.pug
+++ b/services/web/app/views/_mixins/reconfirm_affiliation.pug
@@ -33,6 +33,6 @@ mixin reconfirmAffiliationNotification(location)
mixin reconfirmedAffiliationNotification()
.alert.alert-info
.reconfirm-notification
- div
+ div(style="width:100%;")
//- extra div for flex styling
| !{translate("your_affiliation_is_confirmed", {institutionName: '{{userEmail.affiliation.institution.name}}'}, ['strong'])} #{translate('thank_you')}
diff --git a/services/web/frontend/stylesheets/app/content_page.less b/services/web/frontend/stylesheets/app/content_page.less
index 793be4e71a..9d2d49c93d 100644
--- a/services/web/frontend/stylesheets/app/content_page.less
+++ b/services/web/frontend/stylesheets/app/content_page.less
@@ -15,7 +15,16 @@
}
}
- .reset-btns; // reapply btn style to correct color property set on above
+ // correct color property set on above:
+ .reset-btns;
+ .alert {
+ .alert;
+ }
+ .alert-info {
+ .btn-info {
+ .btn-alert-info;
+ }
+ }
hr {
border-color: @hr-border-alt;
diff --git a/services/web/frontend/stylesheets/components/alerts.less b/services/web/frontend/stylesheets/components/alerts.less
index ecfc95adad..4499651d05 100755
--- a/services/web/frontend/stylesheets/components/alerts.less
+++ b/services/web/frontend/stylesheets/components/alerts.less
@@ -68,7 +68,8 @@
}
.btn-alert-info {
- .btn-alert-variant(@alert-info-bg);
+ .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+ .alert-btn(@btn-info-bg);
}
.alert-warning {
diff --git a/services/web/frontend/stylesheets/core/mixins.less b/services/web/frontend/stylesheets/core/mixins.less
index 68d30e7d23..0b10d24160 100755
--- a/services/web/frontend/stylesheets/core/mixins.less
+++ b/services/web/frontend/stylesheets/core/mixins.less
@@ -605,13 +605,24 @@
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
+.alert-btn(@background) {
+ background-color: darken(@background, 16%);
+ &:hover,
+ &:focus,
+ &:active,
+ &.active,
+ &.checked,
+ .open .dropdown-toggle& {
+ background-color: darken(@background, 24%);
+ }
+}
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
.alert & {
- background-color: darken(@background, 16%);
+ .alert-btn(@background);
}
&:hover,
@@ -623,9 +634,6 @@
color: @color;
background-color: darken(@background, 8%);
border-color: darken(@border, 12%);
- .alert & {
- background-color: darken(@background, 24%);
- }
}
&:active,
&.active,