From a507b7c0b01c65cc108cfbc56b355003ef6e3cc1 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Fri, 17 Aug 2018 07:16:56 +0900
Subject: [PATCH] Enhance note footer

---
 .../desktop/views/components/note-detail.vue  | 21 ++++++++++-----
 .../desktop/views/components/notes.note.vue   | 26 +++++++++++--------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index b6980fae7..227bcc349 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -55,15 +55,15 @@
 		</div>
 		<footer>
 			<mk-reactions-viewer :note="p"/>
-			<button @click="reply" title="">
+			<button class="replyButton" @click="reply" title="">
 				<template v-if="p.reply">%fa:reply-all%</template>
 				<template v-else>%fa:reply%</template>
 				<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 			</button>
-			<button @click="renote" title="%i18n:@renote%">
+			<button class="renoteButton" @click="renote" title="%i18n:@renote%">
 				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
+			<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
 				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 			</button>
 			<button @click="menu" ref="menuButton">
@@ -372,15 +372,24 @@ root(isDark)
 				cursor pointer
 
 				&:hover
-					color isDark ? #9198af : #666
+					color isDark ? #a1a8bf : #444
+
+				&.replyButton:hover
+					color #0af
+
+				&.renoteButton:hover
+					color #8d0
+
+				&.reactionButton:hover
+					color #fa0
 
 				> .count
 					display inline
 					margin 0 0 0 8px
 					color #999
 
-				&.reacted
-					color $theme-color
+				&.reacted, &.reacted:hover
+					color #fa0
 
 	> .replies
 		> *
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index a98df104a..87acf7974 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -42,15 +42,15 @@
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button @click="reply" title="%i18n:@reply%">
+				<button class="replyButton" @click="reply" title="%i18n:@reply%">
 					<template v-if="p.reply">%fa:reply-all%</template>
 					<template v-else>%fa:reply%</template>
 					<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
-				<button @click="renote" title="%i18n:@renote%">
+				<button class="renoteButton" @click="renote" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
-				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
+				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
 				<button @click="menu" ref="menuButton">
@@ -487,20 +487,24 @@ root(isDark)
 					cursor pointer
 
 					&:hover
-						color isDark ? #9198af : #666
+						color isDark ? #a1a8bf : #444
+
+					&.replyButton:hover
+						color #0af
+
+					&.renoteButton:hover
+						color #8d0
+
+					&.reactionButton:hover
+						color #fa0
 
 					> .count
 						display inline
 						margin 0 0 0 8px
 						color #999
 
-					&.reacted
-						color $theme-color
-
-					&:last-child
-						position absolute
-						right 0
-						margin 0
+					&.reacted, &.reacted:hover
+						color #fa0
 
 	> .detail
 		padding-top 4px