feat: styled update

Author: MubeenFayyaz-Arbisoft

src/discussions/discussions-home/DiscussionContent.jsx

@@ -13,7 +13,7 @@ const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
 
   return (
-    <div className="d-flex discussionContentWrapper flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
+    <div className="d-flex flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
       <div className="d-flex flex-column w-100">
         <Suspense fallback={(<Spinner />)}>
           <Routes>

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -86,7 +86,7 @@ const DiscussionsHome = () => {
           {!enableInContextSidebar && <CourseTabsNavigation />}
           {(isEnrolled || !isUserLearner) && (
             <div
-              className={classNames('header-action-bar bg-white position-sticky headerWrapper', {
+              className={classNames('header-action-bar bg-white position-sticky', {
                 'shadow-none border-light-300 border-bottom': enableInContextSidebar,
               })}
               ref={postActionBarRef}
@@ -135,7 +135,7 @@ const DiscussionsHome = () => {
                 </Routes>
               </Suspense>
             ) : (
-              <div className="d-flex flex-row position-relative sidebarWrapper">
+              <div className="d-flex flex-row position-relative">
                 <Suspense fallback={(<Spinner />)}>
                   <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
                 </Suspense>

src/discussions/learners/learner/LearnerFooter.jsx

@@ -34,7 +34,13 @@ const LearnerFooter = ({
         )}
       >
         <div className="d-flex align-items-center">
-          <Icon src={QuestionAnswerOutline} className="icon-size mr-2" />
+        <svg width="24" className='pgn__icon icon-size mr-2' height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.35402 19.7002L9.45339 20.7996C9.89995 21.2461 10.6238 21.2461 11.0704 20.7996L12.1697 19.7002C12.483 19.3869 12.9072 19.2118 13.3499 19.2118H14.1768C15.859 19.2118 17.223 17.8478 17.223 16.1647V10.8157C17.223 9.13354 15.859 7.76953 14.1768 7.76953H6.3479C4.66479 7.76953 3.30078 9.13354 3.30078 10.8157V16.1647C3.30078 17.8478 4.66479 19.2118 6.3479 19.2118H7.17389C7.61656 19.2118 8.04074 19.3869 8.35402 19.7002Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.37891 7.76979V6.99147C7.37891 5.3103 8.74096 3.94922 10.4289 3.94922H18.2579C19.939 3.94922 21.3011 5.3103 21.3011 6.99147V12.3414C21.3011 14.0294 19.939 15.3905 18.2579 15.3905H17.4319C17.3618 15.3905 17.2927 15.3983 17.2227 15.4051" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.4541 13.6211V13.6909M12.737 13.6361C12.737 13.7932 12.6095 13.9206 12.4524 13.9206C12.2953 13.9206 12.168 13.7932 12.168 13.6361C12.168 13.4789 12.2953 13.3516 12.4524 13.3516C12.6095 13.3516 12.737 13.4789 12.737 13.6361Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.76858 13.6211V13.6909M8.05144 13.6361C8.05144 13.7932 7.92397 13.9206 7.76685 13.9206C7.60972 13.9206 7.48242 13.7932 7.48242 13.6361C7.48242 13.4789 7.60972 13.3516 7.76685 13.3516C7.92397 13.3516 8.05144 13.4789 8.05144 13.6361Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
           {threads + responses + replies}
         </div>
       </OverlayTrigger>

src/discussions/posts/post-actions-bar/PostActionsBar.jsx

@@ -55,7 +55,7 @@ const PostActionsBar = () => {
           <Button
             variant={enableInContextSidebar ? 'plain' : 'brand'}
             className={classNames(
-              'my-0 font-style border-0 line-height-24 purple-bg',
+              'my-0 font-style border-0 line-height-24',
               { 'px-3 py-10px border-0 transparent-bg': enableInContextSidebar },
             )}
             onClick={handleAddPost}

src/discussions/posts/post-filter-bar/PostFilterBar.jsx

@@ -29,6 +29,8 @@ import {
 import { selectThreadFilters, selectThreadSorting } from '../data/selectors';
 import messages from './messages';
 
+import FilterIcon from './filter-icon.svg';
+
 export const ActionItem = React.memo(({
   id,
   label,
@@ -184,7 +186,7 @@ const PostFilterBar = () => {
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
-        <span className="dark-black-color pr-4 font-style">
+        <span className="pr-4 font-style">
           {intl.formatMessage(messages.sortFilterStatus, {
             own: false,
             type: currentFilters.postType,
@@ -196,10 +198,10 @@ const PostFilterBar = () => {
         </span>
         <span>
           <Collapsible.Visible whenClosed>
-            <Icon src={Tune} />
+          <img src={FilterIcon} alt="FilterIcon" aria-hidden="true" />
           </Collapsible.Visible>
           <Collapsible.Visible whenOpen>
-            <Icon src={Tune} />
+          <img src={FilterIcon} alt="FilterIcon" aria-hidden="true" />
           </Collapsible.Visible>
         </span>
       </Collapsible.Trigger>

src/discussions/posts/post-filter-bar/filter-icon.svg

@@ -5,7 +5,7 @@ import {
   Badge, Icon, OverlayTrigger, Tooltip,
 } from '@openedx/paragon';
 import {
-  People, QuestionAnswer, QuestionAnswerOutline,
+  People,
   StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
 } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
@@ -17,6 +17,10 @@ import timeLocale from '../../common/time-locale';
 import { selectUserHasModerationPrivileges } from '../../data/selectors';
 import messages from './messages';
 
+import FilledChatIcon from './filled-chat-icon.svg';
+import OutlineChatIcon from './chat-icon.svg';
+
+
 const PostSummaryFooter = ({
   postId,
   voted,
@@ -35,8 +39,8 @@ const PostSummaryFooter = ({
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
 
   return (
-    <div className="d-flex align-items-center text-gray-700" style={{ height: '24px' }}>
-      <div className="d-flex align-items-center mr-4.5">
+    <div className="d-flex align-items-center text-gray-700 " style={{ height: '28px' }}>
+      <div className="d-flex align-items-center mr-4.5 ">
         <OverlayTrigger
           overlay={(
             <Tooltip id={`liked-${postId}-tooltip`}>
@@ -68,20 +72,20 @@ const PostSummaryFooter = ({
       </OverlayTrigger>
 
       {preview && commentCount > 1 && (
-        <div className="d-flex align-items-center ml-4.5 text-gray-700 font-style font-size-12">
+        <div className="d-flex align-items-center ml-4.5 text-gray-700 font-style font-size-12" style={{ gap: '5px' }}>
           <OverlayTrigger
             overlay={(
               <Tooltip id={`follow-${postId}-tooltip`}>
                 {intl.formatMessage(messages.activity)}
               </Tooltip>
             )}
           >
-            <Icon
-              src={unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
-              className="post-summary-comment-count-dimensions mr-0.5"
-            >
-              <span className="sr-only">{' '} {intl.formatMessage(messages.activity)}</span>
-            </Icon>
+
+
+<div className="post-summary-comment-count-dimensions mr-0.5 pgn__icon">
+<img  src={unreadCommentCount ? FilledChatIcon : OutlineChatIcon} />
+</div>
+          
           </OverlayTrigger>
           {commentCount}
         </div>

src/discussions/posts/post/PostSummaryFooter.jsx

@@ -597,79 +597,6 @@ td {
   white-space: nowrap;
 }
 
-#root {
-  .headerWrapper {
-    &.header-action-bar {
-      z-index: 100 !important;
-      .navbar {
-        padding-bottom: 32px;
-        .pgn {
-          &__searchfield {
-            form {
-              background-color: #f3f3f3 !important;
-
-              .form-control {
-                background-color: #f3f3f3 !important;
-              }
-            }
-          }
-        }
-        .nav-button-group {
-          .nav-item {
-            .nav-link {
-              color: #111827 !important;
-              &.active {
-                background: #4600c7 !important;
-                color: #fff !important;
-                &:hover {
-                  background: #4600c7 !important;
-                  color: #fff !important;
-                }
-              }
-              &:hover {
-                background-color: #f3f3f3 !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .sidebarWrapper {
-    border: 1px solid #f3f3f3;
-    border-radius: 8px !important;
-    padding: 0 !important;
-    margin-bottom: 30px !important;
-    overflow: hidden;
-    .discussion-posts {
-      border: 1px solid #f3f3f3;
-      border-radius: 8px 0 0 8px !important;
-    }
-  }
-  .discussionContentWrapper {
-    background-color: #f3f3f3;
-    border-radius: 0 8px 8px 0 !important;
-    .card{
-      &.post-form{
-        border: unset !important;
-      }
-    }
-  }
-}
-.purple-bg.transparent-bg {
-  background-color: transparent !important;
-}
-.buttonActionWrap {
-  button {
-    color: #4600c7 !important;
-  }
-}
 
-.post-card-comment {
-  .hover-button {
-    button {
-      color: #4600c7 !important;
-    }
-  }
-}
+