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;
+}