feat: Editor bar visibility (palm.master) (#581)

* feat: fixed editor bar visibility

* feat: fixed z index

src/components/NavigationBar/navBar.scss

@@ -1,10 +1,11 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/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;
 

src/discussions/common/AuthorLabel.jsx

@@ -51,7 +51,7 @@ const AuthorLabel = ({
 
   const authorName = (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -99,7 +99,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('font-family-inter align-content-center', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}

src/discussions/common/EndorsedAlertBanner.jsx

@@ -39,7 +39,7 @@ const EndorsedAlertBanner = ({
                 height: '20px',
               }}
             />
-            <strong className="ml-2 font-family-inter">
+            <strong className="ml-2">
               {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
             </strong>
           </div>

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

@@ -32,7 +32,7 @@ const CommentsView = ({
 
   const handleDefinition = (message, commentsLength) => (
     <div
-      className="mx-4 my-14px text-gray-700 font-style"
+      className="comment-line mx-4 my-14px text-gray-700 font-style"
       role="heading"
       aria-level="2"
     >

src/index.scss

@@ -1,7 +1,7 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/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";
@@ -65,10 +65,6 @@ $fa-font-path: "~font-awesome/fonts";
   font-style: normal;
 }
 
-.font-family-inter {
-  font-family: "Inter";
-}
-
 .post-footer-icon-dimentions {
   width: 32px !important;
   height: 32px !important;
@@ -277,7 +273,6 @@ header {
 
 header {
   line-height: 28px;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
   font-size: 18px;
   height: 60px;
 
@@ -314,10 +309,8 @@ header {
 
 #courseTabsNavigation {
   font-size: 18px;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
 
   .container-xl {
-    padding-left: 31px;
     font-size: 1.125rem;
 
     .nav {
@@ -336,7 +329,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 2;
+  z-index: 2 !important;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -345,11 +338,19 @@ header {
     .nav-item:not(:last-child){
       .nav-link {
           border-right: 0;
+
+          @media screen and (max-width: 567px) {
+            border-right: solid 1px #e9e6e4;
+          }
       }
     }
   }
 }
 
+.tox-tinymce-aux {
+  z-index: 1 !important;
+}
+
 .breadcrumb-menu {
   z-index: 1;
 }
@@ -477,7 +478,6 @@ header {
 }
 
 .font-style {
-  font-family: "Inter";
   font-style: normal;
 }
 
@@ -494,6 +494,11 @@ header {
   z-index: 1;
 }
 
+.comment-line {
+  width: calc(100% - 180px);
+  line-height: 1;
+}
+
 .post-preview,
 .discussion-comments {
   blockquote {
@@ -518,3 +523,8 @@ header {
   font-size: 18px;
   line-height: 28px;
 }
+
+.author-name {
+  line-height: 1;
+  word-break: break-all;
+}