diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js index f34c0c79..df5accf7 100644 --- a/src/tags/TagsList.js +++ b/src/tags/TagsList.js @@ -2,10 +2,13 @@ import React from 'react'; import { connect } from 'react-redux'; import { pick, splitEvery } from 'ramda'; import { listTags } from './reducers/tagsList'; -import './TagsList.scss'; -import { Card } from 'reactstrap'; +import { Card, CardBody } from 'reactstrap'; import ColorGenerator from '../utils/ColorGenerator'; import MuttedMessage from '../utils/MuttedMessage'; +import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt'; +import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; +import './TagsList.scss'; const { round } = Math; @@ -36,15 +39,23 @@ export class TagsList extends React.Component { {tagsGroups.map((group, index) => (
{group.map(tag => ( -
- -
{tag}
-
-
+ + + + +
+
+ {tag} +
+
+
))}
))} diff --git a/src/tags/TagsList.scss b/src/tags/TagsList.scss index 7765c0d7..f06e5a61 100644 --- a/src/tags/TagsList.scss +++ b/src/tags/TagsList.scss @@ -1,18 +1,33 @@ -.tags-list__tag-container { - border-radius: .26rem; -} - .tags-list__tag-card.tags-list__tag-card { - padding: .75rem 2.5rem 0.75rem 1rem; background-color: #eeeeee; margin-bottom: .5rem; - transition: background-color 200ms, color 200ms; } -.tags-list__tag-card.tags-list__tag-card:hover { - background-color: transparent; - color: #fff; +.tags-list__tag-card-body.tags-list__tag-card-body { + padding: .75rem; } .tags-list__tag-title { margin: 0; + line-height: 31px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; +} + +.tags-list__tag-bullet { + $width: 20px; + border-radius: 50%; + width: $width; + height: $width; + display: inline-block; + vertical-align: -4px; + margin-right: 7px; +} + +.tags-list__btn { + float: right; +} +.tags-list__btn:not(:last-child) { + margin-left: 2px; }