[IMP] im_livechat: style of chat and kanban view of livechat channels

- restyle the search field of livechat, more space between contacts, etc.
- kanban view should fit the style of new kanban views
- new images for status

5 files changed, 35 insertions, 26 deletions

diff --git a/addons/im_chat/static/src/css/im_chat_backend.css b/addons/im_chat/static/src/css/im_chat_backend.css
index d9f7a70b955..d01577eb56a 100644
--- a/addons/im_chat/static/src/css/im_chat_backend.css
+++ b/addons/im_chat/static/src/css/im_chat_backend.css
@@ -1,10 +1,12 @@
-
 .oe_im {
     position: fixed;
-    background-color: #E8EBEF;
-    width: 220px;
+    background-color: #eaeaea;
+    width: 250px;
     border-left: 1px solid #AEB9BD;
     z-index: 500;
+    -webkit-box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
+    -moz-box-shadow:    -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
+    box-shadow:         -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
 }
 
 @media print {
@@ -24,25 +26,26 @@
 /* search stuff */
 .oe_im_frame_header {
     position: relative;
-    background: #dedede;
-    background: -moz-linear-gradient(#fcfcfc, #dedede);
-    background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
-    border-bottom: 1px solid border-color !important;
-    padding: 5px;
+    padding: 16px;
 }
 .oe_im_frame_header .oe_im_searchbox {
-    width: 168px;
+    width: 200px;
     padding: 1px 21px 1px 19px;
     font-size: 13px;
-    -moz-border-radius: 13px;
-    -webkit-border-radius: 13px;
-    border-radius: 13px;
+    border: none;
+    border-bottom: 1px solid #c6c6c6;
+    background: none;
+    margin-left: 20px;
+    height: 38px;
+}
+.oe_im_frame_header .oe_im_searchbox:focus {
+    outline: none;
 }
 .oe_im_frame_header .oe_im_search_icon {
     position: absolute;
     color: #888;
-    top: 9px;
-    left: 10px;
+    top: 28px;
+    left: 8px;
     font-size: 16px;    
     font-weight: 300 !important;
 }
@@ -68,10 +71,10 @@
 }
 .oe_im_user {
     position: relative;
-    padding: 2px 6px;
+    padding: 2px 8px;
     cursor: pointer;
     font-size: 13px;
-    margin-bottom: 3px;
+    margin-bottom: 10px;
 }
 .oe_im_user:hover {
   background: lightGrey;
@@ -108,4 +111,4 @@
     height: 11px;
     vertical-align: middle;
     border: 0;
-}
\ No newline at end of file
+}
diff --git a/addons/im_chat/static/src/css/im_chat_common.css b/addons/im_chat/static/src/css/im_chat_common.css
index 1ee017e00e6..1ad2981eb41 100644
--- a/addons/im_chat/static/src/css/im_chat_common.css
+++ b/addons/im_chat/static/src/css/im_chat_common.css
@@ -6,7 +6,6 @@
   color: #4c4c4c;
   font-size: 13px;
   background: white;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 }
 
 /* button */
@@ -39,16 +38,23 @@
     overflow: hidden;
     margin-bottom: 5px;
     margin-right: 6px;
-    background: rgba(60, 60, 60, 0.8);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
-    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+    background-color: #fff;
+    border: 1px solid #DEDEDE;
     width: 240px;
     z-index:500;
 }
+@media screen and (max-width:360px) {
+    .oe_im_chatview {
+        width: 100%;
+        margin-right: 0;
+    }
+    .oe_im_chatview .oe_im_chatview_content {
+        width: 100% !important;
+    }
+    .oe_im_chatview .oe_im_chatview_input {
+        width: 100% !important;
+    }
+}
 .oe_im_chatview .oe_im_chatview_disconnected {
     display:none;
     z-index: 100;
diff --git a/addons/im_chat/static/src/img/green.png b/addons/im_chat/static/src/img/green.png
index 01fb373c251..0700a5ef71b 100644
--- a/addons/im_chat/static/src/img/green.png
+++ b/addons/im_chat/static/src/img/green.png
diff --git a/addons/im_chat/static/src/img/yellow.png b/addons/im_chat/static/src/img/yellow.png
index 4ee90117570..726570e518f 100644
--- a/addons/im_chat/static/src/img/yellow.png
+++ b/addons/im_chat/static/src/img/yellow.png
diff --git a/addons/im_chat/static/src/xml/im_chat.xml b/addons/im_chat/static/src/xml/im_chat.xml
index 80447cc38d0..eb479863b3e 100644
--- a/addons/im_chat/static/src/xml/im_chat.xml
+++ b/addons/im_chat/static/src/xml/im_chat.xml
@@ -96,7 +96,7 @@
 <t t-name="im_chat.ImTopButton">
     <li t-att-title='_t("Display Instant Messaging")'>
         <a href="#">
-              <i id="oe_topbar_imbutton_icon" class="fa fa-comments-o"/>
+              <i id="oe_topbar_imbutton_icon" class="fa fa-comments"/>
         </a>
     </li>
 </t>