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}

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>
+);

app/javascript/stylesheets/components/Board.scss

@@ -1,5 +1,5 @@
-@media (max-width: 800px) {
-  .boardContainer {
+.boardContainer {
+  @media (max-width: 800px) {
     flex-direction: column;
 
     .sidebar {
@@ -7,126 +7,50 @@
       width: 100%;
       top: 0;
 
-      .sidebar-box {
+      .sidebarBox {
         width: 100%;
       }
     }
-
-    .box {
-      width: 100%;
   }
-  }
-}
 
-@media (min-width: 801px) {
-  .boardContainer {
+  @media (min-width: 801px) {
     flex-direction: row;
 
     .sidebar {
       position: sticky;
       top: 20px;
 
-      .sidebar-box {
+      .sidebarBox {
         width: 250px;
       }
     }
   }
-}
 
-.boardContainer {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  
-  .sidebar {
-    .sidebar-box {
+  .sidebarBox {
     flex: 0 0 auto;
 
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    }
-  }
 
-  .box {
-    border: 1px solid black;
+    border: thin solid black;
     border-radius: 4px;
 
-    padding: 8px;
     margin: 8px;
-
-    .smallTitle {
-      font-size: 19px;
-      font-weight: 600;
-    }
-  }
-
-  .newBoardContainer {
-    .boardName {
-      font-size: 24px;
-      font-weight: 600;
-      
-      text-align: center;
-    }
-    
-    .boardDescription {
-      color: grey;
-      font-size: 17px;
-      font-weight: 200;
-    
-      text-align: center;
-    
-      margin-bottom: 8px;
-    }
-    
-    .submitBtn {
-      margin-bottom: 8px;
-    }
-    
-    .success {
-      color: green;
-      text-align: center;
-    }
-    
-    .error {
-      color: red;
-      text-align: center;
-    }
-  }
-
-  .postStatusFilterContainer {
-    .postStatusListItemContainer {
-      display: flex;
-
-      flex: 1 1 auto;
-      align-self: stretch;
-    }
-
-    .postStatusListItemLink {
-      flex: 1 1 auto;
+    padding: 8px;
   }
 
   .postStatusListItem {
     height: 40px;
 
-      display: flex;
-      align-items: center;
-
-      font-size: 17px;
-      font-weight: 500;
-
-      padding: 4px;
-    }
-
-    .postStatusListItem:hover {
+    &:hover {
       cursor: pointer;
 
       background-color: #f5f5f5;
       border-radius: 4px;
     }
+  }
 
   .resetFilter {
     flex: 0 0 auto;
@@ -137,19 +61,12 @@
 
     align-self: center;
   }
-  }
-  
-  .postList {
-    display: flex;
-    flex-direction: column;
-    
-    flex: 1 1 auto;
 
   .postLink {
     display: block;
-      text-decoration: none;
     border-radius: 4px;
     margin: 8px 0;
+    color: black;
   }
   
   .postLink:hover {
@@ -158,49 +75,6 @@
   }
 
   .postListItem {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    
     height: 114px;
-      margin: 0;
-      padding: 8px 4px;
-      
-      .postTitle {
-        color: black;
-        font-weight: 500;
-        font-size: 17px;
-      }
-      
-      .postDescription {
-        color: grey;
-        font-weight: 400;
-        font-size: 15px;
-      }
-      
-      .postDetails {
-        display: flex;
-      
-        color: black;
-        font-size: 16px;
-        font-weight: 300;
-        text-transform: uppercase;
-        
-        .postDetailsComments {
-          margin-right: 16px;
-        }
-        
-        .postDetailsStatus {
-          display: flex;
-        }
-  
-      }
-    }
   }
 }
-
-.infoText {
-  display: block;
-  text-align: center;
-  font-style: italic;
-}

app/javascript/stylesheets/components/Roadmap.scss

@@ -1,10 +1,4 @@
 .roadmapColumns {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-
   @media (max-width: 800px) {
     .roadmapColumn {
       width: 100%;
@@ -17,69 +11,12 @@
     }
   }
 
-  .roadmapColumn {
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 4px;
-  
-    margin: 8px 0;
-    padding: 8px;
-
-    .columnHeader {
-      display: flex;
-      align-items: center;
-    
-      padding-bottom: 4px;
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      margin-bottom: 8px;
-    }
-
-    .infoText {
-      text-align: center;
-      font-style: italic;
-    }
-    
-    .columnTitle {
-      font-weight: 700;
-    }
-    
   .scrollContainer {
     overflow-y: auto;
     max-height: 350px;
-
-      .postList {
-        display: flex;
-        flex-direction: column;
-
-        .postLink {
-          text-decoration: none;
-          border-radius: 4px;
   }
 
   .postLink:hover {
     text-decoration: none;
-          background-color: #f5f5f5;
-        }
-        
-        .postListItem {
-          margin: 4px 0;
-          padding: 8px 4px;
-        }
-        
-        .postTitle {
-          color: black;
-          font-weight: 500;
-          font-size: 17px;
-        }
-        
-        .postBoard {
-          color: grey;
-          font-weight: 400;
-          font-size: 14px;
-          text-transform: uppercase;
-        }
-      }
-    }
   }
 }

spec/system/board_spec.rb

@@ -115,7 +115,7 @@ feature 'board', type: :system, js: true do
       fill_in 'Description (optional)', with: post_description
       click_button 'Submit feedback' # submit
 
-      expect(page).to have_selector('.success')
+      expect(page).to have_selector('.text-success')
     end
 
     visit board_path(board)
@@ -161,7 +161,7 @@ feature 'board', type: :system, js: true do
     expect(page).to have_content(/#{post3.title}/i)
 
     within sidebar do
-      fill_in 'Search:', with: post1.title
+      find('#searchPostInput').set post1.title
     end
 
     expect(page).to have_content(/#{post1.title}/i)
@@ -169,7 +169,7 @@ feature 'board', type: :system, js: true do
     expect(page).to have_no_content(/#{post3.title}/i)
 
     within sidebar do
-      fill_in 'Search:', with: post2.description
+      find('#searchPostInput').set post2.description
     end
 
     expect(page).to have_no_content(/#{post1.description}/i)