testio-tailwind 3.1.0 → 3.2.0

package/package.json

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

package/src/pages/email-templates/email_testinator.pug

@@ -9,8 +9,9 @@ tags: testinatorEmail
 html(lang="en")
   head
     meta(content='text/html; charset=UTF-8', http-equiv='Content-Type')
-    title test IO
+    title Testinator
     meta(content='width=device-width', name='viewport')
+    meta(name='color-scheme', content="light dark")
     style(type='text/css').
       
       /* RESET STYLES */
@@ -58,8 +59,6 @@ html(lang="en")
 
       /*/// Custom styles ///*/
 
-
-
       table {
         border-collapse: collapse !important;
       }
@@ -130,35 +129,12 @@ html(lang="en")
         max-width: 600px;
       }
 
-      .email-header {
-        padding-top: 20px;
-      }
-
       .emailheader-logo {
         display: block;
-        width: 280px;
-        height: 64px;
-        max-width: 100%;
-      }
-
-      .space-logo-container {
-        padding: 30px;
-        height: 120px;
-        background-color: #78EAC1;
-        border-radius: 10px 10px 0 0;
-      }
-
-      .space-title {
-        font-family: Open Sans, Helvetica, Arial, sans-serif;
-        color: #FFFFFF;
-        font-size: 16px;
-      }
-
-      .space-logo {
         width: 100%;
         height: auto;
-        max-width: 300px;
-        max-height: 150px;
+        max-width: 100%;
+        margin-top: 40px;
         margin-bottom: 0;
       }
 
@@ -236,31 +212,33 @@ html(lang="en")
         color: #666666;
         margin-right: 40px;
       }
