npm - testio-tailwind - Versions diffs - 0.1.0 - Mend

testio-tailwind 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (538) hide show

package/src/pages/components/cards_tester.haml ADDED Viewed

@@ -0,0 +1,159 @@
+---
+tags: components
+title: Cards Tester Dashboard
+---
+.grid-testercards
+  .card.tester-card
+    %a.card-header{href:""}
+      %img.card-image{src:"/assets/images/placeholders/Rocket-Blueprint.png"}
+    .card-info
+      .card-label Customer Name
+      %a.card-title{href:""}
+        %h5 Product title
+      .card-label TL: Team Leader Name
+    .card-content
+      %p starts in 8 hours
+      .test-status-icons
+        %span.icon.icon-tablet
+        %span.icon.icon-smartphone
+        %span.icon.icon-computer
+        %span.text-with-icon
+          .icon.icon-testcase
+          Test Cases
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more
+  .card.tester-card
+    %a.card-header{href:""}
+      %img.card-image{src:"/assets/images/placeholders/Logo-alpha-empire-white.png"}
+    .card-info
+      .card-label Alpha Empire
+      %a.card-title{href:""}
+        %h5 Product title
+      .card-label TL: Team Leader Name
+    .card-content
+      %p starts in 8 hours
+      .test-status-icons
+        %span.icon.icon-tablet
+        %span.icon.icon-smartphone
+        %span.icon.icon-computer
+        %span.text-with-icon
+          .icon.icon-testcase
+          Test Cases
+    .card-perks
+      %ul.card-perks-list
+        %li.text-with-icon
+          .icon.icon-billing
+          Payout bonus
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more
+  .card.tester-card.running
+    %a.card-header{href:""}
+      .card-badge.high-priority
+      %img.card-image{src:"/assets/images/placeholders/testio_symbol_tealpurple_square-1000px.png"}
+    .card-info
+      .card-label Teal IO
+      %a.card-title{href:""}
+        %h5 Product title
+      .card-label TL: Team Leader Name
+      %progress.progress.test-progress{value:"32", max:"100"} 32%
+    .card-content
+      %p running, ends in 8 hours
+      .test-status-icons
+        %span.icon.icon-tablet
+        %span.icon.icon-smartphone
+        %span.icon.icon-computer
+        %span.text-with-icon
+          .icon.icon-testcase
+          Test Cases
+    .card-perks
+      %ul.card-perks-list
+        %li.text-with-icon
+          .icon.icon-exclamation-circle-filled
+          High Priority
+        %li.text-with-icon
+          .icon.icon-billing
+          Payout bonus
+        %li.text-with-icon
+          .icon.icon-testcase
+          5 Test Cases left
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more
+  .card.tester-card.running
+    %a.card-header{href:""}
+      %img.card-image{src:"/assets/images/placeholders/testio_symbol_purpleteal_square-1000px.png"}
+    .card-info
+      .card-label Purple IO
+      %a.card-title{href:""}
+        %h5 Product title
+      .card-label TL: Team Leader Name
+      %progress.progress.test-progress{value:"32", max:"100"} 32%
+    .card-content
+      %p running, ends in 8 hours
+      .test-status-icons
+        %span.icon.icon-tablet
+        %span.icon.icon-smartphone
+        %span.icon.icon-computer
+        %span.text-with-icon
+          .icon.icon-testcase
+          Test Cases
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more
+  .card.tester-card.opportunity
+    %a.card-header{href:""}
+      .card-badge.opportunity
+      %img.card-image{src:"/assets/images/placeholders/Rocket-Flying.png"}
+    .card-info
+      .card-label Opportunity
+      %a.card-title{href:""}
+        %h5 Opportunity title
+      .card-label TL: Team Leader Name
+    .card-content
+      %p starts in 8 hours
+      %p 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.
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more
+      %a.btn.btn-primary.btn-square{href: ""}
+        .icon.icon-cross
+  .card.tester-card.opportunity
+    %a.card-header{href:""}
+      .card-badge.opportunity
+      %img.card-image{src:"/assets/images/placeholders/Rocket-Flying.png"}
+    .card-info
+      .card-label Opportunity
+      %a.card-title{href:""}
+        %h5 Opportunity title
+      .card-label TL: Team Leader Name
+    .card-content
+      %p starts in 8 hours
+      %ul.bullet-list
+        %li Lorem ipsum dolor amet.
+        %li Consetetur sed diam.
+        %li Sed diam nonumy tempor.
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more
+  .card.tester-card.opportunity.running
+    %a.card-header{href:""}
+      .card-badge.opportunity
+      %img.card-image{src:"/assets/images/placeholders/Rocket-Flying.png"}
+    .card-info
+      .card-label Opportunity
+      %a.card-title{href:""}
+        %h5 Opportunity title
+      .card-label TL: Team Leader Name
+      %progress.progress.test-progress{value:"32", max:"100"} 32%
+    .card-content
+      %p running, ends in 8 hours
+      %ul.bullet-list
+        %li Lorem ipsum dolor sit amet
+        %li Consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt
+        %li Sed diam nonumy eirmod tempor invidunt
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        Learn more

