From 7cfeaab330b5134ad948b01532b6ecd5b214a841 Mon Sep 17 00:00:00 2001
From: julianajlk <jkang@edx.org>
Date: Wed, 29 Sep 2021 10:15:57 -0400
Subject: [PATCH] fix: Value Prop miscellaneous styling fixes (#657)

REV-2188
---
 src/courseware/course/CourseBreadcrumbs.jsx       |  2 +-
 src/courseware/course/NotificationTrigger.scss    |  2 +-
 .../course/sequence/lock-paywall/LockPaywall.jsx  |  2 +-
 .../upgrade-notification/UpgradeNotification.jsx  | 15 ++++++++-------
 .../upgrade-notification/UpgradeNotification.scss |  9 +++------
 5 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index 5cb73d1f..14d76d31 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -119,7 +119,7 @@ export default function CourseBreadcrumbs({
     return temp;
   }, [courseStatus, sections, sequences]);
   return (
-    <nav aria-label="breadcrumb" className="my-1 d-inline-block col-sm-10">
+    <nav aria-label="breadcrumb" className="my-4 d-inline-block col-sm-10">
       <ol className="list-unstyled d-flex align-items-center m-0">
         <li>
           <a
diff --git a/src/courseware/course/NotificationTrigger.scss b/src/courseware/course/NotificationTrigger.scss
index fe06bb8b..a3267a07 100644
--- a/src/courseware/course/NotificationTrigger.scss
+++ b/src/courseware/course/NotificationTrigger.scss
@@ -1,7 +1,7 @@
 .notification-trigger-btn {
     border: 1px solid $light-400;
     background: none;
-    margin-top: 0.625rem;
+    margin-top: 1rem;
 
     position: absolute;
     right: 0;
diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
index 9dde2924..849ff425 100644
--- a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
+++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
@@ -149,7 +149,7 @@ function LockPaywall({
 
         <div
           className={
-            classNames('p-md-0 d-md-flex align-items-md-center text-right', {
+            classNames('d-md-flex align-items-md-center text-right', {
               'col-md-5 mx-md-0': notificationTrayVisible, 'col-md-4 mx-md-3 justify-content-center': !notificationTrayVisible && !shouldDisplayGatedContentTwoColumnsHalf, 'col-md-11 justify-content-end': shouldDisplayGatedContentOneColumn && !shouldDisplayGatedContentTwoColumns, 'col-md-6 justify-content-center': shouldDisplayGatedContentTwoColumnsHalf,
             })
           }
diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx
index d44a4e8b..deb28bd2 100644
--- a/src/generic/upgrade-notification/UpgradeNotification.jsx
+++ b/src/generic/upgrade-notification/UpgradeNotification.jsx
@@ -463,13 +463,14 @@ function UpgradeNotification({
       <div className="upgrade-notification-message">
         {upsellMessage}
       </div>
-      <UpgradeButton
-        offer={offer}
-        onClick={logClick}
-        verifiedMode={verifiedMode}
-        className="upgrade-notification-button"
-        block
-      />
+      <div className="upgrade-notification-button">
+        <UpgradeButton
+          offer={offer}
+          onClick={logClick}
+          verifiedMode={verifiedMode}
+          block
+        />
+      </div>
       {offerCode}
     </section>
   );
diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss
index 159158f1..ad3ba288 100644
--- a/src/generic/upgrade-notification/UpgradeNotification.scss
+++ b/src/generic/upgrade-notification/UpgradeNotification.scss
@@ -19,9 +19,7 @@
 }
 
 .upgrade-notification-ul {
-  margin-left: 3rem;
-  padding-top: 0.875rem;
-  padding-right: 1.25rem;
+  padding: 0.875rem 1.25rem 0 1.25rem;
 }
 
 .upgrade-notification-li {
@@ -34,9 +32,8 @@
 }
 
 .upgrade-notification-button {
-  width: 90%;
-  margin: 0 auto;
-  margin-bottom: 1.25rem;
+  padding: 1.25rem;
+  padding-top: 0;
 }
 
 .discount-info {