From 56734eac544bc6184b8f60b0717e11d4b32ff5b6 Mon Sep 17 00:00:00 2001
From: Collin Preston <collinpreston@users.noreply.github.com>
Date: Fri, 28 Jun 2024 06:14:53 -0400
Subject: [PATCH] 4545 mitx online program drawercourse upgrade formatting
 (#2256)

* fix

* fix

* Code review comments

* Update for medium screens

* commit

* commit

* hold

* commit

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* changes

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 frontend/public/scss/cards.scss               |  2 +-
 frontend/public/scss/dashboard.scss           | 84 +++++++++++++------
 .../public/src/components/CartItemCard.js     |  2 +-
 .../public/src/components/EnrolledItemCard.js |  4 +-
 .../src/containers/pages/DashboardPage.js     |  4 +-
 5 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/frontend/public/scss/cards.scss b/frontend/public/scss/cards.scss
index b7eb47bd04..1c4461efc9 100644
--- a/frontend/public/scss/cards.scss
+++ b/frontend/public/scss/cards.scss
@@ -19,7 +19,7 @@ div.std-page-header {
 }
 
 div.std-page-header + div.std-page-body {
-    padding-top: 40px !important;
+    padding-top: 40px;
 }
 
 div.std-card {
diff --git a/frontend/public/scss/dashboard.scss b/frontend/public/scss/dashboard.scss
index 7fd933cb26..9e8dffad1f 100644
--- a/frontend/public/scss/dashboard.scss
+++ b/frontend/public/scss/dashboard.scss
@@ -75,25 +75,12 @@ $enrolled-passed-fg: #ffffff;
     div.row {
       margin: 0 !important;
       padding: 20px;
+      height: 100%;
     }
 
     @include media-breakpoint-down(sm)  {
       div.row.enrolled-item-info {
-        padding: 0 !important;
-
-        div.enrollment-details-container {
-          padding: 16px !important;
-        }
-      }
-    }
-
-    @include media-breakpoint-up(md) {
-      .row {
-        height: auto;
-
-        > * {
-          height: 100%;
-        }
+        padding: 15px;
       }
     }
 
@@ -101,7 +88,10 @@ $enrolled-passed-fg: #ffffff;
       @include media-breakpoint-down(sm)  {
         width: 100%;
         height: $featureImgMobileHeight;
-        border-radius: 0;
+
+        img {
+          border-radius: 5px 5px 0px 0px;
+        }
       }
 
       width: $featureImgWidth;
@@ -117,16 +107,33 @@ $enrolled-passed-fg: #ffffff;
       }
     }
 
