Merge pull request #22510 from edx/hasnain-naveed/ENT-2452

ENT-2452, ENT-2068 | Made the lms and learner portal alerts responsiv…

lms/static/js/learner_dashboard/EnterpriseLearnerPortalBanner.jsx

@@ -10,7 +10,7 @@ function getAlertHtml(learnerPortalLinks) {
   let html = '';
   for (let i = 0; i < learnerPortalLinks.length; i += 1) {
     const link = learnerPortalLinks[i];
-    html += `<div>
+    html += `<div class="copy-content">
       ${link.title} has a dedicated page where you can see all of your sponsored courses.
       Go to <a href="${link.url}">your learner portal</a>.
     </div>`;

lms/static/sass/elements/_system-feedback.scss

@@ -14,7 +14,7 @@
     @include clearfix();
 
     max-width: grid-width(12);
-    min-width: 760px;
+    min-width: 320px;
     width: flex-grid(12);
     margin: 0 auto;
   }
@@ -97,6 +97,7 @@
   // object variations
   &.urgency-high {
     background: $notify-banner-bg-1;
+    margin-bottom: 5px;
 
     .msg {
       color: $white;
@@ -117,7 +118,7 @@
       box-shadow: none;
       border-top: 1px solid #579cc5;
       padding: 20px 20px 20px 40px;
-      margin-top: -16px;
+      margin: -16px 0 5px 0
     }
     .fa-close {
       position: relative;

lms/static/sass/features/_enterprise-learner-portal-banner.scss

@@ -1,7 +1,8 @@
 $enterprise-learner-portal-banner-background-color: #d9edf7 !default;
-$enterprise-learner-portal-banner-text-color: #4e4e4e !default;
+$enterprise-learner-portal-banner-text-color: #000000 !default;
 $enterprise-learner-portal-banner-cta-base: #0075b4 !default;
 $enterprise-learner-portal-banner-cta-hover: #075683 !default;
+$enterprise-learner-portal-banner-btn-color: #000000 !default;
 
 .edx-enterprise-learner-portal-banner-wrapper {
   background: $enterprise-learner-portal-banner-background-color;
@@ -10,6 +11,7 @@ $enterprise-learner-portal-banner-cta-hover: #075683 !default;
   /** Base Styles - start **/
   text-align: left;
   line-height: 1.5;
+  margin-bottom: 5px;
   font: {
     family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
     size: 1rem;
@@ -30,7 +32,7 @@ $enterprise-learner-portal-banner-cta-hover: #075683 !default;
       background: transparent;
       border: 0;
       text-shadow: 0 1px 0 #fff;
-      opacity: 0.5;
+      opacity: 1;
       float: right;
       line-height: 1;
       font: {
@@ -54,11 +56,12 @@ $enterprise-learner-portal-banner-cta-hover: #075683 !default;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    max-width: 1200px;
+    max-width: none !important;
     min-width: 0;
     margin: 0 auto;
     background: inherit;
     border: none;
+    padding: 20px 20px 20px 40px;
 
     .policy-link {
       color: $enterprise-learner-portal-banner-cta-base;
@@ -71,19 +74,29 @@ $enterprise-learner-portal-banner-cta-hover: #075683 !default;
       }
     }
 
+    .copy-content {
+      font-size: 0.875rem;
+      line-height: 1.4;
+      color: $enterprise-learner-portal-banner-text-color;
+     }
+
     .alert-dialog {
       margin-right: 30px;
       color: $enterprise-learner-portal-banner-text-color;
+      max-width: 1180px;
+      margin: 0 auto;
+      width: 100%;
     }
 
     .btn.close {
-      color: $enterprise-learner-portal-banner-cta-base;
+      color: $enterprise-learner-portal-banner-btn-color;
+      text-shadow: 0 0 1px $enterprise-learner-portal-banner-btn-color;
+      bottom: 0;
 
       &:focus,
       &:hover {
-        color: $enterprise-learner-portal-banner-cta-hover;
         cursor: pointer;
       }
     }
   }
-}
+}