docs: notes on brand packaging discovery

Co-authored-by: Mena Hassan <[email protected]>
openedx · Nov 27, 2023 · d0d692d · d0d692d
1 parent 5ca1e9d
commit d0d692d
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 20 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -17,8 +17,9 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
   white-space: nowrap;
 }
 
+// Hard coded color here, there's a paragon equivalent
 .alert.alert-info .alert-icon {
-  color: black;
+  color: black; 
 }
 
 #root {
@@ -34,6 +35,7 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
     flex-grow: 1;
   }
 
+  // Brand logo header has no way of being overwritten by the imported brand package therefore not customizable. Is this intentional?
   header {
     flex: 0 0 auto;
 
@@ -57,11 +59,7 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
 }
 
 #paragon-portal-root {
-  .pgn__modal-layer {
-    .pgn__modal-close-container {
-      right: 1rem !important;
-    }
-  }
+  // Removed because there was no visible difference within the element with or without it
   .confirm-modal .pgn__modal-body {
     overflow: hidden;
   }

diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss
@@ -1,6 +1,6 @@
 @import "@edx/paragon/scss/core/core";
 
-.course-card {
+.course-card { // Can this be replaced with paragon's card component?
   .card {
     .pgn__card-wrapper-image-cap.vertical {
       display: flex;

diff --git a/src/containers/CourseFilterControls/index.scss b/src/containers/CourseFilterControls/index.scss
@@ -1,3 +1,4 @@
+// Hard coded max-width and width features, is this needed? And can this be replaced by paragon?
 .pgn__sheet-component {
   max-width: 75% !important;
   width: 75% !important;
@@ -7,6 +8,8 @@
     font-size: 18px;
   }
 }
+
+// Seems to be hard coded features for a card component. Can this be replaced by paragon's card component?
 #course-filter-controls-card {
   width: 512px;
   height: 288px;

diff --git a/src/containers/CourseList/NoCoursesView/index.scss b/src/containers/CourseList/NoCoursesView/index.scss
@@ -1,11 +1,11 @@
 @import "@edx/paragon/scss/core/core";
 
 #no-courses-content-view {
-  border: 2px solid $light-400;
+  border: 2px solid $light-400; // Can this be replaced by paragon?
   flex-direction: column;
   padding-bottom: map-get($spacers, 5);
   padding-top: map-get($spacers, 5);
-  height: 100%;
+  height: 100%; // Can this be replaced by paragon?
 
   & > * {
     margin-top: map-get($spacers, 3);

diff --git a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/ConfirmEmailBanner.scss b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/ConfirmEmailBanner.scss
@@ -1,3 +1,3 @@
 .confirm-email-now-button {
-  text-decoration: underline !important;
+  text-decoration: underline !important; // Can we find paragon replacement? Can we remove !important?
 }
diff --git a/src/containers/LearnerDashboardHeader/index.scss b/src/containers/LearnerDashboardHeader/index.scss
@@ -1,12 +1,14 @@
+// Seems to not be used anywhere, can this be removed?
 .dropdown-menu-collapse {
   width: 100vw;
   position: absolute;
   left: 0;
 }
 
+// Hard coded border bottom to indicate which tab we are on. The transparent border bottom is to align all the navigation links in the headers. Seems like a similar affect could be accomplishged using margin.
 .learner-variant-header {
   a {
-    // needed to make the link not resize the header
+    // Hard coded, not sure of the best way to address this
     border-bottom: 2px solid transparent;
   }
   .course-link {
@@ -18,21 +20,32 @@
   }
 }
 
+// Hard coded many items in the nav collapsed menu, would be hard to style
 .nav-small-menu {
   > * {
-    justify-content: flex-start !important;
+    justify-content: flex-start !important; 
 
-    border-radius: 0 !important;
-    border-top: 1px solid #ddd !important;
+    border-radius: 0 !important; // Could potentially be replaced by paragon's styles?
+    border-top: 1px solid #ddd !important; // Could potentially be replaced by paragon's styles?
 
     &::after {
       content: '\00BB';
-      padding-left: 10px;
+      padding-left: 10px; // Could potentially be replaced by paragon's styles?
     }
   }
 }
 
 .logo {
-  // copy from legacy dashboard
-  height: 40px;
+  // Removed hard coded px height. Suggested change comes from frontend component header in order to have some consistencies. It seems to work just fine when using the same exact style that we have for logo in frontend component header
+  display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: 1rem 0;
+    margin-right: 1rem;
+    img {
+      display: block;
+      height: 100%;
+    }
 }
diff --git a/src/containers/MasqueradeBar/index.scss b/src/containers/MasqueradeBar/index.scss
@@ -6,6 +6,7 @@
   padding: map-get($spacers, 3);
   margin-bottom: map-get($spacers, 2);
 
+  // Margin-bottom is hard coded, can we replace this with paragon/bootstrap?
   .masquerade-form-label {
     padding: map-get($spacers, 2) map-get($spacers, 3);
     display: flex;
@@ -18,6 +19,7 @@
     }
   }
 
+  // Margin-bottom is hard coded, can we replace this with paragon/bootstrap?
   .masquerade-form-input {
     margin-bottom: 0;
     flex-grow: 1;

diff --git a/src/containers/RelatedProgramsModal/components/index.scss b/src/containers/RelatedProgramsModal/components/index.scss
@@ -1,4 +1,4 @@
-.program-card {
+.program-card { // Can entire file be replaced with paragon's card component?
   color: white !important;
   .program-card-banner {
     .pgn__card-image-cap {

diff --git a/src/containers/RelatedProgramsModal/index.scss b/src/containers/RelatedProgramsModal/index.scss
@@ -1,3 +1,4 @@
+// Hard coded, can this be replaced by paragon?
 .related-programs-modal {
   .programs-title {
     font-size: 1.5rem;

diff --git a/src/widgets/ProductRecommendations/index.scss b/src/widgets/ProductRecommendations/index.scss
@@ -1,5 +1,6 @@
 @import "@edx/paragon/scss/core/core";
 
+// This is essentially creating a card component, can be replaced by using paragon's card component
 $horizontal-card-gap: 20px;
 $vertical-card-gap: 24px;
 

diff --git a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.scss b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.scss
@@ -7,7 +7,7 @@
 @media (max-width: 464px) {
     .pgn__action-row{
         flex-direction: column;
-        gap: 5px;
+        gap: 5px; // Can this be replaced?
         button {
             width: 100%;
         }

diff --git a/src/widgets/RecommendationsPanel/components/index.scss b/src/widgets/RecommendationsPanel/components/index.scss
@@ -1,5 +1,5 @@
 @import "@edx/paragon/scss/core/core";
-
+// Seems to be trying to create a card component. Can this entire file be replaced with paragon's card component? 
 .card-link{
   display: block !important;
   margin: 0.5rem 0 0.5rem 0 !important;

diff --git a/src/widgets/RecommendationsPanel/index.scss b/src/widgets/RecommendationsPanel/index.scss
@@ -1,5 +1,6 @@
 @import "@edx/paragon/scss/core/core";
 
+// Hard coded, should we be using paragon equivalent?
 .explore-courses-btn {
   padding-top: 16px;
 }
@@ -8,6 +9,7 @@
   background: $light-200;
 }
 
+// Height value is hard coded. Would we we want poeple to be able to change the height?
 .recommendations-loading {
   display: flex;
   justify-content: center;