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