Merge pull request idoco#22 from idoco/styling-fixes

New styling fixes

Author: idoco

demo.html

@@ -37,6 +37,10 @@ <h1>Intergram Demo Page</h1>
 <script>
     window.intergramId = 312940879;
     window.intergramServer = window.location.origin;
+    window.intergramCustomizations = {
+        closedChatAvatarUrl: 'media/demo_avatar.jpg',
+        closedStyle: 'button', // button or chat
+    };
 </script>
 <script src="/js/widget.js"></script>
 

media/avatar.jpg

@@ -8,7 +8,7 @@ export default class ChatTitleMsg extends Component {
                 <div 
                     className="desktop-closed-message"
                     style={{
-                        background: '#1f8ceb',
+                        background: conf.mainColor,
                         letterSpacing: '1px',
                         color: '#fff',
                         display: 'block',
@@ -32,9 +32,9 @@ export default class ChatTitleMsg extends Component {
                             right: '-10px',
                             borderTop: '10px solid transparent',
                             borderBottom: '10px solid transparent',
-                            borderLeft: '10px solid #1f8ceb'
+                            borderLeft: '10px solid '+conf.mainColor
                         }}
-                    ></div>
+                    />
                 </div>
                 <div 
                     className="desktop-closed-message-avatar"
@@ -48,7 +48,7 @@ export default class ChatTitleMsg extends Component {
                         width: '60px',
                         borderRadius: '999px',
                         boxShadow: '#8e8d8d -3px 2px 20px',
-                        border: '2px solid #1f8ceb'
+                        border: '2px solid '+conf.mainColor
                     }}
                 >
                     {(conf.closedChatAvatarUrl === '') ?

src/widget/chat-title-msg.js

@@ -5,7 +5,7 @@ export const defaultConfiguration = {
     closedStyle: 'chat', // button or chat
     closedChatAvatarUrl: '', // only used if closedStyle is set to 'chat'
     cookieExpiration: 1, // in days. Once opened, closed chat title will be shown as button (when closedStyle is set to 'chat')
-    introMessage: 'Hello! How can we help you?',
+    introMessage: 'Hello! How can I help you?',
     autoResponse: 'Looking for the first available admin (It might take a minute)',
     autoNoResponse: 'It seems that no one is available to answer right now. Please tell us how we can ' +
     'contact you, and we will get back to you as soon as we can.',

src/widget/default-configuration.js

@@ -56,7 +56,6 @@ export const desktopTitleStyle = {
     fontFamily: 'Lato, sans-serif',
     color: '#fff',
     cursor: 'pointer',
-    borderBottom: '1px solid #0078e0'
 };
 
 export const mobileTitleStyle = {

src/widget/style.js

@@ -30,7 +30,7 @@ export default class Widget extends Component {
         if (!isChatOpen && (isMobile || conf.alwaysUseFloatingButton)) {
             wrapperStyle = { ...mobileClosedWrapperStyle}; // closed mobile floating button
         } else if (!isMobile){
-            wrapperStyle = (conf.closedStyle === 'button' || isChatOpen || this.wasChatOpened()) ? 
+            wrapperStyle = (conf.closedStyle === 'chat' || isChatOpen || this.wasChatOpened()) ?
                 (isChatOpen) ? 
                     { ...desktopWrapperStyle, ...wrapperWidth} // desktop mode, button style
                     :
@@ -51,7 +51,7 @@ export default class Widget extends Component {
 
                     :
 
-                    (conf.closedStyle === 'button' || isChatOpen || this.wasChatOpened()) ?
+                    (conf.closedStyle === 'chat' || isChatOpen || this.wasChatOpened()) ?
                         <div style={{background: conf.mainColor, ...desktopTitleStyle}} onClick={this.onClick}>
                             <div style={{padding: '4px 30px 0px 0px'}}>
                                 {isChatOpen ? conf.titleOpen : conf.titleClosed}