16 files changed, 350 insertions, 137 deletions

diff --git a/src/public/css/auth.css b/src/public/css/auth.css
new file mode 100644
index 0000000..b08e27b
--- /dev/null
+++ b/src/public/css/auth.css
@@ -0,0 +1,45 @@
+#main-content {
+	padding-top: 20rem;
+	padding-bottom: 5rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.branding {
+	max-width: 30rem;
+	margin-right: 5rem;
+}
+
+.branding h1 {
+	color: var(--blue);
+	font-family: facebook;
+	font-size: 3.5rem;
+}
+
+.branding span {
+	font-size: 1.5rem;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	width: 30rem;
+}
+
+@media(max-width: 1200px) {
+	#main-content {
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		padding: 10rem 0;
+	}
+
+	.branding {
+		margin: 0;
+	}
+
+	.form {
+		margin-top: 4rem;
+	}
+}
diff --git a/web/public/css/common.css b/src/public/css/common.css
index 8b55268..8535564 100644
--- a/web/public/css/common.css
+++ b/src/public/css/common.css
@@ -1,17 +1,44 @@
 :root {
-	--primary: #242424 !important;
-	--secondary: #181818 !important;
-	--hover: #1b1b1b !important;
-	--light: #3e4042 !important;
-	--mild: #1b1b1b !important;
-	--medium: #e2ded6 !important;
-	--extreme: #e2ded6 !important;
-	--logo: #1778f2 !important;
-	--error: #f02849 !important;
-	--success: #30ab5a !important;
-	--text: #ffffff !important;
-	--banner: #6b6b6b !important;
-	--popup: #242424cc !important;
+	--white: #E4E6EB;
+	--blue: #1778f2;
+	--red: #f02849;
+	--green: #30ab5a;
+
+	--blue-alt: #1D85FC;
+	--green-alt: #39B463;
+
+	--font: Helvetica;
+}
+
+:root {
+	--base :#18191A;
+	--surface0: #242526;
+	--surface1: #3A3B3C;
+	--surface2: #4E4F50;
+
+	--text: #E4E6EB;
+	--subtext: #B0B3B8;
+	--btntext: #E4E6EB;
+}
+
+/**
+:root {
+    --base: #f0f2f5;
+    --surface0: #ffffff;
+    --surface1: #f0f2f5;
+    --surface2: #dadde1;
+
+	--text: #000000;
+    --subtext: #1d2129;
+    --btntext: #606770;
+}
+*/
+
+@font-face {
+	font-family: 'Helvetica Neue';
+	font-style: normal;
+	src: url("/public/font/helvetica-neue.otf") format("opentype");
+	font-display: swap;
 }
 
 @font-face {
@@ -33,14 +60,8 @@
 	font-display: swap;
 }
 
-@font-face {
-	font-family: sfprobold;
-	src: url("/public/font/sfprobold.otf") format("opentype");
-	font-display: swap;
-}
-
 body {
-	background-color: var(--secondary);
+	background-color: var(--surface0);
 	width: 100%;
 	height: 100%;
 	margin: 0;
@@ -48,93 +69,132 @@ body {
 	display: flex;
 	flex-direction: column;
 	color: var(--text);
-	font-family: sfpro;
+	font-family: var(--font);
+}
+
+#main-content {
+	background-color: var(--base);
+	padding-top: 1rem;
 }
 
 header {
 	top: 0;
 	position: sticky;
 	height: 3.5rem;
-	background-color: var(--primary);
+	background-color: var(--surface0);
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	padding: 0 1rem;
+	border-bottom: 1px solid var(--surface1);
 }
 
 header .logo {
 	font-family: facebook;
-	color: var(--logo);
+	color: var(--blue);
 	font-size: 2.25rem;
 	height: 100%;
 	line-height: 2rem;
 	margin-top: .75rem;
 }
 
