update-

package.json

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

src/components/CallHistoryInputDropdown/index.jsx

@@ -36,16 +36,16 @@ const CallHistoryInputDropdown = ({
 			{Boolean(call_history.length) && (
 				<>
 					<ModalDropDown visiblevalue={modal}>
-						<ModalDropDown.Inset
-							id='data'
-							hoverBool={call_history.length - numberSelectHistory === index}>
+						<ModalDropDown.Inset id='data'>
 							{call_history.reverse().map((value, index) => (
-								<p
-									className='item'
+								<ModalDropDown.Item
 									key={index}
-									onClick={() => selectFuncInset(value)}>
+									onClick={() => selectFuncInset(value)}
+									hoverBool={
+										call_history.length - numberSelectHistory === index
+									}>
 									{value}
-								</p>
+								</ModalDropDown.Item>
 							))}
 						</ModalDropDown.Inset>
 					</ModalDropDown>

src/components/CallHistoryInputDropdown/style.js

@@ -79,17 +79,6 @@ ModalDropDown.Inset = styled.div`
 	width: 100%;
 	height: 100%;
 	overflow-y: scroll;
-	.item {
-		font-size: 18px;
-		transition: 0.2s;
-		padding: 5px 2px;
-		margin: 3px 0;
-		border-radius: 10px;
-		:hover {
-			background-color: #00000014;
-		}
-		background-color: ${({ hoverBool }) => (hoverBool ? '#00000014' : '')};
-	}
 	::-webkit-scrollbar {
 		width: 5px;
 	}
@@ -110,6 +99,17 @@ ModalDropDown.Inset = styled.div`
 		background: #555;
 	}
 `;
+ModalDropDown.Item = styled.p`
+	font-size: 18px;
+	transition: 0.2s;
+	padding: 5px 2px;
+	margin: 3px 0;
+	border-radius: 10px;
+	:hover {
+		background-color: #00000014;
+	}
+	background-color: ${({ hoverBool }) => (hoverBool ? '#00000014' : '')};
+`;
 ModalDropDown.FullWindow = styled.div`
 	display: ${({ visiblevalue }) => (visiblevalue ? 'block' : 'none')};
 	position: fixed;