[IMP] website: keep social media popover on one row

Before this commit, the social media popover (used in forum but
available everywhere) may break over multiple rows if used on a relative
positioned small button. This however never occurred in standard <= 12.0
so we will consider this not a bug fix. This will however occur with
the upcoming forum refactoring, so we needed a fix for master.

This commit forces the social icons on one row and take the opportunity
to refactor the template to make a simpler and more beautiful popover
by using conventional icons and social media own colors.

closes odoo/odoo#29327

addons/website/static/src/scss/primary_variables.scss

@@ -31,6 +31,13 @@ $o-user-color-palette: () !default;
 // palette.
 $o-user-theme-color-palette: () !default;
 
+$o-social-colors: (
+    'facebook': #3B5999,
+    'twitter': #55ACEE,
+    'linkedin': #0077B5,
+    'google-plus': #DD4B39,
+);
+
 //------------------------------------------------------------------------------
 // Fonts
 //------------------------------------------------------------------------------

addons/website/static/src/scss/website.scss

@@ -1066,3 +1066,7 @@ table.table_desc tr td {
         background-color: rgba($value, 0.1);
     }
 }
+
+@each $media, $color in $o-social-colors {
+    @include text-emphasis-variant(".text-#{$media}", $color);
+}

addons/website/static/src/xml/website.share.xml

@@ -1,15 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="website.social_hover">
-        <div class="row clearfix" style='font-size:16px'>
-            <div class="col-12 css_editable_mode_hidden">
-                <t t-foreach="medias" t-as="media">
-                    <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-att-aria-label="media" t-att-title="media">
-                        <span class="fa fa-square fa-stack-2x"></span>
-                        <span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span>
-                    </a>
-                </t>
-            </div>
+        <div class="text-nowrap css_editable_mode_hidden">
+            <t t-foreach="medias" t-as="media">
+                <a href="#"
+                    t-attf-class="fa fa-3x fa-#{media}-square text-#{media} oe_social_#{media}"
+                    t-att-title="media"
+                    t-att-aria-label="media"/>
+            </t>
         </div>
     </t>
 </templates>