Improve style pt. 1

app/javascript/components/shared/Button.tsx

@@ -11,7 +11,7 @@ interface Props {
 const Button = ({ children, onClick, className = '', outline = false}: Props) => (
   <button
     onClick={onClick}
-    className={`${className} btn btn-${outline ? 'outline-' : ''}dark my-2`}
+    className={`${className} btn btn-${outline ? 'outline-' : ''}dark`}
   >
     {children}
   </button>

app/javascript/components/shared/CommentsNumber.tsx

@@ -5,10 +5,7 @@ interface Props {
 }
 
 const CommentsNumber = ({ number }: Props) => (
-  <div className="d-flex">
-    <span className="comment icon"></span>
-    <span>{`${number} comment${number === 1 ? '' : 's'}`}</span>
-  </div>
+  <span className="badge badgeLight">{`${number} comment${number === 1 ? '' : 's'}`}</span>
 );
 
 export default CommentsNumber;

app/javascript/components/shared/CustomTexts.tsx

@@ -17,6 +17,10 @@ export const MutedText = ({ children }: Props) => (
   <span className="mutedText">{children}</span>
 );
 
+export const CenteredMutedText = ({ children }: Props) => (
+  <p className="centeredText"><span className="mutedText">{children}</span></p>
+);
+
 export const UppercaseText = ({ children }: Props) => (
   <span className="uppercaseText">{children}</span>
 );

app/javascript/components/shared/PostStatusLabel.tsx

@@ -7,10 +7,7 @@ const PostStatusLabel = ({
   name,
   color,
 }: IPostStatus) => (
-  <div style={{display: 'flex'}}>
-    <div className="dot" style={{backgroundColor: color}}></div>
-    <span className="postStatusName">{name}</span>
-  </div>
+  <span className="badge" style={{backgroundColor: color, color: 'white'}}>{name}</span>
 );
 
 export default PostStatusLabel;