-    .detail {
-      color: $gray;
+    .course-card-text-details {
 
-      strong {
-        color: $primary;
+      @include media-breakpoint-down(sm)  {
+        padding: 15px 0px 15px 0px;
+        gap: 15px;
+
+        h2 {
+          margin: 0;
+        }
+      }
+
+      .detail {
+        color: $gray;
+
+        strong {
+          color: $primary;
+        }
       }
     }
 
     div.row.certificate-row {
       padding: 0;
+
+      @include media-breakpoint-down(sm)  {
+        gap: 20px;
+        border: 1px 0px 0px 0px;
+      }
     }
   }
 
@@ -192,18 +199,25 @@ $enrolled-passed-fg: #ffffff;
 
   .upgrade-item-description {
     width: 100%;
-    flex-direction: row;
-    padding: 25px 30px ;
+    flex-direction: row !important;
+    padding: 25px 30px;
     border-top: $home-page-border-grey;
     background: $home-page-grey-lite;
 
+    @include media-breakpoint-down(sm) {
+      padding: 20px 15px;
+    }
+
     div.certificate-upgrade-message {
       width: 80%;
-      height: 30px;
-
       font-size: 16px;
       line-height: 30px;
 
+      @include media-breakpoint-down(md) {
+        height: auto;
+        width: auto;
+      }
+
       strong {
         color: $brand-darker-bg;
       }
@@ -213,6 +227,10 @@ $enrolled-passed-fg: #ffffff;
   .enrollment-extra-links {
     margin-top: 20px;
 
+    @include media-breakpoint-down(sm) {
+      margin-top: 15px;
+    }
+
     a {
       text-decoration: underline;
       margin: auto 0;
@@ -255,6 +273,10 @@ $enrolled-passed-fg: #ffffff;
 
   .get-cert-button-container button, .finaid-link-container {
     font-size: 14px !important;
+
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
   }
 
   .finaid-link-container {
@@ -270,6 +292,9 @@ $enrolled-passed-fg: #ffffff;
 
 .dashboard {
   font-family: "Inter", sans-serif;
+  @include media-breakpoint-down(md) {
+    padding-top: 0 !important;
+  }
 }
 
 .dashboard .tabs {
@@ -279,6 +304,8 @@ $enrolled-passed-fg: #ffffff;
 
   @include media-breakpoint-down(md) {
     margin-bottom: 30px;
+    gap: 0px;
+    justify-content: space-between;
   }
 }
 
@@ -292,6 +319,15 @@ $enrolled-passed-fg: #ffffff;
 
   @include media-breakpoint-down(sm) {
     margin-right: 1em;
+    padding: 20px 10px 20px 10px;
+    gap: 0px;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 19.36px;
+    text-align: left;
+    width: 100%;
+    text-align: center;
   }
 }
 
diff --git a/frontend/public/src/components/CartItemCard.js b/frontend/public/src/components/CartItemCard.js
index 1b65214e3b..0a4080229d 100644
--- a/frontend/public/src/components/CartItemCard.js
+++ b/frontend/public/src/components/CartItemCard.js
@@ -59,7 +59,7 @@ export class CartItemCard extends React.Component<Props> {
             <div className="img-container">{courseImage}</div>
           </div>
 
-          <div className="col-12 col-md enrollment-details-container">
+          <div className="col-12 col-md">
             <h2 className="">{title}</h2>
             <div className="detail">
               {readableId}
diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js
index 777a65cb7d..4823052e18 100644
--- a/frontend/public/src/components/EnrolledItemCard.js
+++ b/frontend/public/src/components/EnrolledItemCard.js
@@ -497,7 +497,7 @@ export class EnrolledItemCard extends React.Component<
             </div>
           )}
 
-          <div className="col-12 col-md enrollment-details-container">
+          <div className="col-12 col-md course-card-text-details d-grid">
             <div className="d-flex justify-content-between align-content-start flex-nowrap w-100">
               <div className="d-flex flex-column">
                 <div className="align-content-start d-flex enrollment-mode-container flex-wrap pb-1">
@@ -626,7 +626,7 @@ export class EnrolledItemCard extends React.Component<
             </div>
           </div>
 
-          <div className="col-12 col-md enrollment-details-container">
+          <div className="col-12 col-md">
             <div className="d-flex justify-content-between align-content-start flex-nowrap w-100 enrollment-mode-container">
               <div className="d-flex flex-column">
                 <div className="align-content-start d-flex enrollment-mode-container flex-wrap pb-1">
diff --git a/frontend/public/src/containers/pages/DashboardPage.js b/frontend/public/src/containers/pages/DashboardPage.js
index f77a1e260b..356a692cbf 100644
--- a/frontend/public/src/containers/pages/DashboardPage.js
+++ b/frontend/public/src/containers/pages/DashboardPage.js
@@ -243,9 +243,9 @@ export class DashboardPage extends React.Component<
           <div role="banner" className="std-page-header">
             <h1>{DASHBOARD_PAGE_TITLE}</h1>
           </div>
-          <div className="std-page-body dashboard container">
+          <div className="dashboard std-page-body container">
             <Loader isLoading={isLoading}>
-              <nav className="tabs" aria-controls="enrollment-items">
+              <nav className="tabs d-flex" aria-controls="enrollment-items">
                 {programEnrollmentsLength === 0 ? (
                   <>
                     <button