package/src/pages/components/chat_window.haml ADDED Viewed

@@ -0,0 +1,241 @@
+---
+tags: components
+title: Chat window
+---
+.chat-window-container
+  %details.chat-window
+    %summary.chat-window-header
+      .chat-message-counter 999
+      %a{href:""} #123321
+      .chat-title Chat title
+      %button.btn.btn-xs.btn-ghost-inverted.btn-square
+        .icon.icon-xs.icon-cross
+    .list-chat-messages
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by
+          %span.chat-author Message sender
+        .chat-message
+          Here's a short message.
+        .chat-actions
+          .btn
+            .icon.icon-heart
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          Here's a short message which you liked.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                1
+              .popover-menu.info
+                .popover-title 1 person likes this
+                .popover-content You
+        .chat-actions
+          .btn
+            .icon.icon-heart-filled
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by
+          %span.chat-author Message sender
+        .chat-message
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          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. 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-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by
+          %span.chat-author You
+        .chat-message
+          Your short chat message with no lorem ipsum.
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by
+          %span.chat-author You
+        .chat-message
+          Another message by you with a lot ofLorem 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. 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-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.announcement
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.announcement Announcement
+          %span.text-mentioned @All
+          here's an announcement with a lot 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+          .chat-message-addons
+            %a.btn{href:""} Show in chat
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.mentioned You were mentioned
+          %span.text-mentioned @You
+          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+    %form.chat-window-actions
+      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
+      .btn.btn-sm.btn-square.btn-primary.btn-send-message
+        %input{type:"submit", value:""}

package/src/pages/components/comments_bug_preview.haml ADDED Viewed

@@ -0,0 +1,29 @@
+---
+tags: components
+title: Comments on bug previews
+---
+%p.mb-xs Used f.e. in the Customer UI - product overview.
+.list-chat-messages
+  .chat-message-item
+    %details.dropdown-actions.chat-avatar
+      %summary
+        .user-item.linked
+          %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-user-story-test
+          Tester profile
+        %a.popover-action{href:'#'}
+          %span.icon.icon-review-exclamation
+          Report tester
+    .chat-header
+      2 hours by
+      .chat-author Message sender
+      &nbsp;|&nbsp;
+      %a{href:""} #123321 Bug title for the mentioned bug
+    .chat-message
+      Here's a short message. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      .chat-message-addons
+        %a.btn{href:""} Show bug

package/src/pages/components/comments_chatmessages.haml ADDED Viewed

