issue ann0nip#26 : Change widget position

From a UX point of view, it is recommended to keep chat icons on the bottom right corner of your website, as this is a familiar and usual spot where people naturally notice and navigate.

However, UX is subjective. This PR added support issue ann0nip#26 .

I would recommend the WA button to have a high contrast background `#5ad167` and the WA chat icon in `white` in light mode situations and vice versa --> issue ann0nip#27

src/components/app/app.component.jsx

@@ -1,5 +1,4 @@
 import React, { useContext, Fragment, useEffect } from 'react';
-
 import { ChatContext } from '../../contexts/chat.context';
 import ChatBox from '../chat-box/chat-box.component';
 import Header from '../header/header.component';
@@ -8,6 +7,7 @@ import WaButton from '../wa-button/wa-button.component';
 import styles from './app.module.css';
 
 const App = (props) => {
+    console.log("🚀 ~ file: app.component.jsx:10 ~ App ~ props:", props)
     const { isChatOpen, setIsChatOpen } = useContext(ChatContext);
     useEffect(() => {
         if (props.open) {
@@ -20,13 +20,14 @@ const App = (props) => {
             <div
                 className={`${styles.root} ${
                     isChatOpen ? styles.open : styles.close
-                }`}
+                } ${props.position === 'left' ? styles.positionLeft : styles.positionRight} ` }
             >
+
                 <Header {...props} />
                 <ChatBox {...props} />
                 <SendButton {...props} />
             </div>
-            <WaButton />
+            <WaButton {...props} />
         </Fragment>
     );
 };

src/components/app/app.module.css

@@ -8,11 +8,19 @@
     transform: translate3d(0px, 0px, 0px);
     touch-action: auto;
     display: none;
-    position: fixed;
     bottom: 110px;
+    position: fixed;
+
+}
+
+.positionRight{
     right: 25px;
 }
 
+.positionLeft{
+    left: 25px;
+}
+
 .open {
     display: flex;
     animation: customTransition 250ms ease-in-out both;

src/components/wa-button/wa-button.component.jsx

@@ -3,15 +3,21 @@ import { FaWhatsapp } from 'react-icons/fa';
 import { ChatContext } from '../../contexts/chat.context';
 import styles from './wa-button.module.css';
 
-const WaButton = () => {
+const defaultProps = {
+    position: 'right',
+};
+
+const WaButton = ({
+    position = defaultProps.position
+}) => {
     const { isChatOpen, setIsChatOpen } = useContext(ChatContext);
 
     const handleOpen = () => {
         setIsChatOpen(!isChatOpen);
     };
 
     return (
-        <div className={styles.root} onClick={handleOpen}>
+        <div className={`${styles.root}  ${position === 'left' ? styles.positionLeft : styles.positionRight} ` } onClick={handleOpen}>
             <FaWhatsapp />
         </div>
     );

src/components/wa-button/wa-button.module.css

@@ -17,11 +17,18 @@
   -webkit-box-pack: center;
   position: fixed;
   bottom: 25px;
-  right: 25px;
   transition: 0.2s ease;
 
 }
 
+.positionRight{
+  right: 25px;
+}
+
+.positionLeft{
+  left: 25px;
+}
+
 .root:hover {
   background-color: #5ad167;
 }