work progress

MubeenFayyaz-Arbisoft · MubeenFayyaz-Arbisoft · commit 758f98269646 · 2025-01-28T11:33:29.000+05:00
diff --git a/src/components/FilterBar.jsx b/src/components/FilterBar.jsx
@@ -104,7 +104,7 @@ const FilterBar = ({
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
-        <span className="text-primary-700 pr-4">
+        <span className="pr-4 dark-black-color">
           {intl.formatMessage(messages.sortFilterStatus, {
             own: false,
             type: selectedFilters.postType,
diff --git a/src/components/PostPreviewPanel.jsx b/src/components/PostPreviewPanel.jsx
@@ -49,7 +49,7 @@ const PostPreviewPanel = ({
             variant="link"
             size="sm"
             onClick={() => setShowPreviewPane(true)}
-            className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
+            className={`dark-black-color font-style p-0 ${editExisting && 'mb-4.5'}`}
             style={{ lineHeight: '26px' }}
             data-testid="show-preview-button"
           >
diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
@@ -31,7 +31,7 @@ const AuthorLabel = ({
 
   const isRetiredUser = author ? author.startsWith('retired__user') : false;
   const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
-  const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
+  const className = classNames('d-flex align-items-center dark-black-color', { 'mb-0.5': !postOrComment }, labelColor);
 
   const showUserNameAsLink = linkToProfile && author && author !== intl.formatMessage(messages.anonymous)
                              && !enableInContextSidebar;
diff --git a/src/discussions/discussions-home/DiscussionContent.jsx b/src/discussions/discussions-home/DiscussionContent.jsx
@@ -13,7 +13,7 @@ const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
 
   return (
-    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
+    <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-100">
         <Suspense fallback={(<Spinner />)}>
           <Routes>
diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx
@@ -51,7 +51,7 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
       ref={sidebarRef}
       className={classNames('flex-column position-sticky', {
         'd-none': !displaySidebar,
-        'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
+        'd-flex overflow-auto': displaySidebar,
         'w-100': !isOnDesktop,
         'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
         'sidebar-tablet-width': isOnTablet && !isOnDesktop,
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/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', {
+              className={classNames('header-action-bar bg-white position-sticky headerWrapper', {
                 '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">
+              <div className="d-flex flex-row position-relative sidebarWrapper">
                 <Suspense fallback={(<Spinner />)}>
                   <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
                 </Suspense>
diff --git a/src/discussions/empty-posts/EmptyPage.jsx b/src/discussions/empty-posts/EmptyPage.jsx
@@ -14,8 +14,8 @@ const EmptyPage = ({
   fullWidth = false,
 }) => {
   const containerClasses = classNames(
-    'min-content-height justify-content-center align-items-center d-flex w-100 flex-column',
-    { 'bg-light-400': !fullWidth },
+    'min-content-height justify-content-center align-items-center d-flex w-100 flex-column bg-light-grey',
+    { 'bg-light-grey': !fullWidth },
   );
 
   return (
diff --git a/src/discussions/in-context-topics/topic/ArchivedBaseGroup.jsx b/src/discussions/in-context-topics/topic/ArchivedBaseGroup.jsx
@@ -34,7 +34,7 @@ const ArchivedBaseGroup = ({
         className="discussion-topic-group d-flex flex-column text-primary-500"
         data-testid="archived-group"
       >
-        <div className="pt-3 px-4 font-weight-bold">{intl.formatMessage(messages.archivedTopics)}</div>
+        <div className="pt-3 px-4 font-weight-bold dark-black-color">{intl.formatMessage(messages.archivedTopics)}</div>
         {renderArchivedTopics}
       </div>
     </>
diff --git a/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx b/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
@@ -65,7 +65,7 @@ const SectionBaseGroup = ({
       data-section-id={sectionId}
       data-testid="section-group"
     >
-      <div className="pt-3 px-4 font-weight-bold">
+      <div className="pt-3 px-4 font-weight-bold dark-black-color">
         {sectionTitle || intl.formatMessage(messages.unnamedSection)}
       </div>
       {renderSection}
diff --git a/src/discussions/in-context-topics/topic/Topic.jsx b/src/discussions/in-context-topics/topic/Topic.jsx
@@ -38,9 +38,9 @@ const Topic = ({
         tabIndex={(isSelected(topic.id) || index === 0) ? 0 : -1}
       >
         <div className="d-flex flex-row pt-2.5 pb-2 px-4">
-          <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
+          <div className="d-flex flex-column flex-fill dark-black-color" style={{ minWidth: 0 }}>
             <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
-              <div className="topic-name text-truncate">
+              <div className="topic-name text-truncate dark-black-color">
                 {topic?.name || topic?.displayName || intl.formatMessage(messages.unnamedTopicSubCategories)}
               </div>
             </div>
diff --git a/src/discussions/learners/LearnerPostsView.jsx b/src/discussions/learners/LearnerPostsView.jsx
@@ -84,9 +84,10 @@ const LearnerPostsView = () => {
           style={{ padding: '18px' }}
           size="inline"
           onClick={() => navigate({ ...discussionsPath(Routes.LEARNERS.PATH, { courseId })(location) })}
+          className='dark-black-color'
           alt={intl.formatMessage(messages.back)}
         />
-        <div className="text-primary-500 font-style font-weight-bold py-2.5">
+        <div className=" font-style font-weight-bold py-2.5 dark-black-color">
           {intl.formatMessage(messages.activityForLearner, { username: capitalize(username) })}
         </div>
         <div style={{ padding: '18px' }} />
diff --git a/src/discussions/learners/LearnersView.jsx b/src/discussions/learners/LearnersView.jsx
@@ -65,7 +65,7 @@ const LearnersView = () => {
   }, [courseConfigLoadingStatus, learners]);
 
   return (
-    <div className="d-flex flex-column border-right border-light-400">
+    <div className="d-flex flex-column">
       {!usernameSearch && <LearnerFilterBar /> }
       <div className="border-bottom border-light-400" />
       {usernameSearch && (
diff --git a/src/discussions/learners/learner/LearnerCard.jsx b/src/discussions/learners/learner/LearnerCard.jsx
@@ -37,7 +37,7 @@ const LearnerCard = ({ learner }) => {
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
             <div className="d-flex align-items-center flex-fill">
               <div
-                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
+                className="text-truncate font-weight-500 font-size-14 font-style dark-black-color"
               >
                 {username}
               </div>
diff --git a/src/discussions/learners/learner/LearnerFilterBar.jsx b/src/discussions/learners/learner/LearnerFilterBar.jsx
@@ -77,7 +77,7 @@ const LearnerFilterBar = () => {
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
-        <span className="text-primary-700 pr-4">
+        <span className=" pr-4 dark-black-color">
           {intl.formatMessage(messages.sortFilterStatus, {
             sort: currentSorting,
           })}
diff --git a/src/discussions/post-comments/PostCommentsView.jsx b/src/discussions/post-comments/PostCommentsView.jsx
@@ -90,7 +90,7 @@ const PostCommentsView = () => {
             <div className="px-4 py-1.5 bg-white">
               <Button
                 variant="plain"
-                className="px-0 line-height-24 py-0 my-1.5 border-0 font-weight-normal font-style text-primary-500"
+                className="px-0 line-height-24 py-0 my-1.5 border-0 font-weight-normal font-style dark-black-color"
                 iconBefore={ArrowBack}
                 onClick={() => navigate({ ...redirectUrl })}
                 size="sm"
diff --git a/src/discussions/post-comments/comments/CommentsView.jsx b/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 font-size-14 text-primary-500"
+                    line-height-24 font-size-14 purple-color"
              onClick={handleAddResponse}
              data-testid="add-response"
            >
diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -219,7 +219,7 @@ const Comment = ({
             />
           ) : (
             <HTMLLoader
-              cssClassName="comment-body html-loader text-break mt-14px font-style text-primary-500"
+              cssClassName="comment-body html-loader text-break mt-14px font-style dark-black-color"
               componentId="comment"
               htmlNode={renderedBody}
               testId={id}
diff --git a/src/discussions/post-comments/comments/comment/CommentEditor.jsx b/src/discussions/post-comments/comments/comment/CommentEditor.jsx
@@ -165,6 +165,7 @@ const CommentEditor = ({
           <PostPreviewPanel htmlNode={values.comment} />
           <div className="d-flex py-2 justify-content-end">
             <Button
+            className='secondary-color-btn'
               variant="outline-primary"
               onClick={() => handleCloseEditor(resetForm)}
             >
@@ -176,7 +177,7 @@ const CommentEditor = ({
                 default: intl.formatMessage(messages.submit),
                 pending: intl.formatMessage(messages.submitting),
               }}
-              className="ml-2"
+              className="ml-2 purple-bg border-purple-color"
               variant="primary"
               onClick={handleSubmit}
             />
diff --git a/src/discussions/post-comments/comments/comment/Reply.jsx b/src/discussions/post-comments/comments/comment/Reply.jsx
@@ -140,7 +140,7 @@ const Reply = ({ responseId }) => {
               postCreatedAt={createdAt}
               postOrComment
             />
-            <div className="ml-auto d-flex">
+            <div className="ml-auto d-flex buttonActionWrap">
               <ActionsDropdown
                 actionHandlers={actionHandlers}
                 contentType={ContentTypes.COMMENT}
@@ -165,7 +165,7 @@ const Reply = ({ responseId }) => {
             <HTMLLoader
               componentId="reply"
               htmlNode={renderedBody}
-              cssClassName="html-loader text-break font-style text-primary-500"
+              cssClassName="html-loader text-break font-style dark-black-color"
               testId={id}
             />
           )}
diff --git a/src/discussions/posts/PostsView.jsx b/src/discussions/posts/PostsView.jsx
@@ -88,7 +88,7 @@ const PostsView = () => {
   }, [topicId, category]);
 
   return (
-    <div className="discussion-posts d-flex flex-column h-100">
+    <div className="discussion-posts d-flex flex-column h-100 ">
       {searchString && (
         <SearchInfo
           count={resultsFound}
diff --git a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
@@ -55,8 +55,8 @@ const PostActionsBar = () => {
           <Button
             variant={enableInContextSidebar ? 'plain' : 'brand'}
             className={classNames(
-              'my-0 font-style border-0 line-height-24',
-              { 'px-3 py-10px border-0': enableInContextSidebar },
+              'my-0 font-style border-0 line-height-24 purple-bg',
+              { 'px-3 py-10px border-0 transparent-bg': enableInContextSidebar },
             )}
             onClick={handleAddPost}
             size={enableInContextSidebar ? 'md' : 'sm'}
diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -412,7 +412,7 @@ const PostEditor = ({
           <FormikErrorFeedback name="comment" />
         </div>
         <PostPreviewPanel htmlNode={values.comment} isPost editExisting={editExisting} />
-        <div className="d-flex flex-row mt-n4 w-75 text-primary font-style">
+        <div className="d-flex flex-row mt-n4 w-75 purple-color font-style">
           {!editExisting && (
           <>
             <Form.Group>
@@ -421,7 +421,7 @@ const PostEditor = ({
                 checked={values.follow}
                 onChange={handleChange}
                 onBlur={handleBlur}
-                className="mr-4.5"
+                className="mr-4.5 checkBoxWrap"
               >
                 <span className="font-size-14">
                   {intl.formatMessage(messages.followPost)}
@@ -445,7 +445,7 @@ const PostEditor = ({
           </>
           )}
         </div>
-        <div className="d-flex justify-content-end">
+        <div className="d-flex justify-content-end ">
           <Button
             variant="outline-primary"
             onClick={() => hideEditor(resetForm)}
@@ -458,7 +458,7 @@ const PostEditor = ({
               pending: intl.formatMessage(messages.submitting),
             }}
             state={submitting ? 'pending' : 'default'}
-            className="ml-2"
+            className="ml-2 purple-bg"
             variant="primary"
             onClick={handleSubmit}
           />
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -184,7 +184,7 @@ const PostFilterBar = () => {
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
-        <span className="text-primary-500 pr-4 font-style">
+        <span className="dark-black-color pr-4 font-style">
           {intl.formatMessage(messages.sortFilterStatus, {
             own: false,
             type: currentFilters.postType,
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
@@ -183,7 +183,7 @@ const Post = ({ handleAddResponseButton }) => {
         postType={postType}
         title={title}
       />
-      <div className="d-flex mt-14px text-break font-style text-primary-500">
+      <div className="d-flex mt-14px text-break font-style dark-black-color">
         <HTMLLoader htmlNode={renderedBody} componentId="post" cssClassName="html-loader w-100" testId={postId} />
       </div>
       {(topicContext || topic) && (
@@ -198,6 +198,7 @@ const Post = ({ handleAddResponseButton }) => {
             {intl.formatMessage(messages.relatedTo)}{' '}
           </span>
           <Hyperlink
+          className='color-allports'
             target="_top"
             destination={topicContext ? (
               topicContext.unitLink
diff --git a/src/discussions/posts/post/PostFooter.jsx b/src/discussions/posts/post/PostFooter.jsx
@@ -33,7 +33,7 @@ const PostFooter = ({
   }, [id, voted]);
 
   return (
-    <div className="d-flex align-items-center ml-n1.5 mt-10px" style={{ height: '32px' }} data-testid="post-footer">
+    <div className="d-flex align-items-center ml-1 mt-10px" style={{ height: '32px' }} data-testid="post-footer">
       {voteCount !== 0 && (
         <LikeButton
           count={voteCount}
@@ -57,7 +57,7 @@ const PostFooter = ({
               return true;
             }}
             iconAs={Icon}
-            iconClassNames="follow-icon-dimensions"
+            iconClassNames="follow-icon-dimensions dark-black-color"
             className="post-footer-icon-dimensions"
             alt="Follow"
           />
diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx
@@ -115,7 +115,7 @@ const PostHeader = ({
             </div>
           ) : (
             <h5
-              className="mb-0 font-style text-primary-500"
+              className="mb-0 font-style dark-black-color"
               style={{ lineHeight: '21px' }}
               aria-level="1"
               tabIndex="-1"
diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
@@ -59,7 +59,7 @@ const PostLink = ({
   return (
     <Link
       className={
-          classNames('discussion-post p-0 text-decoration-none text-gray-900', {
+          classNames('discussion-post p-0 text-decoration-none dark-black-color', {
             'border-bottom border-light-400': showDivider,
           })
         }
@@ -71,8 +71,8 @@ const PostLink = ({
       <div
         className={
             classNames(
-              'd-flex flex-row pt-2 pb-2 px-4 border-primary-500 position-relative',
-              { 'bg-light-300': isPostRead },
+              'd-flex flex-row pt-2 pb-2 px-4 border-purple-color position-relative',
+              // { 'bg-light-300': isPostRead },
               { 'post-summary-card-selected': id === selectedPostId },
             )
           }
@@ -89,13 +89,13 @@ const PostLink = ({
             <div className="d-flex align-items-center pb-0 mb-0 flex-fill">
               <div className="text-truncate mr-1">
                 <span className={classNames(
-                  'font-weight-500 font-size-14 text-primary-500 font-style align-bottom mr-1',
+                  'font-weight-bolder font-size-14 dark-black-color font-style align-bottom mr-1',
                   { 'font-weight-bolder': !read },
                 )}
                 >
                   {title}
                 </span>
-                <span className="text-gray-700 font-weight-normal font-size-14 font-style align-bottom">
+                <span className="dark-black-color font-weight-normal font-size-14 font-style align-bottom">
                   {isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
                 </span>
               </div>
diff --git a/src/index.scss b/src/index.scss

Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ const FilterBar = ({`
`104`	`104`	`className="filter-bar collapsible-card-lg border-0"`
`105`	`105`	`>`
`106`	`106`	`<Collapsible.Trigger className="collapsible-trigger border-0">`
`107`		`- <span className="text-primary-700 pr-4">`
	`107`	`+ <span className="pr-4 dark-black-color">`
`108`	`108`	`{intl.formatMessage(messages.sortFilterStatus, {`
`109`	`109`	`own: false,`
`110`	`110`	`type: selectedFilters.postType,`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ const PostPreviewPanel = ({`
`49`	`49`	`variant="link"`
`50`	`50`	`size="sm"`
`51`	`51`	`onClick={() => setShowPreviewPane(true)}`
`52`		- className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
	`52`	+ className={`dark-black-color font-style p-0 ${editExisting && 'mb-4.5'}`}
`53`	`53`	`style={{ lineHeight: '26px' }}`
`54`	`54`	`data-testid="show-preview-button"`
`55`	`55`	`>`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const ArchivedBaseGroup = ({`
`34`	`34`	`className="discussion-topic-group d-flex flex-column text-primary-500"`
`35`	`35`	`data-testid="archived-group"`
`36`	`36`	`>`
`37`		`- <div className="pt-3 px-4 font-weight-bold">{intl.formatMessage(messages.archivedTopics)}</div>`
	`37`	`+ <div className="pt-3 px-4 font-weight-bold dark-black-color">{intl.formatMessage(messages.archivedTopics)}</div>`
`38`	`38`	`{renderArchivedTopics}`
`39`	`39`	`</div>`
`40`	`40`	`</>`
Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ const SectionBaseGroup = ({`
`65`	`65`	`data-section-id={sectionId}`
`66`	`66`	`data-testid="section-group"`
`67`	`67`	`>`
`68`		`- <div className="pt-3 px-4 font-weight-bold">`
	`68`	`+ <div className="pt-3 px-4 font-weight-bold dark-black-color">`
`69`	`69`	`{sectionTitle \|\| intl.formatMessage(messages.unnamedSection)}`
`70`	`70`	`</div>`
`71`	`71`	`{renderSection}`