From d0d692d27857f6360ffb44ad5fb26f3a7fb2c877 Mon Sep 17 00:00:00 2001 From: Cindy Nguyen Date: Mon, 6 Nov 2023 22:17:16 -0500 Subject: [PATCH] docs: notes on brand packaging discovery Co-authored-by: Mena Hassan --- src/App.scss | 10 +++---- src/containers/CourseCard/CourseCard.scss | 2 +- .../CourseFilterControls/index.scss | 3 +++ .../CourseList/NoCoursesView/index.scss | 4 +-- .../ConfirmEmailBanner.scss | 2 +- .../LearnerDashboardHeader/index.scss | 27 ++++++++++++++----- src/containers/MasqueradeBar/index.scss | 2 ++ .../components/index.scss | 2 +- .../RelatedProgramsModal/index.scss | 1 + src/widgets/ProductRecommendations/index.scss | 1 + .../components/PaintedDoorModal/index.scss | 2 +- .../components/index.scss | 2 +- src/widgets/RecommendationsPanel/index.scss | 2 ++ 13 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/App.scss b/src/App.scss index c78c30bb..81591eea 100755 --- 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 index 244b30c2..bce32e07 100644 --- 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 index 59264aab..0e7892c1 100644 --- 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 index 45f1756c..cb7e6254 100644 --- 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 index 68f90b02..4447eeca 100644 --- 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? } \ No newline at end of file diff --git a/src/containers/LearnerDashboardHeader/index.scss b/src/containers/LearnerDashboardHeader/index.scss index d8bd8da1..36847883 100644 --- 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 index 5cba8de5..72eec99a 100644 --- 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 index 505980a6..450d08f5 100644 --- 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 index f55dc7ed..2f6a3482 100644 --- 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 index c53d8608..1bfde4e2 100644 --- 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 index c03b3094..8fbfc58f 100644 --- 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 index 2cc23758..0b30c636 100644 --- 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 index e4f6f5ce..61ffeff1 100644 --- 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;