feat: update styling

Author: MubeenFayyaz-Arbisoft

src/components/PostPreviewPanel.jsx

@@ -49,7 +49,7 @@ const PostPreviewPanel = ({
             variant="link"
             size="sm"
             onClick={() => setShowPreviewPane(true)}
-            className={`dark-black-color font-style p-0 ${editExisting && 'mb-4.5'}`}
+            className={`font-style p-0 ${editExisting && 'mb-4.5'}`}
             style={{ lineHeight: '26px' }}
             data-testid="show-preview-button"
           >

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 purple-color"
+                    line-height-24 font-size-14"
              onClick={handleAddResponse}
              data-testid="add-response"
            >

src/discussions/post-comments/comments/comment/CommentEditor.jsx

@@ -177,7 +177,7 @@ const CommentEditor = ({
                 default: intl.formatMessage(messages.submit),
                 pending: intl.formatMessage(messages.submitting),
               }}
-              className="ml-2 purple-bg border-purple-color"
+              className="ml-2"
               variant="primary"
               onClick={handleSubmit}
             />

src/discussions/posts/post-editor/PostEditor.jsx

@@ -50,6 +50,9 @@ import { createNewThread, fetchThread, updateExistingThread } from '../data/thun
 import messages from './messages';
 import PostTypeCard from './PostTypeCard';
 
+import QuestionMarkIcon from './question-mark-icon.svg';
+import DiscussionIcon from '../post/chat-icon.svg';
+
 const PostEditor = ({
   editExisting,
 }) => {
@@ -258,13 +261,13 @@ const PostEditor = ({
             value="discussion"
             selected={values.postType === 'discussion'}
             type={intl.formatMessage(messages.discussionType)}
-            icon={<Post />}
+            icon={<img src={DiscussionIcon} aria-hidden="true" />}
           />
           <PostTypeCard
             value="question"
             selected={values.postType === 'question'}
             type={intl.formatMessage(messages.questionType)}
-            icon={<Help />}
+            icon={<img src={QuestionMarkIcon} aria-hidden="true" /> }
           />
         </Form.RadioSet>
         <div className="d-flex flex-row my-4.5 justify-content-between">
@@ -412,7 +415,7 @@ const PostEditor = ({
           <FormikErrorFeedback name="comment" />
         </div>
         <PostPreviewPanel htmlNode={values.comment} isPost editExisting={editExisting} />
-        <div className="d-flex flex-row mt-n4 w-75 purple-color font-style">
+        <div className="d-flex flex-row mt-n4 w-75 font-style">
           {!editExisting && (
           <>
             <Form.Group>
@@ -458,7 +461,7 @@ const PostEditor = ({
               pending: intl.formatMessage(messages.submitting),
             }}
             state={submitting ? 'pending' : 'default'}
-            className="ml-2 purple-bg"
+            className="ml-2 submitButton"
             variant="primary"
             onClick={handleSubmit}
           />

src/discussions/posts/post-editor/question-mark-icon.svg

@@ -71,7 +71,7 @@ const PostLink = ({
       <div
         className={
             classNames(
-              'd-flex flex-row pt-2 pb-2 px-4 border-purple-color position-relative',
+              'd-flex flex-row pt-2 pb-2 px-4 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-bolder font-size-14 dark-black-color font-style align-bottom mr-1',
+                  'font-weight-bolder font-size-14  font-style align-bottom mr-1',
                   { 'font-weight-bolder': !read },
                 )}
                 >
                   {title}
                 </span>
-                <span className="dark-black-color font-weight-normal font-size-14 font-style align-bottom">
+                <span className="font-weight-normal font-size-14 font-style align-bottom">
                   {isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
                 </span>
               </div>

src/discussions/posts/post/PostLink.jsx

@@ -21,21 +21,6 @@ $fa-font-path: "~font-awesome/fonts";
   }
 }
 
-.purple-color {
-  color: #4600c7 !important;
-}
-.border-purple-color {
-  border-color: #4600c7;
-}
-.purple-bg {
-  background-color: #4600c7 !important;
-}
-.dark-black-color {
-  color: #111827 !important;
-}
-.bg-light-grey {
-  background-color: #f3f3f3;
-}
 .bla .text-staff-color {
   color: $warning-700;
 }