Add animations

README.md

@@ -4,6 +4,7 @@
   now the simplified method of managing state in react.
 
 ### TODO
+- Show dates on calls?
 - Add date seperators to calls
 - Sort calls by descending dates
 - Add missed and voicemail icons to represent status

src/Call.jsx

@@ -56,7 +56,7 @@ function moveCall(call, update) {
 
 function Call(props) {
 	return (
-		<div className="call">
+		<div className="fade-in call">
 
 		<ContactIcon/>
 

src/Feed.jsx

@@ -76,7 +76,7 @@ function Feed(props) {
 			}
 
 			return (
-				<li key={entry.id}>
+				<li className={props.recent ? 'fade-in' : 'fade-in-right'} key={entry.id}>
 
 				<h4>{entry.direction == 'inbound' ? entry.from : entry.to}
 				<PhoneSymbol inbound={entry.direction == 'inbound'}>

src/Navigator.jsx

@@ -3,6 +3,7 @@ import React, {useState, useEffect} from 'react';
 function Navigator(props) {
 	let recent = "recent" + (props.recent ? " selected" : '')
 	let archived = "archived" + (props.recent ? "" : " selected")
+	let slider = "nav-slider" + (props.recent ? " left" : " right")
 	return (
 		<nav>
 			<button onClick={() => props.onPageChange(true)}
@@ -11,6 +12,9 @@ function Navigator(props) {
 			<button onClick={() => props.onPageChange(false)}
 			className={archived}>Archived
 			</button>
+			<div>
+				<span className={slider}></span>
+			</div>
 		</nav>
 	)
 }

src/css/app.css

@@ -1,3 +1,45 @@
+@keyframes fade-in-translate {
+	from {
+		transform: translateX(-50px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes fade-in-translate-right {
+	from {
+		transform: translateX(50px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+.fade-in {
+	animation: fade-in-translate 0.3s 0.1s both;
+}
+
+.fade-in-right {
+	animation: fade-in-translate-right 0.3s 0.1s both;
+}
+
 #app {
   position: absolute;
   display: flex;
@@ -28,7 +70,7 @@
 	display: flex;
 	flex-flow: wrap;
 	justify-content: center;
-	gap: 40px;
+	/* gap: 40px; */
 	margin-top: 20px;
 }
 
@@ -38,10 +80,6 @@
 	border: none;
 }
 
-#app nav button.selected {
-	border-bottom: 2px solid green;
-}
-
 .calls h4 {
 	margin-top: 0;
 	margin-bottom: 5px;
@@ -50,10 +88,10 @@
 	list-style: none;
 	display: block;
 	position: relative;
-	border: 2px solid lightgrey;
 	margin-bottom: 20px;
 	padding: 10px;
 	border-radius: 5px;
+	box-shadow: 8px 14px 38px rgba(39,44,49,.1), 1px 3px 8px rgba(39,44,49,.06); 
 }
 
 .calls button {
@@ -152,3 +190,33 @@
 	border-radius: 5px;
 	background: white;
 }
+
+nav div {
+	width: 100%;
+	height: 5px;
+	margin-top: 10px;
+}
+
+nav div span {
+	width: 25%;
+	height: 2px;
+	display: block;
+	background: green;
+	margin: auto;
+}
+
+nav div span.left {
+	transform: translateX(-70%);
+}
+
+nav div span.right {
+	transform: translateX(70%);
+}
+
+nav div span {
+	transition: 0.2s ease-in-out;
+}
+
+ul {
+	transition: all 0.2s ease-in;
+}