[IMP] website_livechat : improves statistics design

The statistic bar size is now related to the value of the rating
+ Adds small modififications to align correctly the different divs
+ harmonize icons size
+ show white icon for readability
+ Add inline padding to team member icon for readability
(inline because this part will be completelly reviewed in next version)

Task ID 1883227

5 files changed, 46 insertions, 44 deletions

diff --git a/addons/rating/static/src/img/rating_0_white.png b/addons/rating/static/src/img/rating_0_white.png
new file mode 100644
index 00000000000..a6c3ef8c79c
--- /dev/null
+++ b/addons/rating/static/src/img/rating_0_white.png
diff --git a/addons/rating/static/src/img/rating_10_white.png b/addons/rating/static/src/img/rating_10_white.png
new file mode 100644
index 00000000000..d756eee931f
--- /dev/null
+++ b/addons/rating/static/src/img/rating_10_white.png
diff --git a/addons/rating/static/src/img/rating_1_white.png b/addons/rating/static/src/img/rating_1_white.png
new file mode 100644
index 00000000000..1f37da2cd9d
--- /dev/null
+++ b/addons/rating/static/src/img/rating_1_white.png
diff --git a/addons/rating/static/src/img/rating_5_white.png b/addons/rating/static/src/img/rating_5_white.png
new file mode 100644
index 00000000000..d146dc5b37d
--- /dev/null
+++ b/addons/rating/static/src/img/rating_5_white.png
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 1398d9ba557..03341c2a857 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -65,51 +65,53 @@
                     <div class="row mt32">
                         <div class="col-lg-8">
                             <t t-if="len(ratings) &gt; 0">
-                                <div class="col">
-                                    <h3>Statistics</h3>
-                                    <div class="row">
-                                        <div class="col-lg-4">
-                                            <div class="card bg-warning text-white">
-                                                <div class="card-body text-center">
-                                                    <img src="/rating/static/src/img/rating_5.png" style="height:50px" alt="Neutral face"/>
-                                                </div>
-                                                <div class="card-body text-center">
-                                                    <h2 style="margin: 0">
-                                                        <b style="font-size: 50px">
-                                                            <t t-esc="percentage['okay']" />
-                                                        </b>
-                                                        <small>%</small>
-                                                    </h2>
+                                <div class="row">
+                                    <div class="col-lg-12 mb32">
+                                        <h3>Statistics</h3>
+                                        <div class="row">
+                                            <div class="col-lg-5">
+                                                <div class="card bg-success text-white" t-attf-style="height: #{150 + int(percentage['great'])}px;">
+                                                    <div class="card-body text-center">
+                                                        <img src="/rating/static/src/img/rating_10_white.png" style="height:40px" alt="Happy face"/>
+                                                    </div>
+                                                    <div class="card-body text-center">
+                                                        <h2 style="margin: 0">
+                                                            <b style="font-size: 30px">
+                                                                <t t-esc="percentage['great']" />
+                                                            </b>
+                                                            <small>%</small>
+                                                        </h2>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="col-lg-5">
-                                            <div class="card bg-success text-white">
-                                                <div class="card-body text-center">
-                                                    <img src="/rating/static/src/img/rating_10.png" style="height:60px" alt="Happy face"/>
-                                                </div>
-                                                <div class="card-body text-center">
-                                                    <h2 style="margin: 0">
-                                                        <b style="font-size: 60px">
-                                                            <t t-esc="percentage['great']" />
-                                                        </b>
-                                                        <small>%</small>
-                                                    </h2>
+                                            <div class="col-lg-4">
+                                                <div class="card bg-warning text-white" t-attf-style="height: #{150 + int(percentage['okay'])}px;">
+                                                    <div class="card-body text-center">
+                                                        <img src="/rating/static/src/img/rating_5_white.png" style="height:40px" alt="Neutral face"/>
+                                                    </div>
+                                                    <div class="card-body text-center">
+                                                        <h2 style="margin: 0">
+                                                            <b style="font-size: 30px">
+                                                                <t t-esc="percentage['okay']" />
+                                                            </b>
+                                                            <small>%</small>
+                                                        </h2>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="col-lg-3">
-                                            <div class="card bg-danger text-white">
-                                                <div class="card-body text-center">
-                                                    <img src="/rating/static/src/img/rating_1.png" style="height:40px" alt="Sad face"/>
-                                                </div>
-                                                <div class="card-body text-center">
-                                                    <h2 style="margin: 0">
-                                                        <b style="font-size: 40px">
-                                                            <t t-esc="percentage['bad']" />
-                                                        </b>
-                                                        <small>%</small>
-                                                    </h2>
+                                            <div class="col-lg-3">
+                                                <div class="card bg-danger text-white" t-attf-style="height: #{150 + int(percentage['bad'])}px;">
+                                                    <div class="card-body text-center">
+                                                        <img src="/rating/static/src/img/rating_1_white.png" style="height:40px" alt="Sad face"/>
+                                                    </div>
+                                                    <div class="card-body text-center">
+                                                        <h2 style="margin: 0">
+                                                            <b style="font-size: 30px">
+                                                                <t t-esc="percentage['bad']" />
+                                                            </b>
+                                                            <small>%</small>
+                                                        </h2>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
@@ -120,7 +122,7 @@
                                         <h3>The <t t-esc="len(ratings)"/> last feedbacks</h3>
                                         <div style="text-align:center">
                                             <t t-foreach="ratings" t-as="rating">
-                                                <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name"/>
+                                                <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name" width="48px" height="48px"/>
                                                 <t t-if="(rating_index+1) % 10 == 0">
                                                     <br/>
                                                 </t>
@@ -130,7 +132,7 @@
                                 </div>
                             </t>
                             <t t-if="len(ratings) == 0">
-                                <h4 style="text-align:center">This is no rating for this channel for now.</h4>
+                                <h4 style="text-align:center">There is no rating for this channel for now.</h4>
                             </t>
                         </div>
                         <div class="col-lg-4 mb32">
@@ -139,7 +141,7 @@
                                 <div class="media mt-3">
                                     <t t-if="user.image_small">
                                         <img t-att-src="user.image_small and ('data:image/png;base64,' + to_text(user.image_small)) or '/web/static/src/img/placeholder.png'"
-                                            class="rounded" t-att-alt="user.name"/>
+                                            class="rounded" style="padding-right: 8px;" t-att-alt="user.name"/>
                                     </t>
                                     <div class="media-body">
                                         <h5><t t-esc="user.name"/></h5>