first draft of notification tutorial

src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.html

@@ -1,40 +1,30 @@
 <div class="tutorial-content">
+    <h2 class="tutorial-content__title">And... you're all set! 🎉</h2>
     <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue nisi sed luctus aliquet. Quisque ut mi
+        Please find below more informations about Sengi.<br />
-        nec neque elementum malesuada. Mauris sed dignissim magna. Ut et sodales risus. Duis porta mi leo, sed sodales
-        turpis posuere auctor. Praesent sollicitudin leo et tortor facilisis porta. Fusce eget tortor suscipit, auctor
-        ipsum eget, pharetra augue. Mauris mollis, risus scelerisque dapibus maximus, diam neque ultricies nibh, non
-        faucibus diam turpis non sapien. Etiam dignissim pellentesque neque, a sagittis velit pretium at. Morbi vitae
-        nisi tristique, tristique arcu sit amet, dictum odio. Sed commodo odio urna, sit amet vehicula turpis congue sit
-        amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pretium
-        malesuada nibh, sed vehicula ligula convallis sed.<br />
         <br />
-        Nulla pulvinar convallis lorem ac dignissim. Suspendisse commodo odio eget leo egestas, eget congue lorem
-        gravida. In erat lorem, ultricies pharetra purus eget, egestas mollis leo. Duis sollicitudin aliquet interdum.
-        Vestibulum in efficitur nisl, ac fermentum felis. Maecenas fermentum commodo molestie. Curabitur imperdiet in
-        libero finibus lacinia. Aenean in nunc vel quam ullamcorper maximus. Suspendisse vehicula eget justo ac
-        eleifend. Aliquam bibendum quis sapien at dignissim. Pellentesque porttitor, elit nec accumsan ullamcorper, ante
-        dolor vestibulum est, id iaculis mauris sem id urna. Vestibulum eu augue egestas, sollicitudin enim quis,
-        hendrerit est. Pellentesque imperdiet tincidunt ante, non sollicitudin felis molestie viverra. Maecenas ac
-        commodo purus. Suspendisse a ipsum vitae ipsum blandit fringilla sed sed est.<br />
-        <br />
-        Duis ut sodales lorem, eget aliquam tellus. Curabitur vel pellentesque enim. Pellentesque sit amet pretium
-        ipsum. Nunc at est quis ligula ornare luctus ac sed magna. Vestibulum ante ipsum primis in faucibus orci luctus
-        et ultrices posuere cubilia curae; Sed eleifend nunc purus, sed euismod nisi varius ac. Etiam tempor feugiat
-        ligula sit amet feugiat. Nam congue, ipsum sed vestibulum porttitor, sapien turpis consectetur felis, fermentum
-        rhoncus odio urna id dui. Nullam iaculis urna lacus, sit amet lacinia augue porta sed. Curabitur iaculis ipsum
-        magna. In sed vestibulum augue. Vivamus quis elit id sem aliquam convallis.<br />
-        <br />
-        Curabitur sed vulputate urna. Sed at sapien vel lectus dictum suscipit ac quis nibh. Suspendisse potenti. Mauris
-        venenatis purus vitae purus ullamcorper, sit amet tristique ligula hendrerit. Quisque dignissim elit at ornare
-        gravida. Nunc et erat in magna posuere iaculis et non nulla. Cras sapien nulla, semper non urna ut, imperdiet
-        auctor neque. Aliquam ac maximus quam. Fusce pretium efficitur molestie. In bibendum in lacus vitae fringilla.
-        Vestibulum nec magna nec tortor lacinia feugiat. Duis in porta ligula. Vestibulum hendrerit commodo mauris, eget
-        porta erat pellentesque sit amet. Maecenas ac tincidunt mi.<br />
-        <br />
-        Cras sed sagittis lorem. Morbi convallis imperdiet auctor. Proin ac maximus quam. Suspendisse eu hendrerit quam.
-        Nullam porttitor, dui non eleifend consequat, purus urna auctor felis, sit amet vulputate magna justo vitae
-        ligula. Donec eu leo aliquet, molestie neque in, dictum mauris. Quisque ultricies, elit in varius ultricies,
-        lectus eros semper leo, id suscipit lorem lectus sit amet nibh.
     </p>
+
+    <h3 class="tutorial-content__subtitle">Notifications</h3>
+    <p>
+        By default, Sengi doesn't need the notification timeline: it has it's own way to do it.<br />
+        <br />
+        When your account will receive a new mention, follow, boost, favorite and other kind of notifications, your
+        avatar's icon will start flashing this way:<br />
+        <br />
+        [TODO]<br />
+        <br />
+        If you right-click on your avatar, the account panel will automatically open and switch to the related
+        subsection (mentions or notifications) and show you the last entries.<br />
+        <br />
+        [TODO]<br />
+        <br />
+        The flashing animation will then automatically stop.<br />
+        <br />
+        <br />
+        The aim of this mecanism is to prevent the flood of notification timelines (one per account) in the interface, especally if you manage a lot of accounts in Sengi. <br />
+        <br />
+        <br />
+        Of course, you can disable various parts of this mecanism in the settings panel.<br />
+    </p>    
 </div>

src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss

@@ -65,4 +65,14 @@ $footer-height: 30px;
 
 .tutorial-content {
     font-size: 14px;
+
+    &__title {
+        font-size: 20px;
+
+    }
+
+    &__subtitle {
+        font-size: 16px;
+
+    }
 }