Move reply icon into component

src/components/ReplyingTo.vue

@@ -13,6 +13,7 @@
 			class='replying_to__display'
 			@click='$emit("click")'
 		>
+			<span class='fa fa-reply replying_to__icon'></span>
 			{{username}}
 		</div>
 	</info-tooltip>
@@ -37,6 +38,12 @@
 	@import '../assets/scss/variables.scss';
 
 	.replying_to {
+		@at-root #{&}__icon {
+			font-size: 0.7rem;
+			margin-right: 0.25rem;
+			color: rgba(0, 0, 0, 0.87);
+		}
+
 		@at-root #{&}__date  {
 			display: inline-block;
 			color: $color__gray--darkest;
@@ -58,8 +65,9 @@
 		}
 
 		@at-root #{&}__display {
-			display: inline-block;
+			display: inline-flex;
 			cursor: pointer;
+			align-items: baseline;
 		}
 	}
 </style>

src/components/routes/Thread.vue

@@ -35,8 +35,8 @@
 				<div class='post__meta_data'>
 					<div class='post__avatar' :style='{"background-color": post.User.color}'>{{post.User.username[0]}}</div>
 					<div class='post__user'>{{post.User.username}}</div>
-					<span class='fa fa-reply post__reply_icon' v-if='post.replyingToUsername'></span>
 					<replying-to
+						style='margin-right: 0.5rem;'
 						v-if='post.replyingToUsername'
 						:replyId='post.replyId'
 						:username='post.replyingToUsername'
@@ -273,16 +273,6 @@
 			@include text($font--role-default, 1rem, 600);
 			margin-right: 0.5rem;
 		}
-		@at-root #{&}__reply {
-			margin: 0 0.5rem;
-			cursor: pointer;
-		}
-		@at-root #{&}__reply_icon {
-			font-size: 0.75rem;
-			line-height: 1.5rem;
-			margin-right: -0.25rem;
-			color: rgba(0, 0, 0, 0.87);
-		}
 		@at-root #{&}__date {
 			color: $color__gray--darkest;
 			margin-right: 0.5rem;