From 8b5f6ec1c64a5807739b87dafc1a1c6a400a9276 Mon Sep 17 00:00:00 2001
From: arayaryoma <r1o.ryoma.abe@gmail.com>
Date: Sun, 18 Jul 2021 22:27:30 +0900
Subject: [PATCH 1/4] Sitch reacted state by clicking

---
 src/components/emoji/Reaction.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/emoji/Reaction.vue b/src/components/emoji/Reaction.vue
index 6b164560..d09f56da 100644
--- a/src/components/emoji/Reaction.vue
+++ b/src/components/emoji/Reaction.vue
@@ -5,12 +5,25 @@ export default defineComponent({
   props: {
     src: { type: String, required: true },
   },
+  data() {
+    return {
+      hasReacted: false,
+    };
+  },
+  methods: {
+    toggleReacted() {
+      this.hasReacted = !this.hasReacted;
+    },
+  },
 });
 </script>
 
 <template>
-  <div class="reaction">
-    <img class="reaction_icon" :src="src"> 5
+  <div
+    :class="'reaction' + (hasReacted ? ' reacted' : '')"
+    @click="toggleReacted"
+  >
+    <img class="reaction_icon" :src="src" /> 5
   </div>
 </template>
 

From 5980790ea7cd7744a6e39673097970a293f1cd59 Mon Sep 17 00:00:00 2001
From: arayaryoma <r1o.ryoma.abe@gmail.com>
Date: Sun, 18 Jul 2021 22:27:47 +0900
Subject: [PATCH 2/4] Impelemnt reacted button style for light-theme

---
 src/components/emoji/Reaction.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/emoji/Reaction.vue b/src/components/emoji/Reaction.vue
index d09f56da..6169d700 100644
--- a/src/components/emoji/Reaction.vue
+++ b/src/components/emoji/Reaction.vue
@@ -40,6 +40,14 @@ export default defineComponent({
   border-radius: 12px;
 }
 
+.reaction.reacted,
+.reaction.reacted:hover {
+  box-shadow: inset 0 0 0 1.5px rgb(29, 155, 209);
+  background-color: rgba(29, 155, 209, 0.1);
+  color: rgb(18, 100, 163);
+  border-color: transparent;
+}
+
 .reaction:hover {
   background-color: rgba(128, 128, 128, 0.2);
   border-color: currentColor;

From a1af615f44250ba503901ecf5da658cd991b22ca Mon Sep 17 00:00:00 2001
From: arayaryoma <r1o.ryoma.abe@gmail.com>
Date: Sun, 18 Jul 2021 22:35:40 +0900
Subject: [PATCH 3/4] Implement stylesheets for dark-theme

---
 src/components/emoji/Preview.vue  |  2 +-
 src/components/emoji/Reaction.vue | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/emoji/Preview.vue b/src/components/emoji/Preview.vue
index 8b3ce796..a607f924 100644
--- a/src/components/emoji/Preview.vue
+++ b/src/components/emoji/Preview.vue
@@ -33,7 +33,7 @@ export default defineComponent({
     </div>
     <div>
       <span v-for="(row, i) in images" :key="i">
-        <Reaction v-for="(col, j) in row" :key="j" :src="col" />
+        <Reaction v-for="(col, j) in row" :key="j" :src="col" :dark-mode="darkMode" />
       </span>
     </div>
   </div>
diff --git a/src/components/emoji/Reaction.vue b/src/components/emoji/Reaction.vue
index 6169d700..d952c429 100644
--- a/src/components/emoji/Reaction.vue
+++ b/src/components/emoji/Reaction.vue
@@ -4,6 +4,7 @@ import { defineComponent } from "vue";
 export default defineComponent({
   props: {
     src: { type: String, required: true },
+    darkMode: { type: Boolean, required: true },
   },
   data() {
     return {
@@ -20,7 +21,9 @@ export default defineComponent({
 
 <template>
   <div
-    :class="'reaction' + (hasReacted ? ' reacted' : '')"
+    :class="
+      'reaction' + (hasReacted ? ' reacted' : '') + (darkMode ? ' dark' : '')
+    "
     @click="toggleReacted"
   >
     <img class="reaction_icon" :src="src" /> 5
@@ -40,14 +43,21 @@ export default defineComponent({
   border-radius: 12px;
 }
 
-.reaction.reacted,
-.reaction.reacted:hover {
+.reaction.reacted:not(.dark),
+.reaction.reacted:not(.dark):hover {
   box-shadow: inset 0 0 0 1.5px rgb(29, 155, 209);
   background-color: rgba(29, 155, 209, 0.1);
   color: rgb(18, 100, 163);
   border-color: transparent;
 }
 
+.reaction.reacted.dark,
+.reaction.reacted.dark:hover {
+  box-shadow: none;
+  background-color: #1264a3;
+  border-color: #1264a3;
+}
+
 .reaction:hover {
   background-color: rgba(128, 128, 128, 0.2);
   border-color: currentColor;

From 8cc714918ffb0e807652b4ea1e275f8e380c27b9 Mon Sep 17 00:00:00 2001
From: arayaryoma <r1o.ryoma.abe@gmail.com>
Date: Sun, 18 Jul 2021 22:42:40 +0900
Subject: [PATCH 4/4] Fix lint problems

---
 src/components/emoji/Reaction.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/emoji/Reaction.vue b/src/components/emoji/Reaction.vue
index d952c429..a59ed82b 100644
--- a/src/components/emoji/Reaction.vue
+++ b/src/components/emoji/Reaction.vue
@@ -21,12 +21,11 @@ export default defineComponent({
 
 <template>
   <div
-    :class="
-      'reaction' + (hasReacted ? ' reacted' : '') + (darkMode ? ' dark' : '')
-    "
-    @click="toggleReacted"
-  >
-    <img class="reaction_icon" :src="src" /> 5
+      :class="
+        'reaction' + (hasReacted ? ' reacted' : '') + (darkMode ? ' dark' : '')
+      "
+      @click="toggleReacted">
+    <img class="reaction_icon" :src="src"> 5
   </div>
 </template>
 
@@ -45,17 +44,17 @@ export default defineComponent({
 
 .reaction.reacted:not(.dark),
 .reaction.reacted:not(.dark):hover {
-  box-shadow: inset 0 0 0 1.5px rgb(29, 155, 209);
-  background-color: rgba(29, 155, 209, 0.1);
   color: rgb(18, 100, 163);
+  background-color: rgba(29, 155, 209, 0.1);
   border-color: transparent;
+  box-shadow: inset 0 0 0 1.5px rgb(29, 155, 209);
 }
 
 .reaction.reacted.dark,
 .reaction.reacted.dark:hover {
-  box-shadow: none;
   background-color: #1264a3;
   border-color: #1264a3;
+  box-shadow: none;
 }
 
 .reaction:hover {