update version: 0.6.7

package.json

 {
 	"name": "boxdialer",
-	"version": "0.6.6",
+	"version": "0.6.7",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/TailwindComponents/DropDown.jsx

@@ -2,57 +2,67 @@
 
 import { Menu, Transition } from '@headlessui/react';
 import React, { Fragment } from 'react';
+import { styled } from 'styled-components';
 
 function classNames(...classes) {
 	return classes.filter(Boolean).join(' ');
 }
+
+const Container = styled.div`
+	
+`;
+
 const DropDownTailwind = ({ reasons, reason, selectFunc }) => {
 	return (
-		<Menu as='div' className='text-left w-full h-full'>
-			<div className='w-full'>
-				<Menu.Button
-					style={{
-						backgroundColor: '#5e5e5e',
-						width: '100%',
-						height: '30px',
-						color: 'white',
-						display: 'flex',
-						alignItems: 'center',
-					}}
-					className='inline-flex justify-center rounded-md font-semibold text-gray-900 shadow-sm hover:bg-gray-50 gap-1 border-0 text-sm'>
-					{reason ? reason : 'Nothing'}
-				</Menu.Button>
-			</div>
+		<Container>
+			<Menu as='div' className='text-left w-full h-full'>
+				<div className='w-full'>
+					<Menu.Button
+						style={{
+							backgroundColor: '#5e5e5e',
+							width: '100%',
+							height: '30px',
+							color: 'white',
+							display: 'flex',
+							alignItems: 'center',
+						}}
+						className='inline-flex justify-center rounded-md font-semibold text-gray-900 shadow-sm hover:bg-gray-50 gap-1 border-0 text-sm'>
+						{reason ? reason : 'Nothing'}
+					</Menu.Button>
+				</div>
 
-			{reasons && reasons.length && (
-				<Transition
-					as={Fragment}
-					enter='transition ease-out duration-100'
-					enterFrom='transform opacity-0 scale-95'
-					enterTo='transform opacity-100 scale-100'
-					leave='transition ease-in duration-75'
-					leaveFrom='transform opacity-100 scale-100'
-					leaveTo='transform opacity-0 scale-95'>
-					<Menu.Items className='absolute left-1 bottom-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
-						<div className='py-3 flex flex-col'>
-							{reasons.map((value, index) => (
-								<Menu.Item onClick={() => selectFunc(value)} key={index}>
-									{({ active }) => (
-										<p
-											className={classNames(
-												active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-												'block px-5 py-1 text-lg',
-											)}>
-											{value}
-										</p>
-									)}
-								</Menu.Item>
-							))}
-						</div>
-					</Menu.Items>
-				</Transition>
-			)}
-		</Menu>
+				{reasons && reasons.length && (
+					<Transition
+						as={Fragment}
+						enter='transition ease-out duration-100'
+						enterFrom='transform opacity-0 scale-95'
+						enterTo='transform opacity-100 scale-100'
+						leave='transition ease-in duration-75'
+						leaveFrom='transform opacity-100 scale-100'
+						leaveTo='transform opacity-0 scale-95'>
+						<Menu.Items className='absolute left-1 bottom-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
+							<div className='py-3 flex flex-col'>
+								{reasons.map((value, index) => (
+									<Menu.Item onClick={() => selectFunc(value)} key={index}>
+										{({ active }) => (
+											<p
+												className={classNames(
+													active
+														? 'bg-gray-100 text-gray-900'
+														: 'text-gray-700',
+													'block px-5 py-1 text-lg',
+												)}>
+												{value}
+											</p>
+										)}
+									</Menu.Item>
+								))}
+							</div>
+						</Menu.Items>
+					</Transition>
+				)}
+			</Menu>
+		</Container>
 	);
 };
 

src/components/WidjetButton/index.jsx

@@ -167,6 +167,7 @@ const WidjetButton = ({ data, onSetDnd, position }) => {
 	return (
 		<>
 			<WidjetBlock
+				className='tailwindGlobalCss'
 				id={'responsible-button'}
 				onClick={() => {
 					phoneModal ? setPhoneModal(false) : setPhoneModal(true);

src/index.css

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
\ No newline at end of file

src/lib/boxDIaler.js

@@ -528,10 +528,12 @@ export class BoxDialer {
 			},
 		});
 	}
+
 	closeButtonClick() {
 		console.log('closeButtonClick');
 		this.stopCall();
 	}
+
 	transferButtonClick(number) {
 		if (this.oSipSessionCall) {
 			if (this.oSipSessionCall.transfer(number) != 0) {