From 858eaee5a73ddd5829ca72427735e9a7fb2e0554 Mon Sep 17 00:00:00 2001
From: Glenn <glenux@glenux.net>
Date: Thu, 18 Aug 2022 21:32:42 +0200
Subject: [PATCH] fix: Improve template readability

---
 templates/html.mjml | 106 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 85 insertions(+), 21 deletions(-)

diff --git a/templates/html.mjml b/templates/html.mjml
index 4f9180c..62367ae 100644
--- a/templates/html.mjml
+++ b/templates/html.mjml
@@ -1,11 +1,12 @@
 <mjml>
   <mj-head>
-	  <mj-style inline="inline">
-		.footer-link { color: white !important; font-weight: bold; text-decoration: underline !important; }
-	  </mj-style>
+    <mj-style inline="inline">
+      .footer-link { color: white !important; font-weight: bold; text-decoration: underline !important; }
+    </mj-style>
   </mj-head>
 
   <mj-body>
+    <!-- section 1 -->
     <mj-section>
       <mj-group>
         <mj-column>
@@ -15,41 +16,104 @@
           <mj-text font-size="20px" color="#F45E43" font-family="helvetica" align="center">
             Mardi 28 aout 2020
           </mj-text>
-          <mj-button href="#" font-family="Helvetica" background-color="#f45e43" color="white">Visit Board
+          <mj-button href="#" font-family="Helvetica" background-color="#f45e43" color="white">Visit Musala
           </mj-button>
         </mj-column>
       </mj-group>
     </mj-section>
+
+    <!-- Title section -->
     <mj-section>
       <mj-column>
         <mj-divider border-color="#F45E43"></mj-divider>
-        <mj-text font-size="20px" color="#F45E43" font-family="helvetica" align="center">
-          Your daily task list for
-        </mj-text>
-        <mj-text font-size="24px" font-weight="bold" color="#F45E43" font-family="helvetica" align="center">
-          BC.Business.Operational
+        <mj-text font-size="24px" color="#F45E43" font-family="helvetica" align="center">
+          Your daily task list
         </mj-text>
         <mj-divider border-color="#F45E43"></mj-divider>
       </mj-column>
     </mj-section>
-    <mj-section>
-      <mj-column>
-        <mj-button font-size="20px" font-family="Helvetica" font-weight="bold"  background-color="#f45e43" align="left" color="white">Topic ABC
+
+    <!-- Chapter -->
+    <mj-section> 
+       <mj-column>
+        <mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">Late
         </mj-button>
-          <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" font-weight="bold" align="left">
-            Topic dsfsdfs
-          </mj-text>
-          <mj-text font-size="16px" color="#666" font-family="helvetica" align="left">
-              Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a>
-          </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left" line-height="1.25">
+          <p style="margin: 0 0 4px 0;"><b>Super task number one</b></p>
+          <p style="margin: 0 0 4px 0; color: #bbb; font-size: 14px;"><b>Draft</b> on <b>cloud.boldcode.io</b> &ndash; Due for 2001-10-10</p>
+          <p style="margin: 0 0 4px 0; ">Lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla &blacksquare; <a href="#rezrez" style="color: #f45e43;">read more</a></p>
+        </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left" line-height="1.25">
+          <p style="margin: 0 0 4px 0;"><b>Super task number one</b></p>
+          <p style="margin: 0 0 4px 0; color: #bbb; font-size: 14px;"><b>Draft</b> on <b>cloud.boldcode.io</b> &ndash; Due for 2001-10-10</p>
+          <p style="margin: 0 0 4px 0; ">Lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla, lorem ipsum dolor sit amet, blablablabla &blacksquare; <a href="#rezrez" style="color: #f45e43;">read more</a></p>
+        </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left" line-height="1.25">
+          <p><b>Super task number one</b><br/></p>
+          <p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
       </mj-column>
     </mj-section>
+
+   
+    <!-- Chapter -->
+    <mj-section> 
+       <mj-column>
+        <mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">Today
+        </mj-button>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
+          <p><b>Super task number one</b></p>
+          <p font-size="14px">Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
+          <p><b>Super task number one</b><br/></p>
+          <p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
+          <p><b>Super task number one</b><br/></p>
+          <p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+  <!-- Chapter -->
+    <mj-section> 
+       <mj-column>
+        <mj-button font-size="20px" font-family="Helvetica" font-weight="bold" background-color="#f45e43" align="left" color="white">This week
+        </mj-button>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
+          <p><b>Super task number one</b></p>
+          <p font-size="14px">Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
+          <p><b>Super task number one</b><br/></p>
+          <p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
+        
+        <mj-text font-size="16px" color="#666" padding-bottom="0" font-family="helvetica" align="left">
+          <p><b>Super task number one</b><br/></p>
+          <p>Lorem ipsum dolor sit amet, blablablabla <a href="rezrez">&gt;&gt; see more</a></p>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    
+    
+    <!-- footer -->
     <mj-section>
       <mj-column background-color="white" inner-background-color="#f45e43" padding-right="20px" padding-left="20px">
-          <mj-text font-size="16px" color="#ffffff" font-family="helvetica" align="left" >
-			  To stop receiving these emails, you can change your <a href="#" class="footer-link">notification preferences</a> in <a href="#" class="footer-link">Musala</a>.
-          </mj-text>
+        <mj-text font-size="16px" color="#ffffff" font-family="helvetica" align="left">
+          To stop receiving these emails, you can change your <a href="#" class="footer-link">notification preferences</a> in <a href="#" class="footer-link">Musala</a>.
+        </mj-text>
       </mj-column>
     </mj-section>
+
   </mj-body>
 </mjml>