Added alerts functionality + modal UI

client/scss/app.scss

@@ -5,6 +5,9 @@
 
 @import 'bulma';
 @import './libs/twemoji-awesome';
+@import './libs/animate.min.css';
+
+@import './components/_alerts';
 
 @import './layout/_header';
 @import './layout/_footer';

client/scss/components/_alerts.scss

@@ -0,0 +1,24 @@
+#alerts {
+	position: fixed;
+	top: 60px;
+	right: 10px;
+	width: 350px;
+	z-index: 2;
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
+
+	.notification {
+		animation: 0.5s ease slideInRight;
+		margin-top: 5px;
+
+		&.exit {
+			animation: 0.5s ease fadeOutRight;
+		}
+
+	}
+
+	h3 {
+		font-size: 16px;
+		font-size: 500;
+	}
+
+}

client/scss/layout/_content.scss

@@ -71,6 +71,16 @@ p code {
 	border-radius: 4px;
 }
 
+.modal {
+	align-items: flex-start;
+}
+.modal-background {
+	animation: 0.4s ease fadeIn;
+}
+.modal-content {
+	animation: 0.4s ease slideInDown;	
+}
+
 .card-header {
 	background-color: $turquoise;
 }
@@ -80,4 +90,8 @@ .card-header-title {
 	font-weight: 400;
 	font-size: 16px;
 	padding: 10px 20px;
+}
+
+.modal-content .card-footer-item {
+	font-weight: 500;
 }