update

package.json

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

src/components/BxMiniWidjetUi/index.jsx

@@ -13,9 +13,34 @@ const BxMiniWidjetUi = ({
 	onClick,
 	position,
 }) => {
+	const colorTypeFunc = ({ widjetState, reason }) => {
+		console.log('color_type', `${widjetState}_${reason}`);
+		switch (`${widjetState}_${reason}`) {
+			case 'pending':
+				return {
+					backgroundColor: 'gray',
+					color: '#fff',
+				};
+				break;
+			case 'connected':
+				return '#a0c13d';
+				break;
+			case 'connected':
+				return '#a0c13d';
+				break;
+			default:
+				return {
+					backgroundColor: 'gray',
+					color: '#fff',
+				};
+				break;
+		}
+	};
+
 	return (
 		<BxMiniWidjetUiStyle
-			status={widjetState || ''}
+			// status={widjetState || ''}
+			status={colorTypeFunc({ reason, widjetState })}
 			onClick={onClick}
 			position={position}>
 			<div className='left'>
@@ -31,7 +56,8 @@ const BxMiniWidjetUi = ({
 				</div>
 			</div>
 			<div className='bottom'>
-				<BxMiniWidjetUiStyle.StatusLine status={widjetState || ''}>
+				<BxMiniWidjetUiStyle.StatusLine
+					status={colorTypeFunc({ reason, widjetState }) || ''}>
 					<p className='verison'>
 						v <span>{widjetVersion}</span>
 					</p>

src/components/BxMiniWidjetUi/style.js

@@ -4,14 +4,30 @@ import styled from 'styled-components';
 import CallIcon from '@mui/icons-material/Dialpad';
 import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
+const colorTypeFunc = (type) => {
+	switch (type) {
+		case 'pending':
+			return 'orange';
+			break;
+		case 'connected':
+			return '#a0c13d';
+			break;
+
+		default:
+			break;
+	}
+};
+
 const BxMiniWidjetUiStyle = styled.div`
 	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	background-color: ${({ status = '' }) =>
+	/* background-color: ${({ status = '' }) =>
 		status === 'pending'
 			? 'orange'
 			: status === 'connected'
 			? '#a0c13d'
-			: '#ccc'};
+			: '#ccc'}; */
+	/* background-color: ${({ status = '' }) => (status ? status : '#333')}; */
+	${({ status }) => (status ? status : {})}
 	height: 64px;
 	width: 64px;
 	border-radius: 13px;
@@ -82,17 +98,17 @@ BxMiniWidjetUiStyle.StatusLine = styled.div`
 	height: 100%;
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
-	background-color: ${({ status = '' }) =>
+	/* background-color: ${({ status = '' }) =>
 		status === 'pending'
 			? 'orange'
 			: status === 'connected'
 			? '#a0c13d'
-			: '#ccc'};
+			: '#ccc'}; */
+	${({ status }) => (status ? status : {})}
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
 	padding: 0 10px 0 0;
-	color: green;
 	.verison {
 		font-size: 10px;
 		font-weight: bold;

src/lib/boxDIaler.js

@@ -260,6 +260,7 @@ export class BoxDialer {
 			this.onSipStateChange[funcName](funcParam);
 		}
 	}
+
 	bxLog(...datas) {
 		console.log(`%c BXLOG:`, datas, 'background-color: red;');
 	}

src/root/index.jsx

@@ -69,13 +69,6 @@ const Root = ({ data, onSetDnd }) => {
 		data = result;
 	};
 
-	// console.log(phoneModal, modalState, 'phoneModal');
-
-	// console.log(
-	// 	boxDialer.oSipSessionCall.o_session.o_stream_remote.id,
-	// 	'oSipSessionCall',
-	// );
-
 	const selectWidjetType = (type) => {
 		switch (type) {
 			case 'bxmini':