Remove icons

2 files changed, 50 insertions, 77 deletions

diff --git a/static/fluoride.js b/static/fluoride.js
index 44af7c9..b3e90b8 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -1,16 +1,5 @@
 // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0
 
-var actionIcons = {
-	"like": "/static/icons/star-o.png",
-	"dark-like": "/static/icons/dark-star-o.png",
-	"unlike": "/static/icons/liked.png",
-	"dark-unlike": "/static/icons/liked.png",
-	"retweet": "/static/icons/retweet.png",
-	"dark-retweet": "/static/icons/dark-retweet.png",
-	"unretweet": "/static/icons/retweeted.png",
-	"dark-unretweet": "/static/icons/retweeted.png"
-};
-
 var reverseActions = {
 	"like": "unlike",
 	"unlike": "like",
@@ -45,11 +34,7 @@ function http(method, url, body, type, success, error) {
 }
 
 function updateActionForm(id, f, action) {
-	if (Array.from(document.body.classList).indexOf("dark") > -1) {
-		f.querySelector(".icon").src = actionIcons["dark-" + action];
-	} else {
-		f.querySelector(".icon").src = actionIcons[action];
-	}
+	f.querySelector('[type="submit"]').value = action;
 	f.action = "/" + action + "/" + id;
 	f.dataset.action = action;
 }
@@ -74,7 +59,11 @@ function handleLikeForm(id, f) {
 			}
 			var counts = document.querySelectorAll(".status-"+id+" .status-like-count");
 			counts.forEach(function(c) {
-				c.innerHTML = count;
+				if (count > 0) {
+					c.innerHTML = "(" + count + ")";
+				} else {
+					c.innerHTML = "";
+				}
 			});
 		}, function(err) {
 			forms.forEach(function(f) {
@@ -104,7 +93,11 @@ function handleRetweetForm(id, f) {
 			}
 			var counts = document.querySelectorAll(".status-"+id+" .status-retweet-count");
 			counts.forEach(function(c) {
-				c.innerHTML = count;
+				if (count > 0) {
+					c.innerHTML = "(" + count + ")";
+				} else {
+					c.innerHTML = "";
+				}
 			});
 		}, function(err) {
 			forms.forEach(function(f) {
diff --git a/static/style.css b/static/style.css
index fdbad23..888fb5d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -54,10 +54,6 @@
 .status {
 }
 
-.status a {
-	text-decoration: none;
-}
-
 .status-dname {
 	font-weight: 800;
 }
@@ -85,38 +81,29 @@
 
 .status-action {
 	display: inline-block;
-	min-width: 64px;
+	margin-right: 16px;
 }
 
-.status-action form {
-	display: inline-block;
+.status-action:last-child {
+	margin-right: 4px;
 }
 
-.status-action:last-child {
-	min-width: unset;
+.status-action form {
+	display: inline-block;
 }
 
 .status-action a {
 	display: inline-block;
-	text-decoration: none;
-	color: #333333;
 }
 
-.status-action a:hover,
-.status-action input:hover {
-	opacity: 0.6;
+.status-action * {
+	verical-align: center;
 }
 
 .status-action a.status-time {
 	width: auto;
 }
 
-.status-reply-count,
-.status-retweet-count,
-.status-like-count {
-	vertical-align: middle;
-}
-
 .page-title {
 	font-size: 23pt;
 }
@@ -265,38 +252,36 @@
 }
 
 .btn-link {
-    border: none;
-    outline: none;
-    background: none;
-    cursor: pointer;
-    color: #0000EE;
-    padding: 0;
-    text-decoration: underline;
-    font-family: inherit;
-    font-size: inherit;
+	border: none;
+	outline: none;
+	background: none;
+	cursor: pointer;
+	padding: 0;
+	font-family: inherit;
+	font-size: inherit;
 }
 
-.status-visibility {
-	margin-left: 4px;
-	display: inline-block;
-	color: #444444;
+a, .btn-link {
+	color: #464acc;
+	text-decoration: none;
 }
 
-.status-visibility span {
-	font-size: 9pt;
-	vertical-align: bottom;
+a:hover,
+.btn-link:hover {
+	opacity: 0.6;
 }
 
-.remote-link {
+.status-visibility {
 	margin-left: 4px;
 	display: inline-block;
-	color: #444444;
-	text-decoration: none;
+	color: #222222;
+	font-size: 8pt;
 }
 
-.remote-link span {
-	font-size: 9pt;
-	vertical-align: bottom;
+.remote-link {
+	margin-left: 4px;
+	display: inline-block;
+	font-size: 8pt;
 }
 
 .img-link {
@@ -305,6 +290,10 @@
 	margin: 2.5px 0;
 }
 
+.img-link:hover {
+	opacity: initial;
+}
+
 .status-profile-img-container .img-link {
 	width: 48px;
 	overflow: hidden;
@@ -390,16 +379,13 @@
 
 .nav-link {
 	margin-right: 2px;
+	text-decoration: underline;
 }
 
 .user-list-container {
 	margin: 8px 0;
 }
 
-.user-list-item a {
-	text-decoration: none;
-}
-
 .user-list-item>div {
 	display: inline-block;
 	vertical-align: top;
@@ -422,15 +408,6 @@
 	margin-top: 8px;
 }
 
-.icon {
-	height: 16px;
-	vertical-align: middle;
-}
-
-.icon.post-emoji {
-	height: 20px;
-}
-
 #reply-popup {
 	position: absolute;
 	background: #ffffff;
@@ -459,10 +436,6 @@
 	color: #81a2be;
 }
 
-.dark .status-action a {
-	color: #999999;
-}
-
 .dark #post-content {
 	background-color: #333333;
 	border: 1px solid #444444;
@@ -479,3 +452,10 @@
 	background-color: #333333;
 }
 
+.dark .btn-link {
+	color: #81a2be;
+}
+
+.dark .status-visibility {
+	color: #eaeaea;
+}