fix: fixed hover color issue throughout MFE (#644)

* fix: fixed hover color issue throughout MFE * fix: added border around add comment button * fix: removed add button radius
openedx · Jan 16, 2024 · 5df51f2 · 5df51f2
1 parent 92adec3
commit 5df51f2
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 34 deletions.
diff --git a/src/components/NavigationBar/CourseTabsNavigation.jsx b/src/components/NavigationBar/CourseTabsNavigation.jsx
@@ -24,7 +24,7 @@ const CourseTabsNavigation = ({
   }, [courseId]);
 
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
+    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4 bg-white', className)}>
       {!!tabs.length && (
         <Tabs
           className="nav-underline-tabs"

diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
@@ -116,7 +116,7 @@ const AuthorLabel = ({
           data-testid="learner-posts-link"
           id="learner-posts-link"
           to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
-          className="text-decoration-none"
+          className="text-decoration-none text-reset"
           style={{ width: 'fit-content' }}
         >
           {!alert && authorName}

diff --git a/src/discussions/common/HoverCard.jsx b/src/discussions/common/HoverCard.jsx
@@ -35,7 +35,7 @@ const HoverCard = ({
 
   return (
     <div
-      className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
+      className="flex-fill justify-content-end align-items-center hover-card bg-white mr-n4 position-absolute"
       data-testid={`hover-card-${id}`}
       id={`hover-card-${id}`}
     >

diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -78,7 +78,7 @@ const DiscussionsHome = () => {
         <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
           {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
           <div
-            className={classNames('header-action-bar', {
+            className={classNames('header-action-bar bg-white position-sticky', {
               'shadow-none border-light-300 border-bottom': enableInContextSidebar,
             })}
             ref={postActionBarRef}

diff --git a/src/discussions/post-comments/PostCommentsView.jsx b/src/discussions/post-comments/PostCommentsView.jsx
@@ -115,7 +115,7 @@ const PostCommentsView = () => {
         )
       )}
       <div
-        className="discussion-comments d-flex flex-column card border-0 post-card-margin post-card-padding on-focus"
+        className="discussion-comments d-flex flex-column card border-0 post-card-margin post-card-padding on-focus mx-4 mt-4 mb-0"
       >
         <Post handleAddResponseButton={handleAddResponseButton} />
         {!closed && (

diff --git a/src/discussions/post-comments/comments/CommentsView.jsx b/src/discussions/post-comments/comments/CommentsView.jsx
@@ -36,7 +36,7 @@ const CommentsView = ({ endorsed }) => {
 
   const handleDefinition = useCallback((message, commentsLength) => (
     <div
-      className="comment-line mx-4 my-14px text-gray-700 font-style"
+      className="comment-line line-height-24 mx-4 my-14px text-gray-700 font-style"
       role="heading"
       aria-level="2"
     >

diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -267,7 +267,7 @@ const Comment = ({
             ) : (
               !isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
                 <Button
-                  className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500"
+                  className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
                   variant="plain"
                   style={{ height: '36px' }}
                   onClick={handleAddCommentReply}

diff --git a/src/index.scss b/src/index.scss
@@ -22,23 +22,23 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .text-staff-color {
-  color: #998200;
+  color: $warning-700;
 }
 
 .outline-staff-color {
-  outline: #998200 solid 2px;
+  outline: $warning-700 solid 2px;
 }
 
 .text-TA-color {
-  color: #175B3C;
+  color: $success-700;
 }
 
 .outline-TA-color {
-  outline: #175B3C solid 2px;
+  outline: $success-700 solid 2px;
 }
 
 .outline-anonymous {
-  outline: #EAE6E5 solid 2px;
+  outline: $light-400 solid 2px;
 }
 
 .font-size-16 {
@@ -170,7 +170,7 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .learner > a:hover {
-  background-color: #F2F0EF;
+  background-color: $light-300;
 }
 
 .py-10px {
@@ -227,8 +227,6 @@ header {
 }
 
 #learner-posts-link {
-  color: inherit;
-
   span[role=heading]:hover {
     text-decoration: underline;
   }
@@ -310,7 +308,6 @@ header {
 #courseTabsNavigation {
   font-size: 18px !important;
   z-index: 3;
-  background-color: #fff;
 
   .container-xl {
     font-size: 1.125rem;
@@ -330,10 +327,8 @@ header {
 }
 
 .header-action-bar {
-  background-color: #fff;
   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;
 
   .nav-button-group{
@@ -378,8 +373,8 @@ header {
 }
 
 .btn-icon.btn-icon-primary:hover {
-  background-color: #F2F0EF !important;
-  color: #00262B !important
+  background-color: $light-300 !important;
+  color: $primary-500 !important
 }
 
 
@@ -405,19 +400,14 @@ header {
   padding: 24px 24px 10px 24px;
 }
 
-.post-card-margin {
-  margin: 24px 24px 0px 24px;
-}
-
 .hover-card {
   height: 36px !important;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), 0px 4px 10px rgba(0, 0, 0, 0.15);
   border-radius: 3px;
-  background: #FFFFFF;
   max-width: fit-content !important;
   margin-left: auto;
   margin-top: -2.063rem;
-  z-index: 2;
+  z-index: 1;
   right: 32px;
 }
 
@@ -426,18 +416,39 @@ header {
 }
 
 .hover-button:hover {
-  background-color: #F2F0EF !important;
+  background-color: $light-300 !important;
   height: 36px !important;
-  border: none;
+  border: none !important;
 }
 
 .btn-tertiary:hover {
-  background-color: #F2F0EF;
+  background-color: $light-300 !important;
+}
+
+.nav-button-group {
+  .nav-link {
+    &:hover {
+      background-color: $light-300 !important;
+    }
+  }
+
+  .nav-link.active,
+  .show>.nav-link {
+    background-color: $primary-500 !important;
+  }
+}
+
+.course-tabs-navigation {
+  .nav a {
+    &:hover {
+      background-color: $light-300 !important;;
+    }
+  }
 }
 
 .btn-tertiary:disabled {
-  color: #454545;
-  background-color: transparent;
+  color: $gray-700 !important;
+  background-color: transparent !important;
 }
 
 .disable-div {
@@ -488,12 +499,12 @@ header {
 }
 
 .line-height-24 {
-  line-height: 24px;
+  line-height: 24px !important;
 }
 
 .comments-sort {
   margin-bottom: -44px;
-  z-index: 1;
+  z-index: 0;
 }
 
 .comment-line {
@@ -504,12 +515,16 @@ header {
 .post-preview,
 .discussion-comments {
   blockquote {
-    border-left: 2px solid #ccc;
+    border-left: 2px solid $gray-200;
     margin-left: 1.5rem;
     padding-left: 1rem;
   }
 }
 
+.add-comment-btn {
+  border: 1px solid $light-300 !important;
+}
+
 .icon-size-24 {
   width: 1.5rem !important;
   height: 1.5rem !important;