Merge pull request #3630 from overleaf/jel-ui-reconfirm-portal

Show reconfirm notification on the portals

GitOrigin-RevId: 3899edce2699ce7206bc264f9b58bc790d80dd3d

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')}

services/web/frontend/stylesheets/app/content_page.less

@@ -15,7 +15,16 @@
     }
   }
 
-  .reset-btns; // reapply btn style to correct color property set on <a> above
+  // correct color property set on <a> above:
+  .reset-btns;
+  .alert {
+    .alert;
+  }
+  .alert-info {
+    .btn-info {
+      .btn-alert-info;
+    }
+  }
 
   hr {
     border-color: @hr-border-alt;

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 {

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,