Improve style pt. 1

app/javascript/components/Board/NewPost.tsx

@@ -142,8 +142,8 @@ class NewPost extends React.Component<Props, State> {
 
     return (
       <div className="newBoardContainer sidebarBox">
-        <TitleText>{board.name}</TitleText>
-        <MutedText>{board.description}</MutedText>
+        <span className="boardTitle">{board.name}</span>
+        <p><MutedText>{board.description}</MutedText></p>
         {
           isLoggedIn ?
             <Button

app/javascript/components/Board/PostList.tsx

@@ -6,7 +6,7 @@ import PostListItem from './PostListItem';
 import Spinner from '../shared/Spinner';
 import {
   DangerText,
-  MutedText,
+  CenteredMutedText,
 } from '../shared/CustomTexts';
 
 import IPost from '../../interfaces/IPost';
@@ -55,10 +55,7 @@ const PostList = ({
             />
           ))
         :
-          areLoading ?
-            <MutedText>Loading...</MutedText>
-          :
-            <MutedText>There are no posts.</MutedText>
+          areLoading ? <p></p> : <CenteredMutedText>There are no posts.</CenteredMutedText>
       }
     </InfiniteScroll>
   </div>

app/javascript/components/Board/PostListItem.tsx

@@ -16,7 +16,7 @@ interface Props {
 const PostListItem = ({ id, title, description, postStatus}: Props) => (
   <a href={`/posts/${id}`} className="postLink">
     <div className="postListItem">
-      <TitleText>{title}</TitleText>
+      <span className="postTitle">{title}</span>
       <DescriptionText limit={120}>{description}</DescriptionText>
 
       <div className="postDetails">

app/javascript/components/Roadmap/PostList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import PostListItem from './PostListItem';
-import { MutedText } from '../shared/CustomTexts';
+import { CenteredMutedText } from '../shared/CustomTexts';
 
 import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';
@@ -25,7 +25,7 @@ const PostList = ({ posts, boards }: Props) => (
           />
         ))
       :
-        <MutedText>There are no posts that have this status.</MutedText>
+        <CenteredMutedText>There are no posts that have this status.</CenteredMutedText>
     }
   </div>
 );

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -14,10 +14,9 @@ interface Props {
 }
 
 const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => (
-  <div className="roadmapColumn" style={{borderColor: postStatus.color}}>
+  <div className="roadmapColumn">
     <div className="columnHeader"
-      style={{borderBottomColor: postStatus.color}}>
-      <div className="dot" style={{backgroundColor: postStatus.color}}></div>
+      style={{backgroundColor: postStatus.color}}>
       <div className="columnTitle"><TitleText>{postStatus.name}</TitleText></div>
     </div>
     <div className="scrollContainer">

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;