Refactor CSS pt. 1 (remove custom css in favour of Bootstrap's)

app/javascript/components/Board/BoardP.tsx

@@ -74,7 +74,7 @@ class BoardP extends React.Component<Props> {
     const { filters } = posts;
 
     return (
-      <div className="boardContainer">
+      <div className="boardContainer d-flex justify-content-between align-items-start">
         <div className="sidebar">
           <NewPost
             board={board}

app/javascript/components/Board/NewPost.tsx

@@ -2,6 +2,12 @@ import * as React from 'react';
 
 import NewPostForm from './NewPostForm';
 import Spinner from '../shared/Spinner';
+import {
+  TitleText,
+  MutedText,
+  DangerText,
+  SuccessText,
+} from '../shared/CustomTexts';
 
 import IBoard from '../../interfaces/IBoard';
 
@@ -134,14 +140,14 @@ class NewPost extends React.Component<Props, State> {
     } = this.state;
 
     return (
-      <div className="box sidebar-box newBoardContainer">
-        <span className="boardName">{board.name}</span>
-        <span className="boardDescription">{board.description}</span>
+      <div className="newBoardContainer sidebarBox">
+        <TitleText>{board.name}</TitleText>
+        <MutedText>{board.description}</MutedText>
         {
           isLoggedIn ?
             <button
               onClick={this.toggleForm}
-              className={`submitBtn btn btn-${showForm ? 'outline-' : ''}dark`}>
+              className={`submitBtn btn btn-${showForm ? 'outline-' : ''}dark my-2`}>
               { showForm ? 'Cancel' : 'Submit feedback' }
             </button>
           :
@@ -164,8 +170,8 @@ class NewPost extends React.Component<Props, State> {
         }
 
         { isLoading ? <Spinner /> : null }
-        { error ? <span className="error">{error}</span> : null }
-        { success ? <span className="success">{success}</span> : null }
+        { error ? <DangerText>{error}</DangerText> : null }
+        { success ? <SuccessText>{success}</SuccessText> : null }
       </div>
     );
   }

app/javascript/components/Board/PostList.tsx

@@ -4,6 +4,10 @@ import InfiniteScroll from 'react-infinite-scroller';
 
 import PostListItem from './PostListItem';
 import Spinner from '../shared/Spinner';
+import {
+  DangerText,
+  MutedText,
+} from '../shared/CustomTexts';
 
 import IPost from '../../interfaces/IPost';
 import IPostStatus from '../../interfaces/IPostStatus';
@@ -28,8 +32,8 @@ const PostList = ({
   page,
   hasMore
 }: Props) => (
-  <div className="box postList">
-    { error ? <span className="error">{error}</span> : null }
+  <div className="postList d-flex flex-column flex-grow-1">
+    { error ? <DangerText>{error}</DangerText> : null }
     <InfiniteScroll
       initialLoad={false}
       loadMore={handleLoadMore}
@@ -52,9 +56,9 @@ const PostList = ({
           ))
         :
           areLoading ?
-            <span className="infoText">Loading...</span>
+            <MutedText>Loading...</MutedText>
           :
-            <span className="infoText text-muted">There are no posts.</span>
+            <MutedText>There are no posts.</MutedText>
       }
     </InfiniteScroll>
   </div>

app/javascript/components/Board/PostListItem.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
+import CommentsNumber from '../shared/CommentsNumber';
 import PostStatusLabel from '../shared/PostStatusLabel';
+import { TitleText, DescriptionText } from '../shared/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 
@@ -13,21 +15,12 @@ interface Props {
 
 const PostListItem = ({ id, title, description, postStatus}: Props) => (
   <a href={`/posts/${id}`} className="postLink">
-    <div className="postListItem">
-      <div className="postTitle">{title}</div>
-      <div className="postDescription">
-        {
-          description && description.length > 120  ?
-            description.slice(0, 119) + '...'
-          :
-            description || '<No description provided.>'
-        }
-      </div>
-      <div className="postDetails">
-        <div className="postDetailsComments">
-          <span className="comment icon"></span>
-          <span>0 comments</span>
-        </div>
+    <div className="postListItem d-flex flex-column justify-content-between m-0 px-2 py-1">
+      <TitleText>{title}</TitleText>
+      <DescriptionText limit={120}>{description}</DescriptionText>
+
+      <div className="postDetails d-flex justify-content-between text-uppercase">
+        <CommentsNumber number={0} />
         { postStatus ? <PostStatusLabel {...postStatus} /> : null }
       </div>
     </div>

app/javascript/components/Board/PostStatusFilter.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import PostStatusListItem from './PostStatusListItem';
 import Spinner from '../shared/Spinner';
+import { TitleText, DangerText } from '../shared/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 
@@ -22,8 +23,8 @@ const PostStatusFilter = ({
   handleFilterClick,
   currentFilter,
 }: Props) => (
-  <div className="box sidebar-box postStatusFilterContainer">
-    <span className="smallTitle">Filter by post status:</span>
+  <div className="postStatusFilterContainer sidebarBox">
+    <TitleText>Filter by post status:</TitleText>
     {
       postStatuses.map((postStatus, i) => (
         <PostStatusListItem
@@ -39,7 +40,7 @@ const PostStatusFilter = ({
       ))
     }
     { areLoading ? <Spinner /> : null }
-    { error ? <span className="error">{error}</span> : null }
+    { error ? <DangerText>{error}</DangerText> : null }
   </div>
 );
 

app/javascript/components/Board/PostStatusListItem.tsx

@@ -18,15 +18,20 @@ const PostStatusListItem = ({
   isCurrentFilter,
   handleResetFilter,
 }: Props) => (
-  <div className={"postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')}`}>
-    <a onClick={handleClick} className="postStatusListItemLink">
-      <div className="postStatusListItem">
+  <div className={
+    "postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')} d-flex align-self-stretch`
+  }>
+    <a onClick={handleClick} className="postStatusListItemLink flex-grow-1">
+      <div className="postStatusListItem p-1">
         <PostStatusLabel id={undefined} name={name} color={color} />
       </div>
     </a>
     {
       isCurrentFilter ?
-        <button onClick={handleResetFilter} className="btn btn-outline-dark resetFilter">X</button> : null
+        <button onClick={handleResetFilter}
+        className="resetFilter btn btn-outline-dark">X</button>
+      :
+        null
     }
   </div>
 );

app/javascript/components/Board/SearchFilter.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 
+import { TitleText } from '../shared/CustomTexts';
+
 interface Props {
   searchQuery: string;
   handleChange(newSearchQuery: string): void;
 }
 
 const SearchFilter = ({ searchQuery, handleChange }: Props) => (
-  <div className="box sidebar-box">
-    <label htmlFor="searchPostInput" className="smallTitle">Search:</label>
+  <div className="sidebarBox">
+    <TitleText>Search:</TitleText>
     <input
       type="search"
       onChange={e => handleChange(e.target.value)}

app/javascript/components/Roadmap/PostList.tsx

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

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import PostList from './PostList';
+import { TitleText } from '../shared/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 import IPostJSON from '../../interfaces/json/IPost';
@@ -13,12 +14,13 @@ interface Props {
 }
 
 const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => (
-  <div className="roadmapColumn" style={{borderColor: postStatus.color}}>
-    <div className="columnHeader" style={{borderBottomColor: postStatus.color}}>
+  <div className="roadmapColumn card my-2 px-2" style={{borderColor: postStatus.color}}>
+    <div className="columnHeader card-header d-flex bg-transparent"
+      style={{borderBottomColor: postStatus.color}}>
       <div className="dot" style={{backgroundColor: postStatus.color}}></div>
-      <div className="columnTitle">{postStatus.name}</div>
+      <div className="columnTitle"><TitleText>{postStatus.name}</TitleText></div>
     </div>
-    <div className="scrollContainer">
+    <div className="scrollContainer card-body">
       <PostList
         posts={posts}
         boards={boards}

app/javascript/components/Roadmap/PostListItem.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { TitleText, UppercaseText } from '../shared/CustomTexts';
+
 interface Props {
   id: number;
   title: string;
@@ -8,9 +10,9 @@ interface Props {
 
 const PostListItem = ({id, title, boardName}: Props) => (
   <a href={`/posts/${id}`} className="postLink">
-    <div className="postListItem">
-      <div className="postTitle">{title}</div>
-      <div className="postBoard">{boardName}</div>
+    <div className="postListItem d-flex flex-column my-1 py-2">
+      <TitleText>{title}</TitleText>
+      <UppercaseText>{boardName}</UppercaseText>
     </div>
   </a>
 );

app/javascript/components/Roadmap/index.tsx

@@ -19,7 +19,7 @@ class Roadmap extends React.Component<Props> {
     const { postStatuses, posts, boards } = this.props;
 
     return (
-      <div className="roadmapColumns">
+      <div className="roadmapColumns d-flex justify-content-between flex-wrap">
         {postStatuses.map((postStatus, i) => (
           <PostListByPostStatus
             postStatus={postStatus}
@@ -34,4 +34,4 @@ class Roadmap extends React.Component<Props> {
   }
 }
 
-export default Roadmap;
+export default Roadmap;

app/javascript/components/shared/CommentsNumber.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface Props {
+  number: number;
+}
+
+const CommentsNumber = ({ number }: Props) => (
+  <div className="d-flex">
+    <span className="comment icon"></span>
+    <span>{`${number} comment${number === 1 ? '' : 's'}`}</span>
+  </div>
+);
+
+export default CommentsNumber;

app/javascript/components/shared/CustomTexts.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+interface Props {
+  children: string;
+}
+
+interface DescriptionTextProps {
+  children: string;
+  limit?: number;
+}
+
+export const TitleText = ({ children }: Props) => (
+  <span className="text-dark font-weight-bolder">{children}</span>
+);
+
+export const MutedText = ({ children }: Props) => (
+  <span className="text-muted text-center">{children}</span>
+);
+
+export const UppercaseText = ({ children }: Props) => (
+  <span className="text-secondary text-uppercase font-weight-lighter">{children}</span>
+);
+
+export const SuccessText = ({ children }: Props) => (
+  <span className="text-success text-center">{children}</span>
+);
+
+export const DangerText = ({ children }: Props) => (
+  <span className="text-danger text-center">{children}</span>
+);
+
+export const DescriptionText = ({ children, limit = 90}: DescriptionTextProps) => (
+  <span className="text-muted">
+    {
+      children && children.length > limit ?
+        children.slice(0, limit-1) + '...'
+      :
+        children || '<No description provided>'
+    }
+  </span>
+);