[FIX] im_livechat: apply internal livechat window style to external livechat window

This commit applies missing style rules to external livechat window
in order to make it look like the internal version of the livechat window.

Task ID-2301261
PR odoo/odoo#60549

3 files changed, 55 insertions, 5 deletions

diff --git a/addons/im_livechat/static/src/legacy/public_livechat.scss b/addons/im_livechat/static/src/legacy/public_livechat.scss
index 856889feb66..3710e11be8d 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat.scss
+++ b/addons/im_livechat/static/src/legacy/public_livechat.scss
@@ -98,7 +98,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
             flex: 0 0 auto;
             .o_thread_window_close, .o_thread_window_expand {
                 color: white;
-                padding: 3px;
+                padding: 0px 3px;
                 margin-left: 5px;
                 @include o-hover-opacity(0.7, 1);
             }
@@ -570,6 +570,20 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
         display: none;
     }
 
+    .btn {
+        color: #FFFFFF;
+        background-color: #30908e;
+        border-color: #2d8685;
+        border: 1px solid transparent;
+    }
+
+    .btn-sm {
+        padding: 0.0625rem 0.3125rem;
+        font-size: 0.75rem;
+        line-height: 1.5;
+        border-radius: 0.2rem;
+    }
+
     .o_livechat_rating {
         /* Livechat Rating : feedback smiley */
         flex: 1 1 auto;
@@ -580,7 +594,31 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
         .o_livechat_email {
             font-size: 12px;
             > div {
+                display: flex;
                 padding: 5px 0;
+                input {
+                    display: block;
+                    width: 100%;
+                    height: calc(1.5em + 0.75rem + 2px);
+                    padding: 0.375rem 0.75rem;
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    line-height: 1.5;
+                    color: #495057;
+                    background-color: #FFFFFF;
+                    background-clip: padding-box;
+                    border: 1px solid #CED4DA;
+                }
+                button {
+                    display: inline-block;
+                    font-weight: 400;
+                    text-align: center;
+                    vertical-align: middle;
+                    user-select: none;
+                    padding: 0.375rem 0.75rem;
+                    font-size: 0.875rem;
+                    line-height: 1.5;
+                }
             }
         }
 
@@ -610,7 +648,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
 
         /* feedback reason */
         .o_livechat_rating_reason {
-            margin: 10px 0;
+            margin: 10px 0px 25px 0px;
             display: none; /* hidden by default */
 
             > textarea {
@@ -624,6 +662,10 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
             float: right;
         }
     }
+
+    .o_composer_text_field {
+        line-height: 1.3em;
+    }
 }
 
 .o_livechat_operator_avatar {
diff --git a/addons/im_livechat/static/src/legacy/public_livechat.xml b/addons/im_livechat/static/src/legacy/public_livechat.xml
index e582fea12e9..821edc30cfb 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat.xml
+++ b/addons/im_livechat/static/src/legacy/public_livechat.xml
@@ -16,7 +16,7 @@
             </div>
             <div class="o_livechat_rating_reason">
                 <textarea id="reason" placeholder="Explain your note"></textarea>
-                <div class="o_livechat_rating_reason_button pb-3">
+                <div class="o_livechat_rating_reason_button">
                     <input type="button" class="btn btn-primary btn-sm o_rating_submit_button" value="Send" />
                 </div>
             </div>
diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
index f01d7259805..dddf5baa73f 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
@@ -1,8 +1,11 @@
-
 .text-muted {
   color: gray('600');
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -17,11 +20,16 @@
       text-decoration: none;
       font-weight: bold;
       &:before {
-        content: "X";
+        content: "\00d7";
+        font-size: initial;
       }
     }
     > span {
       margin: auto 0;
     }
   }
+
+  .o_email_chat_button:after {
+    content:' \27A4';
+  }
 }