From f1ee467af4e348e3eebb4c9b22eb8420714ab76f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Aug 2018 11:15:00 +0200
Subject: [PATCH] Finished design on tags list page

---
 src/tags/TagsList.js   | 33 ++++++++++++++++++++++-----------
 src/tags/TagsList.scss | 33 ++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 20 deletions(-)

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) => (
           <div key={index} className="col-md-6 col-xl-3">
             {group.map(tag => (
-              <div
-                style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-                className="tags-list__tag-container"
-                key={tag}
-              >
-                <Card body className="tags-list__tag-card">
-                  <h5 className="tags-list__tag-title">{tag}</h5>
-                </Card>
-              </div>
+              <Card className="tags-list__tag-card" key={tag}>
+                <CardBody className="tags-list__tag-card-body">
+                  <button className="btn btn-light btn-sm tags-list__btn">
+                    <FontAwesomeIcon icon={deleteIcon} />
+                  </button>
+                  <button className="btn btn-light btn-sm tags-list__btn">
+                    <FontAwesomeIcon icon={editIcon} />
+                  </button>
+                  <h5 className="tags-list__tag-title">
+                    <div
+                      style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+                      className="tags-list__tag-bullet"
+                    />
+                    {tag}
+                  </h5>
+                </CardBody>
+              </Card>
             ))}
           </div>
         ))}
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;
 }