Change alignment and margin; for reply bubbles, don't add a margin if first reply bubble in list

src/components/HeartButton.vue

@@ -1,6 +1,8 @@
 <template>
 	<label class='heart_button'>
-
+		<input type='checkbox'>
+		<span class='fa'></span>
+		<span class='heart_button__count'>0</span>
 	</label>
 </template>
 
@@ -12,7 +14,35 @@
 </script>
 
 <style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
 	.heart_button {
+		cursor: pointer;
+
+		input {
+			display: none;
+		}
+
+		#{&}__count {
+			position: relative;
+			bottom: 0.0625rem;
+		}
+
+		span.fa {
+			color: $color__gray--darkest;
+			transition: text-shadow 0.2s, color 0.2s, filter 0.2s;
+			font-size: 1.125rem;
+
+			&:hover {
+				filter: brightness(0.9);
+			}
 
+			&::before {
+				content: "\f004";
+			}
+		}
+		input:checked + span.fa {
+			color: #E91E63;
+		}
 	}
 </style>

src/components/PostReply.vue

@@ -1,5 +1,5 @@
 <template>
-	<info-tooltip class='post_reply' :class='{"post_reply--hover": hover}'>
+	<info-tooltip class='post_reply' :class='{"post_reply--hover": hover, "post_reply--first": first}'>
 		<template slot='content'>
 			<div style='margin-top: -0.25rem;'>
 				<div class='post_reply__username'>{{user.username}}</div>
@@ -27,7 +27,7 @@
 
 	export default {
 		name: 'PostReply',
-		props: ['post', 'hover'],
+		props: ['post', 'hover', 'first'],
 		components: { InfoTooltip },
 		computed: {
 			user () {
@@ -60,10 +60,10 @@
 
 		@at-root #{&}--hover {
 			margin: 0 0.125rem;
+		}
 
-			&:first-child {
-				margin-left: 0rem;
-			}
+		@at-root #{&}--first {
+			margin-left: 0;
 		}
 
 

src/components/ThreadPost.vue

@@ -29,15 +29,21 @@
 		<div class='post__footer' :class='{ "post__footer--show": hover }'>
 			<div
 				class='post__footer_group'
-				:class='{ "post__footer_group--replies": post.Replies.length }'
 			>
-				<post-reply
-					v-for='reply in post.Replies'
-					:post='reply'
-					:hover='hover'
-					@click='$emit("goToPost", reply.postNumber)'
-				></post-reply>
-				<heart-button />
+				<div class='post__footer_sub_group'>
+					<heart-button></heart-button>
+				</div>
+				<div class='post__footer_sub_group' v-if='post.Replies.length'>
+						<span class='post__footer_sub_group__text post__footer_sub_group__text--replies'>replies</span>
+					<post-reply
+						v-for='(reply, index) in post.Replies'
+						:post='reply'
+						:hover='hover'
+						:first='index === 0'
+						@click='$emit("goToPost", reply.postNumber)'
+					></post-reply>
+				</div>
+				
 			</div>
 			<div
 				class='post__footer_group'>
@@ -175,11 +181,11 @@
 			padding: 0.5rem 0 0.5rem 4rem;
 		}
 		@at-root #{&}__footer {
-			padding: 0.5rem 0 0.75rem 4rem;
+			padding: 0.5rem 0 0.75rem 0.5rem;
 			display: flex;
 			align-items: baseline;
 			justify-content: space-between;
-			opacity: 0.75;
+			opacity: 0.6;
 			transition: opacity 0.2s;
 
 			@at-root #{&}--show {
@@ -187,24 +193,23 @@
 				transition: opacity 0.2s;
 			}
 
-			@at-root #{&}_group {
+			@at-root #{&}_sub_group {
+				display: flex;
 				align-items: baseline;
-				display: inline-flex;
-				position: relative;
-
+				margin-right: 1rem;
 
-				@at-root #{&}--replies {
-					&::before {
-						content: 'Replies:';
-						bottom: 0.25rem;
-						left: -3.75rem;
-						font-size: 0.9rem;
-						position: absolute;	
-						color: $color__darkgray--primary;
-						transition: opacity 0.2s, bottom 0.2s;
-					}
+				@at-root #{&}__text {
+					font-variant: small-caps;
+					margin: 0 0.25rem;
+					margin-left: 0;
 				}
 			}
+
+			@at-root #{&}_group {
+				align-items: center;
+				display: inline-flex;
+				position: relative;
+			}
 		}
 		@at-root #{&}__action {
 			color: $color__darkgray--primary;