+footer {
+	text-align: center;
+	padding: 1rem;
+	color: var(--subtext);
+	font-size: .75rem;
+}
+
+hr {
+	color: var(--surface2);
+	background-color: var(--surface2);
+	width: 100%;
+	height: 1px;
+	border: none;
+}
+
+a, button, input, div {
+	box-sizing: border-box;
+}
+
 a, button, input {
 	background: none;
 	border: none;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	font-family: sfprobold;
 	color: inherit;
-	text-decoration: none;
-	font-size: 1rem;
 }
 
 a, button {
 	cursor: pointer;
 }
 
-form button {
-	padding: .5rem;
-	border-radius: .5rem;
-}
-
-input:focus {
-	border: none;
-	outline: none;
-}
-
-.header-entry {
+.btn {
+	color: var(--btntext);
 	display: flex;
+	align-items: center;
+	align-content: center;
 	flex-direction: row;
+	font-weight: bold;
+	font-size: 1rem;
 	text-decoration: none;
-	align-items: center;
-	color: var(--text);
+
+	padding: .4rem .6rem;
+	border-radius: .25rem;
+	background-color: transparent;
+	width: fit-content;
 }
 
-.nav .header-entry {
-	height: 100%;
+.btn:hover {
+	background-color: var(--surface1);
 }
 
-.nav-center .header-entry:hover {
-	background-color: var(--hover);
+.btn-alt {
+	background-color: var(--surface1);
 }
 
-.btn-action {
+.btn-alt:hover {
+	background-color: var(--surface2);
+}
+
+.btn-wide {
+	width: auto;
+	flex-grow: 1;
 	justify-content: center;
-	align-items: center;
-	padding: .35rem;
-	margin: .25rem;
-	border-radius: .25rem;
 }
 
-.btn-action:hover {
-	background-color: var(--hover);
+.btn-line:hover {
+	background-color: inherit;
+	text-decoration: underline;
 }
 
-.btn-blue:hover {
-	color: var(--logo);
+.btn-blue {
+	color: var(--blue-alt);
 }
 
-.header .btn-blue {
-	border-bottom: 1px solid var(--logo);
+input.btn:focus {
+	border: none;
+	outline: none;
 }
 
-.btn-line:hover {
-	text-decoration: underline;
+.btn-submit {
+	color: var(--white);
+	background-color: var(--blue);
+	flex-grow: 1;
+	padding: .5rem;
+}
+
+.btn-submit:hover {
+	background-color: var(--blue-alt);
+}
+
+.btn-success {
+	color: var(--white);
+	background-color: var(--green);
+	flex-grow: 1;
+	padding: .5rem;
+}
+
+.btn-success:hover {
+	background-color: var(--green-alt);
 }
 
 .nav,
@@ -167,12 +227,13 @@ input:focus {
 }
 
 @media (min-width: 800px) {
-	.header-entry > span {
+	.nav-center .btn > span {
 		display: none;
 	}
 
-    .nav-center .header-entry {
+    .nav-center .btn {
         padding: 0 3rem;
+		height: 100%;
     }
 
 	#action-hamburger {
@@ -187,7 +248,7 @@ input:focus {
 		flex-direction: column;
 		top: 100%;
 		height: fit-content;
-		background-color: var(--primary);
+		background-color: var(--surface0);
 		width: 100%;
 		left: 0;
 		transform: translateX(0%);
@@ -198,18 +259,18 @@ input:focus {
 		display: inherit !important;
 	}
 
-	.nav-center .header-entry {
+	.nav-center .btn {
 		width: calc(100% - 3rem);
 		padding: .75rem 0rem !important;
         padding-left: 3rem !important;
 		justify-content: flex-start;
 	}
 
-	.nav-center .header-entry > span {
+	.nav-center .btn > span {
 		margin-left: 1rem;
 	}
 
-	.nav-center .header-entry.active {
+	.nav-center .btn.active {
 		border-bottom: none;
 	}
 }
@@ -218,11 +279,6 @@ input:focus {
 	display: block;
 }
 
-.nav-right .header-entry {
-	padding: 0;
-	padding-left: 1.5rem;
-}
-
 @keyframes shimmer {
   to {
 	background-position-x: 0%;
@@ -242,40 +298,32 @@ input:focus {
 }
 
 .image-loading {
-  background: linear-gradient(-45deg, var(--secondary) 0%, var(--primary) 25%, var(--secondary) 50%);
+  background: linear-gradient(-45deg, var(--surface0) 0%, var(--base) 25%, var(--surface0) 50%);
   background-size: 500%;
   background-position-x: 150%;
   animation: shimmer 1s linear infinite;
 }
 
 .card {
-	background-color: var(--primary);
+	background-color: var(--surface0);
 	border-radius: .5rem;
 	padding: 1rem;
 }
 
+.card p {
+	margin-bottom: 0;
+}
+
 .card form {
 	flex-grow: 1;
 }
 
 .card .sub-card {
-	background-color: var(--secondary);
+	background-color: var(--surface1);
 	border-radius: .5rem;
 	padding: .75rem;
 }
 
-.input {
-	padding: 10px;
-	border-radius: 10px;
-	width: calc(100% - 20px);
-	background-color: var(--secondary);
-	font-family: sfpro;
-}
-
-.input:hover {
-	background-color: var(--hover);
-}
-
 .row {
 	display: flex;
 	flex-direction: row;
@@ -314,8 +362,12 @@ input:focus {
 	margin-bottom: .75rem;
 }
 
+.pb {
+	padding-bottom: 1rem;
+}
+
 .dim {
-	color: var(--medium);
+	color: var(--subtext);
 }
 
 .modal-container {
@@ -329,7 +381,7 @@ input:focus {
 }
 
 .modal {
-	background-color: var(--primary);
+	background-color: var(--surface0);
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -372,18 +424,14 @@ input:focus {
 }
 
 .modal-header {
-	font-family: sfprobold;
+	font-weight: bold;
 	position: relative;
-	border-bottom: 1px solid var(--light);
-	text-align: center;
-	margin: 0 1rem;
-	border-radius: .5rem .5rem 0 0;
+	border-bottom: 1px solid var(--surface1);
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding-left: 1rem;
 	cursor: grab;
-	padding: 1rem;
+	padding: 1rem 0;
 }
 
 .modal-content {
@@ -402,9 +450,9 @@ input:focus {
 
 .float-right {
 	position: absolute;
-	transform: translate(0%, -50%);
-	top: 45%;
-	right: 0;
+	top: 50%;
+	left: 100%;
+	transform: translate(-125%, -50%);
 }
 
 .mi {
@@ -421,17 +469,6 @@ input:focus {
 	font-size: 2rem;
 }
 
-button[type="submit"] {
-	text-align: center;
-	background-color: var(--logo);
-	flex-grow: 1;
-	padding: .5rem;
-}
-
-button[type="submit"]:hover {
-	background-color: var(--logo);
-}
-
 #toast-container {
 	position: fixed;
 	top: 4rem;
@@ -442,20 +479,92 @@ button[type="submit"]:hover {
 }
 
 .toast {
+	color: var(--white);
 	padding: .75rem;
 	margin: .5rem;
 	border-radius: .5rem;
 	min-width: 15rem;
-	font-family: sfpro;
 	animation: fadeIn .1s, slideIn .25s linear;
 	display: flex;
 	justify-content: space-between;
 }
 
 .toast.error {
-	background-color: var(--error);
+	background-color: var(--red);
 }
 
 .toast.success {
-	background-color: var(--success);
+	background-color: var(--green);
+}
+
+form input:not(.btn) {
+	display: block;
+	font-size: 1.1rem;
+	outline: 2px solid var(--surface2);
+	border-radius: .25rem;
+	padding: .75rem;
+}
+
+form input:not(.btn):focus {
+	outline-color: var(--blue);
+}
+
+form .rel label:not(.static) {
+	position: absolute;
+	top: 50%;
+	transform: translate(.5rem, -40%);
+	color: var(--subtext);
+	transition: all 0.2s ease-out;
+	pointer-events: none;
+	width: fit-content;
+	font-size: 1.1rem;
+}
+
+input:focus + label:not(.static),
+input:not(:placeholder-shown) + label:not(.static) {
+	color: var(--text);
+	top: 0;
+	padding: .5rem;
+	padding-top: 0;
+	font-size: .75rem;
+	transform: translate(.5rem, -25%);
+	background-color: var(--surface0);
+}
+
+.rel {
+	position: relative;
+}
+
+.rel input {
+	width: 100%;
+	flex-grow: 1;
+}
+
+input[type=radio] {
+	padding: 3rem !important;
+}
+
+.radio {
+	display: flex;
+	flex-direction: row;
+	width: auto;
+	flex-grow: 1;
+}
+
+.radio label {
+	border: 1px solid var(--surface2);
+	height: fit-content;
+	width: 100%;
+	padding: .75rem;
+	border-radius: .25rem;
+	cursor: pointer;
+}
+
+.radio input {
+	position: absolute;
+	top: 50%;
+	left: 100%;
+	transform: translate(-250%, -70%);
+	width: fit-content;
+	outline: none !important;
 }
diff --git a/web/public/css/error.css b/src/public/css/error.css
index aea11d9..5567cd5 100644
--- a/web/public/css/error.css
+++ b/src/public/css/error.css
@@ -1,16 +1,16 @@
-#error {
+#main-content {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-top: 10rem;
+	padding: 10rem 0;
 }
 
-#error h1 {
-	color: var(--logo);
+#main-content h1 {
+	color: var(--blue);
 	font-family: Facebook;
 	font-size: 5rem;
 }
 
-#error span {
+#main-content span {
 	font-size: 2rem;
 }
diff --git a/web/public/css/home.css b/src/public/css/home.css
index e70223e..3c2a3a1 100644
--- a/web/public/css/home.css
+++ b/src/public/css/home.css
@@ -1,9 +1,7 @@
 #main-content {
-	width: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-top: 1rem;
 }
 
 .card {
@@ -15,7 +13,6 @@
 	border: none;
 	resize: none;
 	outline: none;
-	font-family: sfpro;
 	font-size: 1.5rem;
 	margin: 1rem 0;
 	width: 100%;
@@ -23,4 +20,5 @@
 	flex-grow: 1;
 	background-color: transparent;
 	color: var(--text);
+	font-family: var(--font);
 }
diff --git a/web/public/css/post.css b/src/public/css/post.css
index 4030da3..6fd7ca0 100644
--- a/web/public/css/post.css
+++ b/src/public/css/post.css
@@ -1,16 +1,13 @@
-.post hr {
-	color: var(--light);
-	margin: 0;
-}
-
-.post hr:nth-of-type(1) {
-	margin-top: .5rem;
-}
 
 .action-load-comments {
 	margin-left: 4rem;
 }
 
 #action-load-posts {
+	width: 100%;
 	justify-content: center;
 }
+
+.post {
+	padding-bottom: 0;
+}
diff --git a/web/public/favicon.ico b/src/public/favicon.ico
index e023946..e023946 100644
--- a/web/public/favicon.ico
+++ b/src/public/favicon.ico
diff --git a/web/public/font/facebook.otf b/src/public/font/facebook.otf
index 97d5c6f..97d5c6f 100644
--- a/web/public/font/facebook.otf
+++ b/src/public/font/facebook.otf
diff --git a/src/public/font/helvetica-neue.otf b/src/public/font/helvetica-neue.otf
new file mode 100644
index 0000000..7a08ea0
--- /dev/null
+++ b/src/public/font/helvetica-neue.otf
diff --git a/web/public/font/material-icons.ttf b/src/public/font/material-icons.ttf
index 9d09b0f..9d09b0f 100644
--- a/web/public/font/material-icons.ttf
+++ b/src/public/font/material-icons.ttf
diff --git a/web/public/font/sfpro.otf b/src/public/font/sfpro.otf
index 7042365..7042365 100644
--- a/web/public/font/sfpro.otf
+++ b/src/public/font/sfpro.otf
diff --git a/web/public/font/sfprobold.otf b/src/public/font/sfprobold.otf
index 28fa5a4..28fa5a4 100644
--- a/web/public/font/sfprobold.otf
+++ b/src/public/font/sfprobold.otf
diff --git a/web/public/js/lib.js b/src/public/js/lib.js
index 55b8161..edb7258 100644
--- a/web/public/js/lib.js
+++ b/src/public/js/lib.js
@@ -58,11 +58,19 @@ var $$ = (selector) => {
 /// ajax error handle
 ///
 
-var errorToast = (xhr) => {
+var errorToastAjax = (xhr) => {
 	let data = xhr.responseJSON;
-	let msg = data.message;
-	let detail = data.details;
-	let hint = data.hint;
+
+	let msg, detail, hint;
+
+	if (data) {
+		msg = data.message;
+		detail = data.details;
+		hint = data.hint;
+	} else {
+		msg = 'api_unknown';
+	}
+
 
 	let query = '?msg=' + msg;
 	if (detail) {
@@ -77,6 +85,13 @@ var errorToast = (xhr) => {
 	})
 }
 
+var errorToast = (msg) => {
+	let url = '/template/toast?msg=' + msg;
+	$.get(url, function (data) {
+		$('#toast-container').prepend(data);
+	})
+}
+
 $$('.action-close-toast').on('click', function() {
 	$(this).parent().remove();
 });
@@ -94,12 +109,14 @@ $$('.action-close-toast').each(function() {
 
 $.ajaxSetup({
 	headers: (() => {
-		let ajaxHeaders = {};
-		ajaxHeaders['Content-Type'] = 'application/json';
+		let ajaxHeaders = {
+			'Content-Type': 'application/json',
+			'Prefer': 'return=representation'
+		};
 		if (jwtStr) {
 			ajaxHeaders['Authorization'] = 'Bearer ' + jwtStr
 		}
 		return ajaxHeaders;
 	})(),
-	error: errorToast
+	error: errorToastAjax
 })
diff --git a/web/public/js/modal.js b/src/public/js/modal.js
index 2a704f3..2a704f3 100644
--- a/web/public/js/modal.js
+++ b/src/public/js/modal.js
diff --git a/web/public/js/post.js b/src/public/js/post.js
index 7e524bb..38bbb78 100644
--- a/web/public/js/post.js
+++ b/src/public/js/post.js
@@ -70,12 +70,59 @@ $$('.action-new-comment-form').on('submit', function(e) {
 	let input = me.find('.action-new-comment');
 	let content = input.val();
 	let post_id = input.attr('postId');
+
+	const getComment = function(data) {
+		if (data) {
+			let container = me.closest('.post').find('.comments');
+			container.prepend(data);
+		}
+		input.val('');
+	}
+
+	const onComment = function(data) {
+		let id = data[0].id;
+		$.get({
+			url: '/_util/post/comment?id=' + id,
+			success: getComment
+		});
+	}
+
 	$.ajax({
 		url: '/api/comment',
 		method: 'POST',
 		data: JSON.stringify({ post_id, content }),
-		success: function(_data) {
-			window.location.reload();
-		},
+		success: onComment
 	});
 });
+
+$$('.action-like').on('click', function() {
+	let me = $(this);
+	let liked = me.hasClass('btn-blue');
+	let like_id = me.attr('likeId');
+	let post_id = me.attr('postId');
+
+	const onPatch = () => {
+		me.toggleClass('btn-blue');
+	}
+
+	const onPost = (data) => {
+		me.attr('likeId', data[0].id + '');
+		me.toggleClass('btn-blue');
+	}
+
+	if (like_id) {
+		$.ajax({
+			url: '/api/like?id=eq.' + like_id,
+			method: 'PATCH',
+			data: JSON.stringify({ value: !liked }),
+			success: onPatch
+		});
+	} else {
+		$.ajax({
+			url: '/api/like',
+			method: 'POST',
+			data: JSON.stringify({ post_id, value: true }),
+			success: onPost,
+		});
+	}
+});
diff --git a/web/public/js/routes/home.js b/src/public/js/routes/home.js
index e69de29..e69de29 100644
--- a/web/public/js/routes/home.js
+++ b/src/public/js/routes/home.js
diff --git a/web/public/js/thirdparty/jquery.min.js b/src/public/js/thirdparty/jquery.min.js
index 7f37b5d..7f37b5d 100644
--- a/web/public/js/thirdparty/jquery.min.js
+++ b/src/public/js/thirdparty/jquery.min.js