@@ -0,0 +1,229 @@
+---
+tags: components
+title: Comments and chat messages
+---
+.list-chat-messages
+  .chat-message-item
+    %details.dropdown-actions.chat-avatar
+      %summary
+        .user-item.linked
+          %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-user-story-test
+          Tester profile
+        %a.popover-action{href:'#'}
+          %span.icon.icon-review-exclamation
+          Report tester
+    .chat-header
+      %span 2 hours by
+      %span.chat-author Message sender
+    .chat-message
+      Here's a short message.
+    .chat-actions
+      .btn
+        .icon.icon-heart
+  .chat-message-item
+    %details.dropdown-actions.chat-avatar
+      %summary
+        .user-item.linked
+          %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-user-story-test
+          Tester profile
+        %a.popover-action{href:'#'}
+          %span.icon.icon-review-exclamation
+          Report tester
+    .chat-header
+      2 hours by
+      .chat-author Message sender with a much much longer name
+    .chat-message
+      Here's a short message which you liked.
+      .chat-message-addons
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-heart-filled
+            1
+          .popover-menu.info
+            .popover-title 1 person likes this
+            .popover-content You
+    .chat-actions
+      .btn
+        .icon.icon-heart-filled
+  .chat-message-item
+    %details.dropdown-actions.chat-avatar
+      %summary
+        .user-item.linked
+          %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-user-story-test
+          Tester profile
+        %a.popover-action{href:'#'}
+          %span.icon.icon-review-exclamation
+          Report tester
+    .chat-header
+      2 hours by
+      .chat-author Message sender
+    .chat-message
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+      .chat-message-addons
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-heart-filled
+            10
+          .popover-menu.info
+            .popover-title 10 people like this
+            .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-verify-check
+            TL
+          .popover-menu.info
+            .popover-title Verified by Team Leader
+            .popover-content Team Leader name
+    .chat-actions
+      %details.dropdown-actions.chat-message-actions
+        %summary
+          .btn
+            .icon.icon-more
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-pencil
+            Action
+          %a.popover-action{href:'#'}
+            %span.icon.icon-remove
+            Action
+  .chat-message-item
+    %details.dropdown-actions.chat-avatar
+      %summary
+        .user-item.linked
+          %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-user-story-test
+          Tester profile
+        %a.popover-action{href:'#'}
+          %span.icon.icon-review-exclamation
+          Report tester
+    .chat-header
+      2 hours by
+      .chat-author Message sender with a much much longer name
+    .chat-message
+      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. 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-actions
+      %details.dropdown-actions.chat-message-actions
+        %summary
+          .btn
+            .icon.icon-more
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-pencil
+            Action
+          %a.popover-action{href:'#'}
+            %span.icon.icon-remove
+            Action
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      2 hours by
+      .chat-author You
+    .chat-message
+      Your short chat message with no lorem ipsum.
+    .chat-actions
+      %details.dropdown-actions.chat-message-actions
+        %summary
+          .btn
+            .icon.icon-more
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-pencil
+            Action
+          %a.popover-action{href:'#'}
+            %span.icon.icon-remove
+            Action
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      2 hours by
+      .chat-author You
+    .chat-message
+      Another message by you with a lot ofLorem 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. 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-addons
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-heart-filled
+            10
+          .popover-menu.info
+            .popover-title 10 people like this
+            .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-verify-check
+            TL
+          .popover-menu.info
+            .popover-title Verified by Team Leader
+            .popover-content Team Leader name
+    .chat-actions
+      %details.dropdown-actions.chat-message-actions
+        %summary
+          .btn
+            .icon.icon-more
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-pencil
+            Action
+          %a.popover-action{href:'#'}
+            %span.icon.icon-remove
+            Action
+  .chat-message-item.announcement
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      2 hours by
+      .chat-author Team Leader
+    .chat-message
+      .message-banner.announcement Announcement
+      %span.text-mentioned @All
+      here's an announcement with a lot 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+      .chat-message-addons
+        %a.btn{href:""} Show in chat
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-heart-filled
+            10
+          .popover-menu.info
+            .popover-title 10 people like this
+            .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-verify-check
+            TL
+          .popover-menu.info
+            .popover-title Verified by Team Leader
+            .popover-content Team Leader name
+  .chat-message-item
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      2 hours by
+      .chat-author Team Leader
+    .chat-message
+      .message-banner.mentioned You were mentioned
+      %span.text-mentioned @You
+      here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .chat-message-addons
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-heart-filled
+            10
+          .popover-menu.info
+            .popover-title 10 people like this
+            .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+        %details.popover-wrapper.dropup
+          %summary.btn
+            .icon.icon-verify-check
+            TL
+          .popover-menu.info
+            .popover-title Verified by Team Leader
+            .popover-content Team Leader name