wip

11 files changed, 58 insertions, 92 deletions

diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag
index 0aac329916..f25d99974b 100644
--- a/src/web/app/common/tags/signin.tag
+++ b/src/web/app/common/tags/signin.tag
@@ -24,7 +24,7 @@
 					display block
 					margin 12px 0
 
-					i
+					[data-fa]
 						display block
 						pointer-events none
 						position absolute
diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag
index 67b8796a6e..3c98108729 100644
--- a/src/web/app/common/tags/signup.tag
+++ b/src/web/app/common/tags/signup.tag
@@ -182,7 +182,7 @@
 		this.passwordRetypeState = null;
 		this.recaptchaed = false;
 
-		window.onEecaptchaed = () => {
+		window.onRecaptchaed = () => {
 			this.recaptchaed = true;
 			this.update();
 		};
diff --git a/src/web/app/common/tags/url.tag b/src/web/app/common/tags/url.tag
index 330acf8210..2690afc5da 100644
--- a/src/web/app/common/tags/url.tag
+++ b/src/web/app/common/tags/url.tag
@@ -1,14 +1,20 @@
-<mk-url><a href={ url } target={ opts.target }><span class="schema">{ schema }//</span><span class="hostname">{ hostname }</span><span class="port" if={ port != '' }>:{ port }</span><span class="pathname" if={ pathname != '' }>{ pathname }</span><span class="query">{ query }</span><span class="hash">{ hash }</span></a>
+<mk-url>
+	<a href={ url } target={ opts.target }>
+		<span class="schema">{ schema }//</span>
+		<span class="hostname">{ hostname }</span>
+		<span class="port" if={ port != '' }>:{ port }</span>
+		<span class="pathname" if={ pathname != '' }>{ pathname }</span>
+		<span class="query">{ query }</span>
+		<span class="hash">{ hash }</span>
+		%fa:external-link-square-alt%
+	</a>
 	<style>
 		:scope
 			word-break break-all
 
 			> a
-				&:after
-					content "\f14c"
-					display inline-block
+				> [data-fa]
 					padding-left 2px
-					font-family FontAwesome
 					font-size .9em
 					font-weight 400
 					font-style normal
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
index d0e9940630..65334ddb2e 100644
--- a/src/web/app/desktop/tags/notifications.tag
+++ b/src/web/app/desktop/tags/notifications.tag
@@ -8,7 +8,10 @@
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
+						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
+						</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'repost' }>
@@ -16,7 +19,10 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
+						<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+							%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
+						</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'quote' }>
@@ -24,7 +30,8 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'follow' }>
@@ -40,7 +47,8 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'mention' }>
@@ -48,7 +56,8 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
+						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'poll_vote' }>
@@ -56,11 +65,17 @@
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
+						<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
+						</a>
 					</div>
 				</virtual>
 			</div>
-			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
+			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }>
+				<span>%fa:angle-up%{ notification._datetext }</span>
+				<span>%fa:angle-down%{ notifications[i + 1]._datetext }</span>
+			</p>
 		</virtual>
 	</div>
 	<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
@@ -129,20 +144,13 @@
 					.post-ref
 						color rgba(0, 0, 0, 0.7)
 
-						&:before, &:after
-							font-family FontAwesome
+						[data-fa]
 							font-size 1em
 							font-weight normal
 							font-style normal
 							display inline-block
 							margin-right 3px
 
-						&:before
-							content "\f10d"
-
-						&:after
-							content "\f10e"
-
 					&.repost, &.quote
 						.text p i
 							color #77B255
@@ -168,7 +176,7 @@
 					span
 						margin 0 16px
 
-					i
+					[data-fa]
 						margin-right 8px
 
 			> .more
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index d91585650a..386e57baf4 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -124,7 +124,7 @@
 								margin 0 8px 0 0
 								border-radius 6px
 
-						i
+						[data-fa]
 							margin-right 4px
 
 						.name
@@ -205,16 +205,6 @@
 							font-size 1.5em
 							color #717171
 
-							.link
-								&:after
-									content "\f14c"
-									display inline-block
-									padding-left 2px
-									font-family FontAwesome
-									font-size .9em
-									font-weight 400
-									font-style normal
-
 							> mk-url-preview
 								margin-top 8px
 
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
index 81c16591f2..08e658a3c6 100644
--- a/src/web/app/desktop/tags/timeline.tag
+++ b/src/web/app/desktop/tags/timeline.tag
@@ -23,7 +23,7 @@
 				span
 					margin 0 16px
 
