Adapt Icon to profiler redesign (minor) (#83)

* Add `empty-panel` class when panel is empty

* Fix message table HTML

* Use `currentColor` in the SVG icon

Author: smnandre

src/Resources/views/Collector/mercure.html.twig

@@ -26,7 +26,7 @@
     <h2>Messages</h2>
 
     {% if collector.count == 0 %}
-        <div class="empty">
+        <div class="empty empty-panel">
             <p>No messages have been collected.</p>
         </div>
     {% else %}
@@ -60,19 +60,21 @@
                                 <th>Retry</th>
                             </tr>
                             </thead>
-                            {% for i, message in data.messages %}
-                                <tr>
-                                    <td class="font-normal text-small text-muted nowrap">{{ i + 1 }}</td>
-                                    <td class="nowrap">{{ '%.0f'|format(message.duration) }} ms</td>
-                                    <td class="nowrap">{{ '%.2f'|format(message.memory / 1024 / 1024) }} MB</td>
-                                    <td class="font-normal text-small text-bold nowrap">{{ message.object.topics|join(',') }}</td>
-                                    <td>{{ dump(message.object.data) }}</td>
-                                    <td>{{ dump(message.object.private) }}</td>
-                                    <td class="nowrap">{{ message.object.id }}</td>
-                                    <td class="nowrap">{{ message.object.type }}</td>
-                                    <td class="nowrap">{{ message.object.retry }}</td>
-                                </tr>
-                            {% endfor %}
+                            <tbody>
+                                {% for message in data.messages %}
+                                    <tr>
+                                        <td class="font-normal text-small text-muted nowrap">{{ loop.index }}</td>
+                                        <td class="nowrap">{{ '%.0f'|format(message.duration) }} ms</td>
+                                        <td class="nowrap">{{ '%.2f'|format(message.memory / 1024 / 1024) }} MB</td>
+                                        <td class="font-normal text-small text-bold nowrap">{{ message.object.topics|join(',') }}</td>
+                                        <td>{{ dump(message.object.data) }}</td>
+                                        <td>{{ dump(message.object.private) }}</td>
+                                        <td class="nowrap">{{ message.object.id }}</td>
+                                        <td class="nowrap">{{ message.object.type }}</td>
+                                        <td class="nowrap">{{ message.object.retry }}</td>
+                                    </tr>
+                                {% endfor %}
+                            </tbody>
                         </table>
                     </div>
                 </div>