Style call details

src/Call.jsx

@@ -26,11 +26,23 @@ function ContactIcon() {
 	)
 }
 
+function BackIcon() {
+	return (
+<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-chevron-left"
+		fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path
+		fillRule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
+		5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708
+		0z"/> </svg>
+	)
+}
+
 function Call(props) {
 	return (
 		<div className="call">
 
 		<ContactIcon/>
+
+		<div>
 		<h3>{props.info.direction == 'inbound'
 			? props.info.from
 			: props.info.to}
@@ -38,14 +50,21 @@ function Call(props) {
 
 		<h4>
 		{new Date(props.info.created_at).toLocaleTimeString([],
-					{hour: '2-digit', minute: '2-digit'})
+			{hour: '2-digit', minute: '2-digit'})
 		} - {props.info.call_type}
 		</h4>
+		</div>
 
+		<div>
 		<h4>
-			{parseInt(props.info.duration / 60)} mins
-			{props.info.duration % 60} seconds
-		</h4>
+		{parseInt(props.info.duration / 60)
+		} mins {props.info.duration % 60
+		} seconds </h4>
+		</div>
+
+		<div className="call-nav">
+		<BackIcon/> <button>Archive</button>
+		</div>
 
 		</div>
 	)

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