-				i
+				[data-fa]
 					margin-right 8px
 
 			> footer
@@ -203,7 +203,7 @@
 							margin 0 8px 0 0
 							border-radius 6px
 
-					i
+					[data-fa]
 						margin-right 4px
 
 					.name
@@ -324,16 +324,6 @@
 							mk-url-preview
 								margin-top 8px
 
-							.link
-								&:after
-									content "\f14c"
-									display inline-block
-									padding-left 2px
-									font-family FontAwesome
-									font-size .9em
-									font-weight 400
-									font-style normal
-
 							> .channel
 								margin 0
 
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index cb5b1ec727..0398809188 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -678,7 +678,7 @@
 					font-family Meiryo, sans-serif
 					text-decoration none
 
-					i
+					[data-fa]
 						margin-left 8px
 
 				> .avatar
diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index 373b1f1572..ab923ea9d7 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -3,14 +3,14 @@
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
-			<p class="post-ref">{ getPostSummary(notification.post) }</p>
+			<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'repost' }>
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:retweet%{ notification.post.user.name }</p>
-			<p class="post-ref">{ getPostSummary(notification.post.repost) }</p>
+			<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'quote' }>
@@ -44,7 +44,7 @@
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:chart-pie%{ notification.user.name }</p>
-			<p class="post-ref">{ getPostSummary(notification.post) }</p>
+			<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
 		</div>
 	</virtual>
 	<style>
@@ -82,20 +82,13 @@
 
 			.post-ref
 
-				&:before, &:after
-					font-family FontAwesome
+				[data-fa]
 					font-size 1em
 					font-weight normal
 					font-style normal
 					display inline-block
 					margin-right 3px
 
-				&:before
-					content "\f10d"
-
-				&:after
-					content "\f10e"
-
 			&.repost, &.quote
 				.text p i
 					color #77B255
diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag
index de98f25549..de44caea2a 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -9,7 +9,9 @@
 				<mk-reaction-icon reaction={ notification.reaction }/>
 				<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
 			</p>
-			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+				%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
+			</a>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'repost' }>
@@ -21,7 +23,9 @@
 				%fa:retweet%
 				<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
 			</p>
-			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
+			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+				%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
+			</a>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'quote' }>
@@ -80,7 +84,9 @@
 				%fa:chart-pie%
 				<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
 			</p>
-			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
+				%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
+			</a>
 		</div>
 	</virtual>
 	<style>
@@ -132,20 +138,13 @@
 			.post-ref
 				color rgba(0, 0, 0, 0.7)
 
-				&:before, &:after
-					font-family FontAwesome
+				[data-fa]
 					font-size 1em
 					font-weight normal
 					font-style normal
 					display inline-block
 					margin-right 3px
 
-				&:before
-					content "\f10d"
-
-				&:after
-					content "\f10e"
-
 			&.repost, &.quote
 				.text p i
 					color #77B255
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index cfc5ee2f40..ceac563402 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -126,7 +126,7 @@
 							margin 0 8px 0 0
 							border-radius 6px
 
-					i
+					[data-fa]
 						margin-right 4px
 
 					.name
@@ -208,16 +208,6 @@
 						@media (min-width 500px)
 							font-size 24px
 
-						.link
-							&:after
-								content "\f14c"
-								display inline-block
-								padding-left 2px
-								font-family FontAwesome
-								font-size .9em
-								font-weight 400
-								font-style normal
-
 						> mk-url-preview
 							margin-top 8px
 
diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag
index 47d71d3d4b..0f86a42aee 100644
--- a/src/web/app/mobile/tags/timeline.tag
+++ b/src/web/app/mobile/tags/timeline.tag
@@ -59,7 +59,7 @@
 				span
 					margin 0 16px
 
-				i
+				[data-fa]
 					margin-right 8px
 
 			> footer
@@ -242,7 +242,7 @@
 							margin 0 8px 0 0
 							border-radius 6px
 
-					i
+					[data-fa]
 						margin-right 4px
 
 					.name
@@ -361,16 +361,6 @@
 							> .dummy
 								display none
 
-							.link
-								&:after
-									content "\f14c"
-									display inline-block
-									padding-left 2px
-									font-family FontAwesome
-									font-size .9em
-									font-weight 400
-									font-style normal
-
 							mk-url-preview
 								margin-top 8px