update-

src/components/DropDown/index.jsx

@@ -12,7 +12,10 @@ const DropDown = ({ reasons, reason, selectFunc }) => {
 			className='nocopy'>
 			<DropDownStyle.Text>
 				{/* <Text id={reason.toUpperCase()} /> */}
-				{translator.translate(reason.toUpperCase())}
+				<span>{translator.translate('STATUS')}: </span>
+				<span className='status'>
+					{translator.translate(reason.toUpperCase())}
+				</span>
 			</DropDownStyle.Text>
 			<DropDownStyle.DropDown visiblevalue={visible} className={'nocopy'}>
 				{reasons.map((value, index) => (

src/components/DropDown/style.js

@@ -3,11 +3,12 @@
 import styled from 'styled-components';
 
 const DropDownStyle = styled.div`
+	grid-column: 1/4;
 	width: 100%;
 	height: 100%;
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: flex-start;
 	position: relative;
 `;
 DropDownStyle.Text = styled.div`
@@ -15,6 +16,9 @@ DropDownStyle.Text = styled.div`
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
+	.status {
+		color: orange;
+	}
 `;
 DropDownStyle.Window = styled.div`
 	display: ${({ visiblevalue }) => (visiblevalue == 1 ? 'block' : 'none')};
@@ -29,7 +33,7 @@ DropDownStyle.DropDown = styled.div`
 	border-radius: 10px;
 	background-color: #fff;
 	position: absolute;
-	bottom: 40px;
+	bottom: 25px;
 	left: 50%;
 	display: flex;
 	flex-direction: column;

src/components/ModalPhoneNumpad/index.jsx

@@ -9,6 +9,7 @@ import DropDown from '../DropDown';
 import { CommentsDisabledOutlined } from '@mui/icons-material';
 import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
 import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey';
+import { Text, useTranslator } from '@eo-locale/react';
 const ModalPhoneNumpad = ({
 	phoneModal,
 	modalState,
@@ -26,7 +27,7 @@ const ModalPhoneNumpad = ({
 	const [call_history, setCall_history] = useState([]);
 	const [numberSelectHistory, setNumberSelectHistory] = useState(0);
 	const [exNum, setExNum] = useState();
-
+	const translator = useTranslator();
 	useEffect(() => {
 		let currentCalls = localStorage.getItem('callhistory')
 			? JSON.parse(localStorage.getItem('callhistory'))
@@ -255,20 +256,14 @@ const ModalPhoneNumpad = ({
 				))}
 				{!modalState.bool ? (
 					<>
-						<NumberButton className='nocopy'>
-							<DropDown
-								selectFunc={onSetDnd}
-								reasons={reasons}
-								reason={reason}
-							/>
-						</NumberButton>
 						<NumberButton
-							style={{ gridColumn: '2/4' }}
+							style={{ gridColumn: '1/4' }}
 							status={dynamicValue}
 							type={'call_button'}>
 							<NumberButton.CallButton exNum={exNum}>
 								<div className='left' onClick={() => callButton()}>
 									<CallIcon className='callIcon' />
+									<p className='call_text'>{translator.translate('CALL')}</p>
 								</div>
 								<div className='right' onClick={() => setExNum(!exNum)}>
 									<KeyboardControlKeyIcon className='icon' />
@@ -298,6 +293,7 @@ const ModalPhoneNumpad = ({
 						<div style={{ height: '33px' }}></div>
 					</>
 				)}
+				<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
 			</ModalPhoneNumpadStyle.ButtonArea>
 		</ModalPhoneNumpadStyle>
 	);

src/components/ModalPhoneNumpad/style.js

@@ -105,7 +105,9 @@ const NumberButton = styled.div`
 				: status === 'connected' && '#a0c13d'
 			: '#0000007d'};
 	transition: 0.3s;
-
+	.callIcon {
+		color: #0000007d;
+	}
 	:hover {
 		.callIcon {
 			animation: tilt-shaking 0.5s;
@@ -133,30 +135,42 @@ NumberButton.CallButton = styled.div`
 	width: 100%;
 	height: 100%;
 	display: grid;
-	grid-template-columns: repeat(1fr, 4);
+	grid-template-columns: repeat(1fr, 3);
 	position: relative;
 
 	.left {
-		grid-column: 1/4;
+		grid-column: 1/3;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		gap: 10px;
+	}
+	.call_text {
+		color: #0000007d;
+		padding: 0;
+		margin: 0;
+		font-size: 16px;
 	}
 	.right {
-		grid-column: 4/5;
+		grid-column: 3/4;
 		border-top-right-radius: 20px;
 		border-bottom-right-radius: 20px;
-		background-color: #d9d9d9;
 		display: flex;
 		align-items: center;
-		justify-content: center;
+
 		.icon {
-			margin: 0;
+			margin: 0 auto;
 			padding: 0;
 			color: #000;
 			transition: 0.2s;
 			transform: ${({ exNum }) => (exNum ? 'rotate(177deg)' : 'rotate(0deg)')};
 		}
+		::before {
+			content: '';
+			background: #0000007d;
+			width: 1px;
+			height: 70%;
+		}
 	}
 `;
 NumberButton.CallButtonModal = styled.div`
@@ -170,6 +184,7 @@ NumberButton.CallButtonModal = styled.div`
 	border-radius: 10px;
 	padding: 3px;
 	transition: 0.1s;
+
 	${({ visiblevalue }) =>
 		visiblevalue
 			? {