fix: fixed sidebar inconsistent font size (#716)

Author: ayesha-waris

src/discussions/common/HoverCard.jsx

@@ -45,7 +45,7 @@ const HoverCard = ({
           <Button
             variant="tertiary"
             className={classNames(
-              'px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
+              'px-2.5 py-2 border-0 font-style text-gray-700',
               { 'w-100': enableInContextSidebar },
             )}
             onClick={() => handleResponseCommentButton()}

src/discussions/posts/post/Post.jsx

@@ -188,10 +188,7 @@ const Post = ({ handleAddResponseButton }) => {
       </div>
       {(topicContext || topic) && (
         <div
-          className={classNames(
-            'mt-14px font-style font-size-12',
-            { 'w-100': enableInContextSidebar, 'mb-1': !displayPostFooter },
-          )}
+          className={classNames('mt-14px font-style', { 'w-100': enableInContextSidebar, 'mb-1': !displayPostFooter })}
           style={{ lineHeight: '20px' }}
         >
           <span className="text-gray-500" style={{ lineHeight: '20px' }}>

src/discussions/posts/post/PostSummaryFooter.jsx

@@ -68,7 +68,7 @@ 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">
           <OverlayTrigger
             overlay={(
               <Tooltip id={`follow-${postId}-tooltip`}>

src/index.scss

@@ -60,11 +60,6 @@ body,
   outline: $light-400 solid 2px;
 }
 
-
-.font-size-12 {
-  font-size: 12px !important;
-}
-
 .font-size-8 {
   font-size: 8px !important;
 }
@@ -630,7 +625,7 @@ th, td {
   }
 
   .post-form h4,
-  .btn-md {
+  .discussion-posts .btn-md {
     font-size: 12px !important;
   }
 }
@@ -656,28 +651,28 @@ th, td {
   }
 
   .post-form h4,
-  .btn-md {
+  .discussion-posts .btn-md {
     font-size: 14px !important;
   }
 }
 
-@media only screen and (min-device-width: 769px) {
+@media only screen and (min-width: 769px) {
 
   body,
   #main {
     font-size: 14px;
   }
 }
 
-@media only screen and (max-device-width: 768px) {
+@media only screen and (max-width: 768px) {
 
   body,
   #main {
     font-size: 12px;
   }
 }
 
-@media only screen and (max-device-width: 366px) {
+@media only screen and (max-width: 366px) {
 
   body,
   #main {