Refactor CSS pt. 3 (semantically @extend Bootstrap)

app/javascript/components/Board/BoardP.tsx

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

app/javascript/components/Board/NewPost.tsx

@@ -8,6 +8,7 @@ import {
   DangerText,
   SuccessText,
 } from '../shared/CustomTexts';
+import Button from '../shared/Button';
 
 import IBoard from '../../interfaces/IBoard';
 
@@ -145,11 +146,12 @@ class NewPost extends React.Component<Props, State> {
         <MutedText>{board.description}</MutedText>
         {
           isLoggedIn ?
-            <button
+            <Button
               onClick={this.toggleForm}
-              className={`submitBtn btn btn-${showForm ? 'outline-' : ''}dark my-2`}>
+              className="submitBtn"
+              outline={showForm}>
               { showForm ? 'Cancel' : 'Submit feedback' }
-            </button>
+            </Button>
           :
             <a href="/users/sign_in" className="btn btn-dark">
               Log in / Sign up

app/javascript/components/Board/NewPostForm.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import Button from '../shared/Button';
+
 interface Props {
   title: string;
   description: string;
@@ -41,11 +43,9 @@ const NewPostForm = ({
           id="postDescription"
         ></textarea>
       </div>
-      <button
-        onClick={e => handleSubmit(e)}
-        className="submitBtn btn btn-dark d-block mx-auto">
-          Submit feedback
-        </button>
+      <Button onClick={e => handleSubmit(e)} className="submitBtn d-block mx-auto">
+        Submit feedback
+      </Button>
     </form>
   </div>
 );

app/javascript/components/Board/PostList.tsx

@@ -32,7 +32,7 @@ const PostList = ({
   page,
   hasMore
 }: Props) => (
-  <div className="postList d-flex flex-column flex-grow-1">
+  <div className="postList">
     { error ? <DangerText>{error}</DangerText> : null }
     <InfiniteScroll
       initialLoad={false}

app/javascript/components/Board/PostListItem.tsx

@@ -15,11 +15,11 @@ interface Props {
 
 const PostListItem = ({ id, title, description, postStatus}: Props) => (
   <a href={`/posts/${id}`} className="postLink">
-    <div className="postListItem d-flex flex-column justify-content-between m-0 px-2 py-1">
+    <div className="postListItem">
       <TitleText>{title}</TitleText>
       <DescriptionText limit={120}>{description}</DescriptionText>
 
-      <div className="postDetails d-flex justify-content-between text-uppercase">
+      <div className="postDetails">
         <CommentsNumber number={0} />
         { postStatus ? <PostStatusLabel {...postStatus} /> : null }
       </div>

app/javascript/components/Board/PostStatusListItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import PostStatusLabel from '../shared/PostStatusLabel';
+import Button from '../shared/Button';
 
 interface Props {
   name: string;
@@ -19,17 +20,18 @@ const PostStatusListItem = ({
   handleResetFilter,
 }: Props) => (
   <div className={
-    "postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')} d-flex align-self-stretch`
+    "postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')}`
   }>
-    <a onClick={handleClick} className="postStatusListItemLink flex-grow-1">
-      <div className="postStatusListItem p-1">
+    <a onClick={handleClick} className="postStatusListItemLink">
+      <div className="postStatusListItem">
         <PostStatusLabel id={undefined} name={name} color={color} />
       </div>
     </a>
     {
       isCurrentFilter ?
-        <button onClick={handleResetFilter}
-        className="resetFilter btn btn-outline-dark">X</button>
+        <Button onClick={handleResetFilter} className="resetFilter" outline>
+          X
+        </Button>
       :
         null
     }

app/javascript/components/Board/index.tsx

@@ -4,8 +4,6 @@ import { Provider } from 'react-redux';
 import Board from '../../containers/Board';
 import createStoreHelper from '../../helpers/createStore';
 
-import '../../stylesheets/components/Board.scss';
-
 import IBoard from '../../interfaces/IBoard';
 
 interface Props {

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -14,13 +14,13 @@ interface Props {
 }
 
 const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => (
-  <div className="roadmapColumn card my-2 px-2" style={{borderColor: postStatus.color}}>
-    <div className="columnHeader card-header d-flex bg-transparent"
+  <div className="roadmapColumn" style={{borderColor: postStatus.color}}>
+    <div className="columnHeader"
       style={{borderBottomColor: postStatus.color}}>
       <div className="dot" style={{backgroundColor: postStatus.color}}></div>
       <div className="columnTitle"><TitleText>{postStatus.name}</TitleText></div>
     </div>
-    <div className="scrollContainer card-body">
+    <div className="scrollContainer">
       <PostList
         posts={posts}
         boards={boards}

app/javascript/components/Roadmap/PostListItem.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 const PostListItem = ({id, title, boardName}: Props) => (
   <a href={`/posts/${id}`} className="postLink">
-    <div className="postListItem d-flex flex-column my-1 py-2">
+    <div className="postListItem">
       <TitleText>{title}</TitleText>
       <UppercaseText>{boardName}</UppercaseText>
     </div>

app/javascript/components/Roadmap/index.tsx

@@ -6,8 +6,6 @@ import IPostStatus from '../../interfaces/IPostStatus';
 import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';
 
-import '../../stylesheets/components/Roadmap.scss';
-
 interface Props {
   postStatuses: Array<IPostStatus>;
   posts: Array<IPostJSON>;
@@ -19,7 +17,7 @@ class Roadmap extends React.Component<Props> {
     const { postStatuses, posts, boards } = this.props;
 
     return (
-      <div className="roadmapColumns d-flex justify-content-between flex-wrap">
+      <div className="roadmapColumns">
         {postStatuses.map((postStatus, i) => (
           <PostListByPostStatus
             postStatus={postStatus}

app/javascript/components/shared/Button.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { FormEvent } from 'react';
+
+interface Props {
+  children: string;
+  onClick(e: FormEvent): void;
+  className?: string;
+  outline?: boolean;
+}
+
+const Button = ({ children, onClick, className = '', outline = false}: Props) => (
+  <button
+    onClick={onClick}
+    className={`${className} btn btn-${outline ? 'outline-' : ''}dark my-2`}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

app/javascript/components/shared/CustomTexts.tsx

@@ -10,27 +10,27 @@ interface DescriptionTextProps {
 }
 
 export const TitleText = ({ children }: Props) => (
-  <span className="text-dark font-weight-bolder">{children}</span>
+  <span className="titleText">{children}</span>
 );
 
 export const MutedText = ({ children }: Props) => (
-  <span className="text-muted text-center">{children}</span>
+  <span className="mutedText">{children}</span>
 );
 
 export const UppercaseText = ({ children }: Props) => (
-  <span className="text-secondary text-uppercase font-weight-lighter">{children}</span>
+  <span className="uppercaseText">{children}</span>
 );
 
 export const SuccessText = ({ children }: Props) => (
-  <span className="text-success text-center">{children}</span>
+  <span className="successText">{children}</span>
 );
 
 export const DangerText = ({ children }: Props) => (
-  <span className="text-danger text-center">{children}</span>
+  <span className="dangerText">{children}</span>
 );
 
 export const DescriptionText = ({ children, limit = 90}: DescriptionTextProps) => (
-  <span className="text-muted">
+  <span className="descriptionText">
     {
       children && children.length > limit ?
         children.slice(0, limit-1) + '...'