-
-      a.email-button {
-        display: block;
-        min-height: 25px;
-        min-width: 100px;
-        margin-left: 20% !important;
-        margin-right: 20% !important;
-        margin-top: 15px;
-        margin-bottom: 30px;
-        padding: 0 10px !important;
-        font-size: 18px;
-        font-weight: 500;
-        font-style: bold;
-        text-decoration: none;
-        text-align: center;
-        color: #222222;
-        background-color: #78EAC1;
-        border-top: 15px solid #78eac1;
-        border-bottom: 15px solid #78eac1;
-        border-left: 15px solid #78eac1;
-        border-right: 15px solid #78eac1;
-        border-radius: 30px;
-        -webkit-border-radius: 30px;
-        outline: none;
-      }
+      @media (prefers-color-scheme: dark) {
+        .email-button,
+        a.email-button,
+        a.intercom-h2b-button {
+          display: block;
+          min-height: 25px;
+          min-width: 100px;
+          margin-left: 20% !important;
+          margin-right: 20% !important;
+          margin-top: 15px;
+          margin-bottom: 30px;
+          padding: 10px 20px !important;
+          font-size: 18px;
+          line-height: 1.5;
+          font-weight: 500;
+          text-decoration: none;
+          text-align: center;
+          color: #222222;
+          background-color: #78EAC1;
+          background:linear-gradient(to right,#78EAC1,#78EAC1);
+          border-radius: 30px;
+          -webkit-border-radius: 30px;
+          outline: none;
+        }
+      }
+      .email-button,
+      a.email-button,
       a.intercom-h2b-button {
         display: block;
         min-height: 25px;
@@ -269,27 +247,20 @@ html(lang="en")
         margin-right: 20% !important;
         margin-top: 15px;
         margin-bottom: 30px;
-        padding: 0 10px !important;
+        padding: 10px 20px !important;
         font-size: 18px;
+        line-height: 1.5;
         font-weight: 500;
-        font-style: bold;
         text-decoration: none;
         text-align: center;
         color: #222222;
         background-color: #78EAC1;
-        border-top: 15px solid #78EAC1;
-        border-bottom: 15px solid #78EAC1;
-        border-left: 15px solid #78EAC1;
-        border-right: 15px solid #78EAC1;
+        background:linear-gradient(to right,#78EAC1,#78EAC1);
         border-radius: 30px;
         -webkit-border-radius: 30px;
         outline: none;
       }
-      .button-wrapper {
-        text-align: center;
-        background-color: #236a84;
-        padding: 40px 0;
-      }
+
       a.wrapped {
         margin-left: 0;
         background-color: #fff;
@@ -304,11 +275,12 @@ html(lang="en")
   body
     table(border='0', cellpadding='0', cellspacing='0', width='100%')
       tr
-        td.mobile-padding.email-header
+        td.mobile-padding
           table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
             tr
-              td.space-logo-container(align='center')
-                img.space-logo(src='/assets/images/logo_testinator/testinator_logo_purpleteal_black_1000px.png', alt='Logo')
+              td.email-header(align='left')
+                a(target='_blank', href='http://testinator.ai')
+                  img.emailheader-logo(src='/assets/images/assets_testinator/testinator_email_header.png', alt='Logo')
     table(border='0', cellpadding='0', cellspacing='0', width='100%')
       tr
         td.mobile-padding
@@ -322,7 +294,7 @@ html(lang="en")
                   | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat facilisis purus at scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tincidunt porttitor eros, vitae vestibulum dui facilisis eu. Cras eu ipsum lacus. Integer faucibus iaculis lorem, quis pretium leo rhoncus eget. Duis sodales tincidunt est a pretium. Nunc orci nisl, dignissim non pretium sed, fermentum vel purus. Sed quis enim rhoncus leo dapibus molestie in eu risus. Sed tincidunt tristique urna. Nullam accumsan tincidunt sem vitae fermentum. Nunc est nulla, adipiscing et laoreet nec, 
                   a(target='_blank', href='http://testinator.ai') convallis vel ante
                   | . Quisque cursus, odio ac pharetra tristique, diam felis lobortis orci, at blandit sem mauris eget lacus. Ut placerat posuere lacus, nec suscipit libero iaculis in.
-                a.email-button(href='#') email-button
+                a.email-button(target='_blank', href='http://testinator.ai') email-button
                 img(src='/assets/images/placeholders/Approaches-desktop.png')
                 h2 Here's an h2 heading for structuring the content
                 p Fusce eget augue quam. Maecenas vehicula ligula in nibh dapibus sollicitudin. Donec eget vulputate mauris. Duis fringilla nunc vitae quam euismod non interdum orci aliquet. Duis at lacus erat, sed ultricies felis. Phasellus faucibus mauris vel odio iaculis ullamcorper. In hac habitasse platea dictumst. Integer id odio justo. Ut a ligula arcu. Vestibulum nec quam justo. Suspendisse molestie neque a enim accumsan auctor ornare lacus pellentesque. Praesent vitae lectus vitae sapien scelerisque auctor.
@@ -330,7 +302,7 @@ html(lang="en")
                 h3 H3 New announcements
                 p.email-card
                   | A card containing some very important: Ut facilisis auctor dolor, et fringilla turpis suscipit et. Pellentesque ipsum risus, vehicula eu rutrum non, ornare aliquam lectus. Donec sed tortor ut quam ultrices tincidunt. Sed sagittis tincidunt pulvinar.
-                a.intercom-h2b-button(href='#') intercom-h2b-button
+                a.intercom-h2b-button(target='_blank', href='http://testinator.ai') intercom-h2b-button
     table.email-footer(border='0', cellpadding='0', cellspacing='0', width='100%')
       tr
         td.mobile-padding

package/src/pages/testinator/assets.haml

@@ -0,0 +1,10 @@
+---
+tags: testinator
+title: Testinator assets
+---
+
+.grid.gap-md.grid-cols-2{class:"xl:grid-cols-3 2xl:grid-cols-4"}
+  %a.block{href:"/assets/images/assets_testinator/testinator_email_header.png"}
+    %img.bg-gray-lightest.p-md{src:"/assets/images/assets_testinator/testinator_email_header.png"}
+    .text-xs.mt-2 Email header PNG
+