testio-tailwind 3.7.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/_includes/page-with-sidebar-dark.njk

@@ -0,0 +1,48 @@
+
+<nav class="sidebar manager">
+  <div class="navlinks">
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
+      <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
+    {% endfor %}
+  </div>
+</nav>
+
+<main tabindex="-1" id="main-content" class="main-content main-content-padding">
+  <article class="">
+
+    {% for item in navigation.items %}
+      {% if page.url == item.url %}
+        <h1 class="mb-heading">{{ item.text }}</h1>
+      {% endif %}
+    {% endfor %}
+
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
+      <section class="section" id="{{ section.data.title }}">
+        <div class="section-header">
+          <h4 class="section-title">{{ section.data.title }}</h2>
+        </div>
+
+        {% if section.data.type == 'block' %}
+          {% set direction = 'y' %}
+        {% else %}
+          {% set direction = 'x' %}
+        {% endif %}
+        {{ section.templateContent | safe }}
+
+        <details class="mt-3">
+          <summary class="btn btn-sm btn-secondary inline-block cursor-pointer mb-2">
+            Show source
+          </summary>
+          <div class="prose max-w-none bg-gray-light p-2 rounded mb-1">
+            <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
+          </div>
+        </details>
+      </section>
+    {%- endfor -%}
+  </article>
+</main>
+
+
+

package/src/_layouts/page-example-agenticqa.njk

@@ -7,7 +7,7 @@
 
     {% block content %}
       <main class="page-example-container">
-        <div class="app-body">
+        <div class="app-body dark">
           {% include "example-header-agenticqa.njk" %}
           {{ content | safe }}
         </div>

package/src/assets/stylesheets/app.css

@@ -30,6 +30,7 @@
 @import './components/chat.css' layer(components);
 @import './components/checkboxes_radiobuttons.css' layer(components);
 @import './components/devices.css' layer(components);
+@import './components/divider.css' layer(components);
 @import './components/drawer.css' layer(components);
 @import './components/dropdown.css' layer(components);
 @import './components/emptystate_message.css' layer(components);

package/src/assets/stylesheets/components/chat.css

@@ -1,5 +1,9 @@
 .list-chat-messages {
-  @apply grid gap-md;
+  @apply grid grid-cols-1 gap-md;
+}
+
+.list-chat-messages.full-width .chat-message-item {
+  @apply max-w-full;
 }
 
 .chat-message-item {
@@ -11,16 +15,23 @@
   grid-template-columns: auto auto 1fr;
 }
 
+.dark .chat-message-item {
+  grid-template-areas:  "chat-avatar chat-header"
+                        "chat-avatar chat-message";
+  grid-template-columns: auto auto 1fr;
+}
+
+
 .chat-avatar {
   grid-area: chat-avatar;
 }
 
 img.chat-avatar {
-  @apply w-spacing h-spacing mr-xs rounded-full;
+  @apply w-spacing h-spacing mr-xs rounded-full dark:mr-md;
 }
 
 .chat-header {
-  @apply flex text-label py-xxs text-label-color;
+  @apply relative flex text-label py-xxs text-label-color dark:justify-between dark:px-sm dark:py-xs dark:bg-listitem dark:rounded-t;
   grid-area: chat-header;
   line-height: 1.3;
 }
@@ -30,11 +41,15 @@ img.chat-avatar {
 }
 
 .chat-message {
-  @apply p-xs rounded bg-card dark:bg-gray-800;
+  @apply p-xs rounded bg-card dark:w-full dark:px-sm dark:pt-0 dark:rounded-t-none dark:bg-listitem;
   grid-area: chat-message;
   min-width: 0;
 }
 
