From e717ccd353fbf03fb0640dee446cb72dcc58b125 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 22 Oct 2021 12:56:52 +0000
Subject: [PATCH] [IMP] website: redesign the toggle switch

This commit redesigns the toggle switch in website to make it clearer
and prettier.

task-2586313

closes odoo/odoo#77392

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/scss/website.editor.ui.scss    | 52 +++++++++----------
 .../views/website_navbar_templates.xml        |  2 +-
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index 0096c9c55b9..d646b7e4727 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -6,8 +6,8 @@
 }
 
 // INPUTS
-$o-we-switch-size: 2ex !default;
-$o-we-switch-inactive-color: #F7F7F7 !default;
+$o-we-switch-size: 1.2em !default;
+$o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
 .o_switch {
     display: flex;
     align-items: center;
@@ -18,45 +18,43 @@ $o-we-switch-inactive-color: #F7F7F7 !default;
         display: none;
 
         + span {
-            background-color: $o-we-switch-inactive-color;
-            box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color, 10%);
-            border-radius: 100rem;
-            height: $o-we-switch-size;
-            width: $o-we-switch-size * 1.8;
             margin-right: 0.5em;
-            display: inline-block;
-            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+            border-radius: $o-we-switch-size;
+            width: $o-we-switch-size * 1.7;
+            padding-left: 3px;
+            padding-right: 3px;
+            background-color: $o-we-switch-inactive-color;
+            font-size: $o-we-switch-size * 1.09;
+            line-height: $o-we-switch-size;
+            color: $o-we-switch-inactive-color;
+            transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
 
             &:after {
-                content: "";
-                background: white;
-                display: block;
-                width: $o-we-switch-size - 0.2;
-                height: $o-we-switch-size - 0.2;
-                margin-top: 0.1ex;
-                margin-left: 0.1ex;
-                border-radius: 100rem;
-                transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-                box-shadow: 0 1px 1px darken($o-we-switch-inactive-color, 35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color, 10%);
+                content: "\f057"; // fa-times-circle
+                font-family: 'FontAwesome';
+                color: white;
+                transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
             }
         }
 
-        &:checked+span {
-            box-shadow: none;
-            background: $o-we-color-success;
+        &:checked + span {
+            background: $o-brand-primary;
 
             &:after {
-                margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
+                content: "\f058"; // fa-check-circle
+                margin-left: ($o-we-switch-size * 1.7) - $o-we-switch-size;
             }
         }
     }
 
-    &.o_switch_danger {
-        >input {
-            &:not(:checked)+span {
-                box-shadow: none;
+    &.o_switch_danger_success {
+        > input {
+            &:not(:checked) + span {
                 background: $o-we-color-danger;
             }
+            &:checked + span {
+                background: $o-we-color-success;
+            }
         }
     }
 }
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 4297b442dc7..c241a634955 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -4,7 +4,7 @@
     <template id="website_publisher" name="Website Publisher">
         <t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
             <div t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
-                <label class="o_switch o_switch_danger js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
+                <label class="o_switch o_switch_danger_success js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
                     <input type="checkbox" t-att-checked="main_object.website_published"/>
                     <span/>
                     <span class="css_publish">Unpublished</span>