diff --git a/src/Call.jsx b/src/Call.jsx index ebf0c5c..c71a619 100644 --- a/src/Call.jsx +++ b/src/Call.jsx @@ -26,11 +26,23 @@ function ContactIcon() { ) } +function BackIcon() { + return ( + + ) +} + function Call(props) { return (
+ +

{props.info.direction == 'inbound' ? props.info.from : props.info.to} @@ -38,14 +50,21 @@ function Call(props) {

{new Date(props.info.created_at).toLocaleTimeString([], - {hour: '2-digit', minute: '2-digit'}) + {hour: '2-digit', minute: '2-digit'}) } - {props.info.call_type}

+
+

- {parseInt(props.info.duration / 60)} mins - {props.info.duration % 60} seconds -

+ {parseInt(props.info.duration / 60) + } mins {props.info.duration % 60 + } seconds +
+ +
+ +
) diff --git a/src/css/app.css b/src/css/app.css index 180928f..26b954f 100755 --- a/src/css/app.css +++ b/src/css/app.css @@ -108,7 +108,47 @@ .calls svg.in-phone, .calls svg.out-phone { color: green; } + .calls div.date { color: darkgrey; text-align: center; } + +.call { + display: flex; + justify-content: space-between; + flex-flow: wrap; + gap: 10px; +} +.call svg { + width: 40px; +} + +.call .call-nav { + width: 100%; +} + +.call .call-nav svg { + color: darkgrey; + padding: 5px; + border: 2px solid darkgrey; + border-radius: 50%; + display: block; + width: 15px; +} + +.call .call-nav svg:hover { + color: white; + background: darkgrey; +} + +.call .call-nav { + display: flex; + justify-content: space-between; +} + +.call-nav button { + border: 2px solid grey; + border-radius: 5px; + background: white; +}