Merge pull request #6 from chrisloarryn/feat-placeholder

feat: custom placeholder

Author: awran5

src/Components/FloatingWhatsapp.tsx

@@ -11,6 +11,7 @@ interface FloatingWhatsAppProps {
   darkMode?: boolean
   styles?: React.CSSProperties
   className?: string
+  placeholder?: string
 }
 
 const time = new Date().toTimeString().split(`:`).slice(0, 2).join(`:`)
@@ -25,7 +26,8 @@ function FloatingWhatsApp({
   chatMessage = 'Hello there! 🤝 \nHow can we help?',
   darkMode = false,
   styles = {},
-  className = ''
+  className = '',
+  placeholder = 'Type a message..'
 }: FloatingWhatsAppProps): JSX.Element {
   const [isOpen, setOpen] = useState(false)
   const [message, setMessage] = useState('')
@@ -70,7 +72,7 @@ function FloatingWhatsApp({
           <form onSubmit={handleSubmit}>
             <input
               className={`${css.input} ${isArabic(message) ? css.arabic : ''}`}
-              placeholder='Type a message..'
+              placeholder={placeholder}
               onChange={handleChange}
               value={message}
               dir='auto'

src/styles.module.css

@@ -69,7 +69,7 @@
   height: 0;
   opacity: 0;
   transition: height 0.2s ease-out;
-  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);
+  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 50%);
 }
 
 .whatsappChatBox.open {
@@ -180,6 +180,7 @@
 }
 
 .chatBody {
+  height: inherit;
   padding: 20px;
   background-size: cover;
   background-repeat: repeat;