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

This commit is contained in:
riggraz
2019-09-15 18:26:51 +02:00
parent e92aa9842c
commit a964b3627f
16 changed files with 163 additions and 281 deletions

View File

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

View File

@@ -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}

View File

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

View File

@@ -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;