From 3babdebc5bd1f84389dec6947a03a14d799ad244 Mon Sep 17 00:00:00 2001
From: Cocographique <nmi@odoo.com>
Date: Tue, 14 Aug 2018 16:07:19 +0200
Subject: [PATCH] [FIX] website: snippets usability improvements

- Suggest correct colors for <hr/> snippet
- Make alignment options more obvious for s_three_column
- Add alignment options for s_share snippet
- Review carousel design
---
 addons/website/views/snippets.xml | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 8307339ce21..46e2e5125d0 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -156,6 +156,9 @@
                             <h3 class="card-title">Feature Two</h3>
                             <p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the column to create a new one as a copy.</p>
                         </div>
+                        <div class="card-footer">
+                            <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
+                        </div>
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
@@ -164,6 +167,9 @@
                         <div class="card-body">
                             <h3 class="card-title">Feature Three</h3>
                             <p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change it's <em>rounded corner</em> style.</p>
+                            <div class="s_btn text-left pb0 pt16" data-name="Button">
+                                <a href="#" class="btn btn-primary btn-sm">Learn more</a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -229,7 +235,7 @@
                             <div class="s_hr pt8 pb32">
                                 <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
                             </div>
-                            <p>Storytelling is powerful.<br/> It draws readers in and engages them..</p>
+                            <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
                             <div class="s_btn text-center pt16 pb16" data-name="Buttons">
                                 <a href="/start" class="btn btn-epsilon rounded-circle">Start your journey</a>
                             </div>
@@ -245,7 +251,7 @@
                             <h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
                             <h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
                             <p class="mt24">Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
-                            <div class="s_share pt16 pb16">
+                            <div class="s_share text-left pt16 pb16">
                                 <a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="s_share_facebook" target="_blank">
                                     <i class="fa fa-facebook rounded shadow-sm"/>
                                 </a>
@@ -903,7 +909,7 @@
         data-selector=".s_hr"
         data-target="hr"
         data-color-prefix="border-"
-        data-palette-exclude="transparent_grayscale, grayscale"
+        data-palette-exclude="transparent_grayscale, common"
         data-palette-title="Separator Color">
         <div class="dropdown-submenu">
             <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Color</a>
@@ -951,7 +957,7 @@
     </div>
 
     <!-- H-ALIGN | .s_btn -->
-    <div data-selector=".s_btn">
+    <div data-selector=".s_btn, .s_share">
         <div class="dropdown-submenu">
             <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-align-left"/>Alignment</a>
             <div class="dropdown-menu" role="menu">