using font awesome icon to render color dot (#1656)

assets/sass/datatable-extensions.scss

@@ -7,16 +7,15 @@
 
 span.label-color,
 span.label-meta,
+span.label-tag,
 span.label-activity,
 span.label-project,
 span.label-customer {
     display: inline-block;
     .dot {
-        height: 10px;
-        width: 10px;
-        background-color: $gray-lte;
-        border-radius: 50%;
-        display: inline-block;
+        font-size: 9px;
+        margin-right: 3px;
+        color: $gray-lte;
     }
 }
 

public/build/entrypoints.json

@@ -8,7 +8,7 @@
         "build/app.d8c0b5e5.js"
       ],
       "css": [
-        "build/app.383647c4.css"
+        "build/app.a2628675.css"
       ]
     },
     "invoice": {
@@ -45,7 +45,7 @@
     "build/0.f7fae2b9.js": "sha384-DR5A41RIECdWBd6xODR0b1hvGqcEYUyn9vNPreqK9VOCQWTF6bgxB4RVmqlOKilT",
     "build/1.c24a9c6f.js": "sha384-JPoKdrVtBemSiVBoAnmSxLML7xXM9zYeuwOPYQv/kLzt/P4cmLY5r9gH8oaGRPFG",
     "build/app.d8c0b5e5.js": "sha384-VwB8dUrwHl8kZCpZjOlqXKfC39MtJNY/TSQj0oEwyFuqKGhrf0LS5++I06EOZo9b",
-    "build/app.383647c4.css": "sha384-R9ydzuymNE2FlCGVy8XsJuK3xGrb2PtgRLNQRhMAMtbnjyxpFDE1q7WRXiiQMEvI",
+    "build/app.a2628675.css": "sha384-0MsxtEEys+bTKR6Qi9LvMRg21TPh2x7JxTdVFTmySyjct4BpB9xuffwyk1BDsZDe",
     "build/invoice.50473330.js": "sha384-2BXic5Sgorf2tXai6zSAN4wLY2dbg06L03/xMKW6itMcszvtnRArKzfBh6DNcF3f",
     "build/invoice.3764169b.css": "sha384-oILxBeIu3sNXxVnxhHmyHxqvLY2Rm5P2lzuJVtbxBIcnSdLS31SUSW6nVWNej1eg",
     "build/2.a47ad919.js": "sha384-1h2P/tsl+bh8qgJd7S9irQHKuns7UATVxeFGLOCH85GPFXfAdRzgzx3nk5MrxzrV",

public/build/manifest.json

@@ -2,7 +2,7 @@
   "build/0.f7fae2b9.js": "build/0.f7fae2b9.js",
   "build/1.c24a9c6f.js": "build/1.c24a9c6f.js",
   "build/2.a47ad919.js": "build/2.a47ad919.js",
-  "build/app.css": "build/app.383647c4.css",
+  "build/app.css": "build/app.a2628675.css",
   "build/app.js": "build/app.d8c0b5e5.js",
   "build/calendar.css": "build/calendar.8ede69b5.css",
   "build/calendar.js": "build/calendar.d2540934.js",

src/Twig/IconExtension.php

@@ -35,6 +35,7 @@ final class IconExtension extends AbstractExtension
         'debug' => 'far fa-file-alt',
         'delete' => 'far fa-trash-alt',
         'doctor' => 'fas fa-medkit',
+        'dot' => 'fas fa-circle',
         'download' => 'fas fa-download',
         'duration' => 'far fa-hourglass',
         'edit' => 'far fa-edit',

templates/macros/widgets.html.twig

@@ -119,20 +119,20 @@
 
 {% macro label_color_dot(type, isVisible, name, url, color) %}
     <span class="label-{{ type }}{{ isVisible ? '' : ' label-invisible' }}">
-        <span class="dot"{% if color is not empty %} style="background-color:{{ color }}"{% endif %}></span>
         <span class="name">
-            {% if url is not empty %}
+            <i class="dot {{ 'dot'|icon }} fa-fw"{% if color is not empty %} style="color:{{ color }}"{% endif %}></i>
+            {%- if url is not empty -%}
                 <a href="{{ url }}">{{ name }}</a>
-            {% else %}
+            {%- else -%}
                 {{ name }}
-            {% endif %}
+            {%- endif -%}
         </span>
     </span>
 {% endmacro %}
 
 {% macro color_dot(color, tooltip) %}
     <span class="label-color" data-toggle="tooltip" data-placement="top" title="{{ tooltip }}">
-        <span class="dot" style="background-color:{{ color }}"></span>
+        <i class="dot {{ 'dot'|icon }} fa-fw"{% if color is not empty %} style="color:{{ color }}"{% endif %}></i>
     </span>
 {% endmacro %}
 
@@ -159,7 +159,7 @@
 {% endmacro %}
 
 {% macro badge(title, color) %}
-    <span class="badge" style="background-color:{{ color|default('#dd4b39') }}">{{ title|trans }}</span>
+    <span class="badge" style="background-color:{{ color }}">{{ title|trans }}</span>
 {% endmacro %}
 
 {% macro alert(type, description, title, icon) %}

templates/tags/index.html.twig

@@ -39,8 +39,7 @@
             <tr{% if manageAllowed %} class="modal-ajax-form open-edit" data-href="{{ path('tags_edit', {'id': tag.id}) }}"{% endif %}>
                 <td class="text-nowrap">{{ tables.datatable_multiupdate_row(tag.id) }}</td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'name') }}">
-                    {{ widgets.color_dot(tag.color|default('#00a65a')) }}
-                    {{ tag.name }}
+                    {{ widgets.label_color_dot('tag', true, tag.name, null, tag.color|default('#00a65a')) }}
                 </td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'amount') }}">{{ widgets.label(tag.amount, type) }}</td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">