fix(deps): update dependency @edx/frontend-platform to v8.3.7 (#768)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env

@@ -22,5 +22,3 @@ USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.development

@@ -23,5 +23,3 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

package.json

@@ -32,9 +32,9 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "^14.6.0",
     "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-platform": "^8.3.8",
+    "@edx/frontend-platform": "^8.3.3",
     "@edx/openedx-atlas": "^0.6.0",
-    "@openedx/paragon": "^23.4.5",
+    "@openedx/paragon": "^22.16.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "5.1.1",
     "babel-polyfill": "6.26.0",

src/components/NavigationBar/navBar.scss

@@ -1,16 +1,24 @@
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@openedx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
+
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome";
+
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 
   .nav a,
   .nav button {
     &:hover {
-      background-color: var(--pgn-color-light-400);
+      background-color: $light-400;
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: var(--pgn-color-light-400);
+      background-color: $light-400;
       border-bottom: none;
     }
   }
@@ -22,7 +30,7 @@
   .nav-link {
     border-bottom: 4px solid transparent;
     border-top: 4px solid transparent;
-    color: var(--pgn-color-gray-700);
+    color: $gray-700;
 
     // temporary until we can remove .btn class from dropdowns
     border-left: 0;
@@ -32,9 +40,9 @@
     &:hover,
     &:focus,
     &.active {
-      font-weight: var(--pgn-typography-font-weight-normal);
+      font-weight: $font-weight-normal;
-      color: var(--pgn-color-primary-500);
+      color: $primary-500;
-      border-bottom-color: var(--pgn-color-primary-500);
+      border-bottom-color: $primary-500;
     }
   }
 }

src/discussions/post-comments/comments/CommentsView.jsx

@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
              variant="plain"
              block="true"
              className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
-                    line-height-24 text-primary-500 bg-white"
+                    line-height-24 text-primary-500"
              onClick={handleAddResponse}
              data-testid="add-response"
            >

src/discussions/posts/data/hooks.js

@@ -11,9 +11,9 @@ const usePostList = (ids) => {
 
   const sortedIds = useMemo(() => {
     posts.forEach((post) => {
-      if (post.pinned) {
+      if (post && post.pinned) {
         pinnedPostsIds.push(post.id);
-      } else {
+      } else if (post) {
         unpinnedPostsIds.push(post.id);
       }
     });

src/index.scss

@@ -1,9 +1,13 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts.scss";
-
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@openedx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
 
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome";
 
 body,
 #main
@@ -24,10 +28,6 @@ body,
   font-size: 16px !important;
 }
 
-.btn-plain {
-    background-color: var(--pgn-color-card-bg-base) !important;
-}
-
 #post,
 #comment,
 #reply,
@@ -41,23 +41,23 @@ body,
 }
 
 .text-staff-color {
-  color: var(--pgn-color-warning-700);
+  color: $warning-700;
 }
 
 .outline-staff-color {
-  outline: var(--pgn-color-warning-700) solid 2px;
+  outline: $warning-700 solid 2px;
 }
 
 .text-TA-color {
-  color: var(--pgn-color-success-700);
+  color: $success-700;
 }
 
 .outline-TA-color {
-  outline: var(--pgn-color-success-700) solid 2px;
+  outline: $success-700 solid 2px;
 }
 
 .outline-anonymous {
-  outline: var(--pgn-color-light-400) solid 2px;
+  outline: $light-400 solid 2px;
 }
 
 .font-size-8 {
@@ -173,7 +173,7 @@ body,
 }
 
 .learner > a:hover {
-  background-color: var(--pgn-color-light-300);
+  background-color: $light-300;
 }
 
 .py-10px {
@@ -252,12 +252,12 @@ header {
 }
 
 .border-light-400-2 {
-  border: 2px solid var(--pgn-color-light-400) !important;
+  border: 2px solid $light-400 !important;
   border-width: 2px !important;
 }
 
 .border-primary-500-2 {
-  border: 2px solid var(--pgn-color-primary-500) !important;
+  border: 2px solid $primary-500 !important;
   border-width: 2px !important;
 }
 
@@ -383,8 +383,8 @@ header {
 }
 
 .btn-icon.btn-icon-primary:hover {
-  background-color: var(--pgn-color-light-300) !important;
+  background-color: $light-300 !important;
-  color: var(--pgn-color-primary-500) !important
+  color: $primary-500 !important
 }
 
 
@@ -427,38 +427,38 @@ header {
 }
 
 .hover-button:hover {
-  background-color: var(--pgn-color-light-300) !important;
+  background-color: $light-300 !important;
   height: 36px !important;
   border: none !important;
 }
 
 .btn-tertiary:hover {
-  background-color: var(--pgn-color-light-300) !important;
+  background-color: $light-300 !important;
 }
 
 .nav-button-group {
   .nav-link {
     &:hover {
-      background-color: var(--pgn-color-light-300) !important;
+      background-color: $light-300 !important;
     }
   }
 
   .nav-link.active,
   .show>.nav-link {
-    background-color: var(--pgn-color-primary-500) !important;
+    background-color: $primary-500 !important;
   }
 }
 
 .course-tabs-navigation {
   .nav a {
     &:hover {
-      background-color: var(--pgn-color-light-300) !important;;
+      background-color: $light-300 !important;;
     }
   }
 }
 
 .btn-tertiary:disabled {
-  color: var(--pgn-color-gray-700) !important;
+  color: $gray-700 !important;
   background-color: transparent !important;
 }
 
@@ -535,14 +535,14 @@ code {
 .post-preview,
 .discussion-comments {
   blockquote {
-    border-left: 2px solid var(--pgn-color-gray-200);
+    border-left: 2px solid $gray-200;
     margin-left: 1.5rem;
     padding-left: 1rem;
   }
 }
 
 .add-comment-btn {
-  border: 1px solid var(--pgn-color-light-300) !important;
+  border: 1px solid $light-300 !important;
 }
 
 .icon-size-24 {
@@ -588,7 +588,7 @@ code {
 }
 
 th, td {
-  border: 1px dashed var(--pgn-color-gray-200);
+  border: 1px dashed $gray-200;
   padding: 0.4rem;
   white-space: nowrap;
 }