Hello,
I made some CSS modification on Discourse Reactions Plugin. So it looks much like Facebook reaction buttons.
These for 6 reaction buttons including the default which is on my site is 
.
COMMON / SCSS
Place this code to common - css section.
Important notice: You can modify the emojis above label with edit content: 'Love it!', content: 'Beautiful' etc… lines: Of course you can use whatever reaction you want. It is just a label above the reactions.
.discourse-reactions-picker {
.discourse-reactions-picker-container {
width: 330px;
height: 50px;
max-width: calc(100vw - 2em);
border: 1px solid var(--primary-low) !important;
border-radius: 50px;
.pickable-reaction {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.pickable-reaction {
background: transparent !important;
.emoji {
height: 40px;
width: 40px;
padding: 0 !important;
transform: scale(0.9);
}
&.is-used {
transform: scale(1.3);
transform-origin: bottom;
border: none !important;
}
&:hover {
transform-origin: bottom;
}
&:hover:after {
position: absolute;
font-size: 10px;
top: -15px;
background: var(--secondary-low);
color: var(--secondary);
padding: 2px 5px;
border-radius: 20px;
}
&:first-child {
&:hover:after {
content: 'Love it!';
}
}
&:nth-child(2) {
&:hover:after {
content: 'Beautiful';
}
}
&:nth-child(3) {
&:hover:after {
content: 'Hug';
}
}
&:nth-child(4) {
&:hover:after {
content: 'Congrats!!';
}
}
&:nth-child(5) {
&:hover:after {
content: 'Hmm...';
}
}
&:nth-child(6) {
&:hover:after {
content: 'Wooow!';
}
}
}
}
Mobile
On mobile I set position fixed the reactions picker position.
This is a possible option to prevent this strange behaviour. 
Looks like this
Same thing happening with state panel on mobile that was on reactions picker so also use position fixed.
Mobile / SCSS
.discourse-reactions-picker {
position: fixed;
.pickable-reaction {
&:hover:after {
font-size: 12px;
top: -8px;
}
&.is-used {
&:hover:after {
transform: scale(0.8);
top: -15px;
}
}
}
}
.discourse-reactions-state-panel {
position: fixed;
}
Hide default who liked section
COMMON / CSS
I hide the default who’s liked section because the Reactions State Panel also show those informations.
.who-liked {
display: none;
}
…
Thank you!
أعتقد أنني سأقوم بإنشاء مكون سمة من هذا لجعله أسهل في الاستخدام ويتناسب مع ردود الفعل، وإضافة بعض الإصلاحات وما إلى ذلك… آمل أن يساعد ذلك. سأحاول القيام بذلك الأسبوع المقبل.
