update verison: 0.8.7

package-lock.json

 {
 	"name": "boxdialer",
-	"version": "0.8.5",
+	"version": "0.8.6",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "boxdialer",
-			"version": "0.8.5",
+			"version": "0.8.6",
 			"license": "ISC",
 			"dependencies": {
 				"@emotion/react": "^11.11.1",

package.json

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

src/components/BxMiniWidjetUi/index.jsx

@@ -21,10 +21,13 @@ const BxMiniWidjetUi = ({
 			<div className='left'>
 				<p className='title'>{phoneNumber}</p>
 				<div>
-					<BxMiniWidjetUiStyle.ReasonTest className='status' reason={reason}>
-						<span>{reason}</span>
-					</BxMiniWidjetUiStyle.ReasonTest>
-					<TimerUi reason={reason} time={leftTime} />
+					{reason !== 'free' ? (
+						<TimerUi reason={reason} time={leftTime} />
+					) : (
+						<BxMiniWidjetUiStyle.ReasonTest className='status' reason={reason}>
+							<span>{reason}</span>
+						</BxMiniWidjetUiStyle.ReasonTest>
+					)}
 				</div>
 			</div>
 			<div className='bottom'>

src/components/BxMiniWidjetUi/style.js

@@ -10,11 +10,15 @@ const BxMiniWidjetUiStyle = styled.div`
 		padding: 0;
 		box-sizing: border-box;
 	}
-
-	height: 90px;
-	width: 80px;
+	background-color: ${({ status = '' }) =>
+		status === 'pending'
+			? 'orange'
+			: status === 'connected'
+			? '#a0c13d'
+			: '#ccc'};
+	height: 64px;
+	width: 64px;
 	border-radius: 13px;
-	background-color: #164e63e6;
 	cursor: pointer;
 	color: white;
 	z-index: 999;
@@ -68,7 +72,6 @@ BxMiniWidjetUiStyle.ReasonTest = styled.div`
 `;
 BxMiniWidjetUiStyle.StatusLine = styled.div`
 	height: 100%;
-	background-color: ${({ backColor }) => backColor};
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
 	background-color: ${({ status = '' }) =>

src/components/DefaultWidjetUi/index.jsx

@@ -29,9 +29,7 @@ const DefaultWidjetUi = ({
 				<DialPadIcon />
 			</div>
 			<div className='bottom'>
-				<DefaultWidjetStyle.StatusLine
-				status={widjetState}
-				>
+				<DefaultWidjetStyle.StatusLine status={widjetState}>
 					<p className='verison'>v {widjetVersion}</p>
 				</DefaultWidjetStyle.StatusLine>
 			</div>

src/components/DropDown/index.jsx

+/** @format */
+
+import React, { useState } from 'react';
+import DropDownStyle from './style';
+
+const DropDown = ({ reasons, reason, selectFunc }) => {
+	const [visible, setVisible] = useState(false);
+
+	return (
+		<DropDownStyle visible={visible} onClick={() => setVisible(!visible)}>
+			<DropDownStyle.Text>{reason}</DropDownStyle.Text>
+			<DropDownStyle.DropDown visible={visible} className={'nocopy'}>
+				{reasons.map((value, index) => (
+					<div className='select' key={index} onClick={() => selectFunc(value)}>
+						{value}
+					</div>
+				))}
+			</DropDownStyle.DropDown>
+			<DropDownStyle.Window
+				visible={visible}
+				onClick={() => setVisible(false)}
+			/>
+		</DropDownStyle>
+	);
+};
+
+export default DropDown;

src/components/DropDown/style.js

+/** @format */
+
+import styled from 'styled-components';
+
+const DropDownStyle = styled.div`
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+`;
+DropDownStyle.Text = styled.div``;
+DropDownStyle.Window = styled.div`
+	display: ${({ visible }) => (visible ? 'block' : 'none')};
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+`;
+DropDownStyle.DropDown = styled.div`
+	z-index: 99999999999;
+	border-radius: 10px;
+	background-color: #fff;
+	position: absolute;
+	bottom: 40px;
+	left: 50%;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	width: 150px;
+	transition: 0.2s;
+	padding: 10px 0;
+	.select {
+		padding: 5px 10px;
+		white-space: nowrap;
+		color: #111827;
+		font-size: 20px;
+		:hover {
+			background-color: #e9e9e9;
+		}
+	}
+	${({ visible }) =>
+		visible
+			? {
+					opacity: '1',
+					transform: 'scale(1) translate(-50%, 0)',
+			  }
+			: {
+					opacity: '0',
+					transform: 'scale(0.9) translate(-50%, 0)',
+			  }}
+`;
+
+export default DropDownStyle;

src/components/ModalPhoneNumpad/index.jsx

@@ -6,6 +6,7 @@ import numbers from './numbers';
 import DropDownTailwind from '../TailwindComponents/DropDown';
 import CallIcon from '@mui/icons-material/Call';
 import { toast } from 'react-hot-toast';
+import DropDown from '../DropDown';
 
 const ModalPhoneNumpad = ({
 	phoneModal,
@@ -140,6 +141,7 @@ const ModalPhoneNumpad = ({
 			<ModalPhoneNumpadStyle.ButtonArea>
 				{numbers?.map((mapItem) => (
 					<NumberButton
+						className='nocopy'
 						key={mapItem.id}
 						onClick={() => {
 							mapItem.type === 'number' &&
@@ -155,8 +157,13 @@ const ModalPhoneNumpad = ({
 				))}
 				{!modalState.bool ? (
 					<>
-						<NumberButton style={{ gridColumn: '1/3' }}>
-							<DropDownTailwind
+						<NumberButton style={{ gridColumn: '1/3' }} className='nocopy'>
+							{/* <DropDownTailwind
+								selectFunc={onSetDnd}
+								reasons={reasons}
+								reason={reason}
+							/> */}
+							<DropDown
 								selectFunc={onSetDnd}
 								reasons={reasons}
 								reason={reason}

src/index.css

+.nocopy {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
\ No newline at end of file