Dtmf styling

src/Components/Phone/phone.tsx

@@ -5,7 +5,7 @@ import Button from './Button/button';
 import DeviceState from './display-device-state';
 import DtmfButtons from './DtmfButtons/dtmf-buttons';
 
-export default function Phone({voice:{ startDevice, answer, reject, hangup, dial, voiceState} }: {voice: Voice})
+export default function Phone({voice:{ startDevice, answer, reject, hangup, dial, dtmf, voiceState} }: {voice: Voice})
 {
 	if (voiceState.deviceState === "Offline")
 	{
@@ -31,8 +31,8 @@ export default function Phone({voice:{ startDevice, answer, reject, hangup, dial
 		return (
 			<div className="Phone">
 				<DeviceState deviceState = {voiceState.deviceState}/>
+				<DtmfButtons dtmf = {dtmf} />
 				<Button title = "hangup" onClick = {() => hangup()}/>
-				<DtmfButtons/>
 			</div>
 		);
 	}

src/Mocks/mock-connection.ts

@@ -52,7 +52,7 @@ export class MockConnection implements Connection
 	
 	public sendDigits(digits: string)
 	{
-		
+		console.log("Sending digit", digits);
 	}
 	
 	public status(): ConnectionStatus

src/Wrappers/voice.ts

@@ -10,13 +10,13 @@ export interface Voice
 	reject(): void;
 	hangup(): void;
 	dial(phoneNumber: string): void;
+	dtmf(digit: string): void;
 	voiceState: VoiceState;
 }
 
-export default function useVoice() 
+export default function useVoice()
 {
 	const state = useVoiceState();
-	console.log("Creating new voice");
 
 	const [device, setDevice] = useState<Device>();
 	const [connection, setConnection] = useState<Connection>();
@@ -24,7 +24,7 @@ export default function useVoice()
 	const startDevice = (token: string) =>
 	{
 		// const device = new Device(token)
-		const  device = new MockDevice(token);
+		const device = new MockDevice(token);
 
 		console.log("Creating new device", device);
 
@@ -83,12 +83,18 @@ export default function useVoice()
 		setConnection(connection);
 	}
 
+	const dtmf = (digit: string) =>
+	{
+		connection?.sendDigits(digit);
+	}
+
 	return {
 		startDevice,
 		answer,
 		reject,
 		hangup,
 		dial,
+		dtmf,
 		voiceState: state.voiceState,
 	} as Voice;
 }

src/components/Phone/DtmfButtons/dtmf-buttons.module.css

@@ -0,0 +1,22 @@
+.dtmf-button {
+	border-radius: 50%;
+	border: 1px solid black;
+	width: 70px;
+	height: 70px;
+	margin: 15px;
+	background-color: white;
+}
+
+.dtmf-button:hover {
+	background-color: lightgray;
+}
+
+.title {
+	font-size: 20px;
+	height: 20px;
+}
+
+.sub-title {
+	font-size: 15px;
+	height: 15px;
+}

src/components/Phone/DtmfButtons/dtmf-buttons.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { chunk } from 'lodash';
+import { Voice } from '../../../wrappers/voice';
+import styles from './dtmf-buttons.module.css';
 
 interface DtmfButton
 {
@@ -8,7 +10,7 @@ interface DtmfButton
 }
 
 const buttons: DtmfButton[] = [
-	{title: "1", subTitle: ""},
+	{title: "1", subTitle: " "},
 	{title: "2", subTitle: "abc"},
 	{title: "3", subTitle: "efg"},
 	{title: "4", subTitle: "hij"},
@@ -17,17 +19,21 @@ const buttons: DtmfButton[] = [
 	{title: "7", subTitle: "qrs"},
 	{title: "8", subTitle: "tuv"},
 	{title: "9", subTitle: "wxyz"},
-	{title: "*", subTitle: ""},
+	{title: "*", subTitle: " "},
 	{title: "0", subTitle: "+"},
-	{title: "#", subTitle: ""},
+	{title: "#", subTitle: " "},
 ];
 
-export default function DtmfButtons() {
+export default function DtmfButtons({dtmf}: {dtmf: Voice["dtmf"]}) {
 	return (
 		<div>
 			{ chunk(buttons, 3).map((buttonRow, rowIndex) =>
 				<div key={rowIndex}>
-					{ buttonRow.map(({title, subTitle}, index) => <button>{ title }</button>) }
+					{ buttonRow.map(({title, subTitle}, index) => 
+					<button key={title} className={styles["dtmf-button"]} onClick = {() => dtmf(title)}>
+						<div className={styles["title"]}>{ title }</div>
+						<div className={styles["sub-title"]}>{ subTitle }</div>
+					</button>) }
 				</div>
 				)
 			}