+.chat-message-item .chat-title {
+  @apply dark:grow shrink-0 dark:mr-md;
+}
+
 .chat-message .message-banner {
   @apply relative flex flex-row items-center py-xxs pl-xs -mx-xs -mt-xs mb-xs text-white bg-info border-b border-white rounded-t;
   &::before {
@@ -101,6 +116,7 @@ img.chat-avatar {
 /*///// Your message /////*/
 
 .chat-message-item.your-message {
+  @apply dark:pl-lg;
   grid-template-areas:  "chat-header chat-header chat-avatar "
                         "chat-actions chat-message chat-avatar";
   grid-template-columns: 1fr auto auto;
@@ -108,7 +124,7 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message img.chat-avatar {
-  @apply ml-xs mr-0;
+  @apply ml-xs mr-0 dark:ml-md;
 }
 
 .chat-message-item.your-message .chat-actions {
@@ -116,12 +132,16 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message .chat-header {
-  @apply justify-end;
+  @apply justify-end dark:justify-between;
   text-align: end;
 }
 
+.chat-message-item.your-message .chat-title {
+  @apply dark:text-left;
+}
+
 .chat-message-item.your-message .chat-message {
-  @apply text-white bg-primary dark:bg-gray-600;
+  @apply text-white bg-primary dark:bg-listitem;
 }
 
 .chat-message-item.your-message .chat-message-addons .btn {
@@ -267,3 +287,91 @@ img.chat-avatar {
   @apply absolute bottom-md sm:bottom-spacing right-xxs;
   z-index: 1;
 }
+
+
+/*///// Collapsable message /////*/
+
+.chat-message-item.collapsable {
+  @apply grid-cols-2 cursor-pointer;
+  grid-template-columns: auto 1fr;
+}
+
+.chat-message-item.collapsable.your-message {
+  @apply w-full;
+  grid-template-columns: 1fr auto;
+}
+
+.chat-message-item.collapsable > details {
+  @apply col-span-2;
+  grid-area: chat-header;
+}
+
+.chat-message-item.collapsable > details .chat-header {
+  @apply rounded-b cursor-pointer;
+  padding-left: 40px;
+}
+
+.chat-message-item.collapsable > details summary::before {
+  @apply absolute inline-block shrink-0 w-icon h-icon left-xs mr-xxs bg-label-color;
+  content: "";
+  mask-repeat: no-repeat;
+  mask-image: url("/assets/images/icons/triangle-centered-right.svg");
+  top: 8px;
+}
+
+.chat-message-item.collapsable > details[open] .chat-header::before {
+  mask-image: url("/assets/images/icons/triangle-centered-down.svg");
+}
+
+.chat-message-item.collapsable > details[open] .chat-header {
+  @apply rounded-b-none;
+}
+
+.chat-action-row {
+  @apply flex flex-row pl-lg;
+}
+
+.chat-action-row .btn {
+  @apply mr-xs;
+}
+
+
+/*///// Chat form /////*/
+
+.chat-form-row {
+  @apply grid grid-cols-2 pl-lg;
+  grid-template-columns: 1fr auto;
+}
+
+.chat-form {
+  @apply bg-gray-darkest p-md rounded border border-bordercolor;
+}
+
+.chat-form-row .chat-avatar {
+  @apply ml-md mr-0;
+  grid-area: initial;
+}
+
+.chat-form .form-actions {
+  @apply flex flex-row mt-md;
+}
+
+.chat-form .form-actions .btn {
+  @apply mr-xs;
+}
+
+
+/*///// Chat form /////*/
+
+.chat-history-header {
+  @apply flex justify-center items-center w-full text-center text-label font-semibold text-gray-darker uppercase cursor-pointer bg-gray-darkest rounded-full hover:bg-link-hover hover:text-white;
+  height: 12px;
+}
+
+.chat-history-collapsable[open] .chat-history-header {
+  @apply mb-md;
+}
+
+.chat-history-title {
+  @apply w-auto px-xs bg-card;
+}

package/src/assets/stylesheets/components/divider.css

@@ -0,0 +1,3 @@
+.divider {
+  @apply h-1px border-t border-bordercolor my-spacing;
+}

package/src/assets/stylesheets/components/layout.css

@@ -43,5 +43,5 @@ html, body {
 }
 
 .centered-content {
-  @apply w-full max-w-centered-content;
+  @apply relative w-full max-w-centered-content h-fit overflow-hidden;
 }

package/src/assets/stylesheets/components/list_item.css

@@ -71,8 +71,22 @@ a.listitem:hover {
   mask-image: url("/assets/images/icons/arrow-up.svg");
 }
 
+.dark .listitem .collapse-btn:after {
+  @apply w-icon bg-label-color;
+  mask-image: url("/assets/images/icons/triangle-centered-left.svg");
+}
+
+.dark .listitem[open] > .listitem-header .collapse-btn:after {
+  mask-image: url("/assets/images/icons/triangle-centered-down.svg");
+}
+
+.dark .listitem .collapse-btn:hover:after {
+  @apply bg-white;
+}
+
+
 .listitem-badge {
-  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black dark:bg-gray-700 rounded-l;
+  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white dark:font-bold dark:text-heading-5 dark:leading-none bg-black dark:bg-gray-750 rounded-l;
   grid-area: badge;
 }
 
@@ -302,3 +316,22 @@ a.listitem:hover {
 .listitem-with-footer .listitem-footer .btn-square {
   @apply flex-auto flex-grow-0 flex-shrink-0;
 }
+
+/*///// Attachments /////*/
+
+.listitem-attachments {
+  @apply grid grid-cols-2 gap-xs place-content-start;
+  grid-template-columns: auto auto;
+}
+
+.listitem-attachments .attachment {
+  @apply h-full w-auto max-h-spacing-4xl;
+}
+ 
+.listitem-attachments .attachment .attachment-thumb {
+  @apply h-full w-auto;
+}
+
+.listitem-attachments .attachment .attachment-thumb img {
+  @apply h-full w-auto;
+}

package/src/assets/stylesheets/components/lists.css

@@ -18,12 +18,12 @@ dl dd {
 }
 
 dl.list-inline {
-  @apply grid gap-xs content-start;
+  @apply grid gap-xs content-start dark:text-label-color;
   grid-template-columns: auto 1fr;
 }
 
 dl.list-inline dt {
-  @apply pr-spacing;
+  @apply pr-spacing dark:pr-xs dark:pt-[2px];
 }
 
 dl.list-inline dd {

package/src/assets/stylesheets/components/splitview.css

@@ -128,6 +128,10 @@
   grid-template-columns: auto 1fr auto;
 }
 
+.dark .splitview-details-header {
+  grid-template-columns: 1fr auto;
+}
+
 .splitview-details-title {
   @apply text-heading-3 dark:text-card-header;
 }
@@ -177,6 +181,11 @@
   }
 }
 
+.meta-info {
+  @apply grid grid-cols-2 gap-spacing place-content-start place-items-center text-label-color;
+  grid-template-columns: auto auto;
+}
+
 .splitview-details-content-grid {
   @apply grid gap-xs mb-md;
 
@@ -366,9 +375,9 @@ body:not(.dark) .splitview-item.selected {
 }
 
 .grid-splitview .splitview-list {
-  @apply col-span-1 lg:col-span-2 overflow-y-visible;
+  @apply col-span-1 lg:col-span-2 overflow-y-visible h-fit;
 }
 
 .grid-splitview .splitview-details {
-  @apply flex flex-col col-span-1 lg:col-span-3 overflow-y-visible;
+  @apply block col-span-1 lg:col-span-3 h-auto min-h-auto overflow-y-visible;
 }

package/src/assets/stylesheets/components/tags.css

@@ -7,14 +7,13 @@
 }
 
 .tag {
-  @apply inline-flex items-center flex-row h-md px-xs text-sm leading-none bg-tag text-appbody-textcolor rounded;
-  padding-top: 2px;
-  padding-bottom: 2px;
+  @apply inline-flex items-center flex-row px-xs dark:px-sm text-sm dark:text-base leading-normal bg-tag text-appbody-textcolor rounded;
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 
 .tag .icon {
-  height: var(--font-size-icon-xs);
-  font-size: var(--font-size-icon-xs);
+  @apply mr-icon-spacing h-icon-xs dark:h-icon text-icon-xs dark:text-icon;
 }
 
 .tag.sm {
@@ -36,7 +35,7 @@
 }
 
 .tag.popover-tag:hover {
-  @apply bg-link-hover text-white;
+  @apply bg-link-hover! text-white;
 }
 
 .tag.popover-tag .icon {
@@ -46,5 +45,21 @@
 }
 
 .tag.popover-tag:hover .icon {
-  @apply text-white;
+  @apply text-white!;
+}
+
+.tag.success {
+  @apply bg-success text-black;
+}
+
+.tag.danger {
+  @apply bg-danger text-white;
+}
+
+.tag.pending {
+  @apply bg-pending text-black;
+}
+
+.tag.light {
+  @apply bg-gray-lightest dark:bg-gray-darker text-black dark:text-white;
 }

package/src/assets/stylesheets/components/typography.css

@@ -53,7 +53,7 @@ code {
 }
 
 .label, .form-label, dt {
-  @apply text-label-color text-label font-semibold;
+  @apply text-label-color text-label font-semibold dark:uppercase;
 }
 
 .link-with-icon {

package/src/assets/stylesheets/components/uploads.css

@@ -21,7 +21,7 @@
   @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
 
   & .attachment-thumb {
-    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white;
+    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white dark:border-bordercolor;
 
     & .icon {
       @apply text-icon-lg;

package/src/assets/stylesheets/tailwind_config.css

@@ -65,6 +65,8 @@
   --color-bordercolor-dark: #D4D6DC;
   --color-success: #8cbd24;
   --color-danger: #ec0404;
+  --color-blocked: #f48d21;
+  --color-pending: #888888;
   --color-disabled: #bfc1c5;
   --color-disabled-dark: #5f656d;
   --color-placeholder: #bfc1c5;

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -15,7 +15,7 @@
     --color-disabled: #5f656d;
     --color-listitem: #343A40;
     --color-placeholder: #5f656d;
-    --color-tag: #5f656d;
+    --color-tag: #262626;
     --color-label-color: #888888;
     --color-success: #33BA9E;
     --color-danger: #FF3131;
@@ -36,6 +36,7 @@
 
     
     /*//// Fontsize ////*/
-    --fontsize-card-header: 18px;
+    --fontsize-card-header: 1.125rem;
+    --font-size-label: 0.75rem;
   }
 }

package/src/pages/agenticqa/chat_collapsable.haml

@@ -0,0 +1,29 @@
+---
+tags: agenticqa
+title: Chat collapsable
+---
+
+.list-chat-messages.full-width
+  .chat-message-item.collapsable
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a short message.
+  .chat-message-item.collapsable
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

package/src/pages/agenticqa/chat_form.haml

@@ -0,0 +1,15 @@
+---
+tags: agenticqa
+title: Chat form
+---
+
+.chat-form-row
+  %form.chat-form
+    %h5.text-card-header.mb-xxs Re-Run this check
+    %p.font-light.mb-md Add additional instructions for re-running this check.
+    %textarea.form-control{placeholder:"Add your instructions or feedback for Testinator"}
+    .form-actions
+      %a.btn.btn-primary.rounded-full
+        %span.icon.icon-sync.mr-icon-spacing
+        re-run check
+      %button.btn.btn-secondary.rounded-full Cancel

package/src/pages/agenticqa/chat_history.haml

@@ -0,0 +1,24 @@
+---
+tags: agenticqa
+title: Chat history
+---
+
+.card.p-card-padding
+  %details.chat-history-collapsable
+    %summary.chat-history-header
+      .chat-history-title Show complete history
+    .list-chat-messages.full-width
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+        .chat-header
+          %span.chat-title.label Justification
+          %span.label 5 mins ago
+        .chat-message
+          Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span.chat-title.label Justification
+          %span.label 5 mins ago
+        .chat-message
+          Here's a short message with bits of lorem ipsum.

package/src/pages/agenticqa/chat_messages.haml

@@ -0,0 +1,53 @@
+---
+tags: agenticqa
+title: Chat messages
+---
+
+.list-chat-messages.full-width
+  .chat-message-item
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a short message with bits of lorem ipsum.
+  .chat-message-item
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a short message with bits of lorem ipsum.
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-action-row
+    %a.btn.btn-primary.rounded-full re-run check
+    %a.btn.btn-secondary.rounded-full update check

package/src/pages/agenticqa/index.njk

@@ -4,4 +4,4 @@ permalink: agenticqa/
 ---
 
 {% set collection = collections.agenticqa %}
-{% include "page-with-sidebar-nocode.njk" %}
+{% include "page-with-sidebar-dark.njk" %}

package/src/pages/agenticqa/listitem.haml

@@ -0,0 +1,42 @@
+---
+tags: agenticqa
+title: list item
+---
+
+.list-listitems
+  %details.listitem
+    %summary.listitem-header
+      .listitem-badge 1
+      .listitem-title List item collapsable
+      .listitem-actions
+        .btn.collapse-btn
+    .listitem-content
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .listitem-subheadline AI Screenshots
+      .listitem-attachments
+        .attachment
+          %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+            %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
+        .attachment
+          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+            %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
+  %details.listitem
+    %summary.listitem-header
+      .listitem-badge 2
+      .listitem-title List item collapsable
+      .listitem-actions
+        .btn.collapse-btn
+    .listitem-content
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .listitem-subheadline AI Screenshots
+      .listitem-attachments
+        .attachment
+          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+            %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
+        .attachment
+          %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+            %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}

package/src/pages/components/tags.haml

@@ -10,6 +10,16 @@ title: Tags
   .tag.teamleader-verified
     .icon.icon-verify-check.mr-xxs
     TL
+.list-tags.mt-xs
+  .tag.success
+    .icon.icon-check-circle
+    Success
+  .tag.danger
+    .icon.icon-cross-circle
+    Danger
+  .tag.pending
+    .icon.icon-sync
+    Pending
 .list-tags.mt-xs
   %details.popover-wrapper
     %summary
@@ -23,7 +33,7 @@ title: Tags
         .btn.btn-sm.btn-inverted Action
   %details.popover-wrapper
     %summary
-      .tag.popover-tag.bg-gray-lighter
+      .tag.popover-tag.light
         .icon.icon-check-thick-centered.text-success
         Popover-tag
     .popover-menu.info