Change Reactions

Hey Anton L - Can you assist with this question. I would like to change the reaction to like what is listed here:
https://github.com/unaio/una/issues/1691

Still looking for assistance on this. I would like to make them full colored emojis like the ticket number posted above. Thanks. 

Some help on this one would be nice too 😁

Alex or Anton? 

Chris colors are not adjustable, I did like this but it is difficult to find colors that go well on both dark and light theme. So you would need to inject different colors for each theme.

/*   Color reactions */
.col-red3 {
color: #fff;
}
.col-red1 {
color: #ff006b;
}

Thanks Baloo - I did find that I could go into Developer > Forms > Data Items then choose System and then Reactions from the second field. If you click the edit button there, you can see the colors assigned as well. For example, "Love" reaction looks like this:

a:2:{s:4:"icon";s:26:"heart sys-colored col-red1";s:6:"weight";s:1:"1";}

I do not understand that enough to make changes outside of red1, 2, 3 etc. Seems anything else I do breaks the reaction emoji. I am hoping someone will tell me how to add the ones displayed in https://github.com/unaio/una/issues/1691

Aww come on fellas.. Help me out here 😁 I want my reactions to look like this:

I'm sure there are some open source animated emojis on the net. Can we upload our own emojis?

Well, That is what I am trying to find out actually 😁 . Even if we were able to upload our own, we need still to know where they can be changed

OK, so I figured out how to change these Reactions however, there really should be an easier way of just changing them within Studio somehow. 

I am NOT recommending doing this as you will need to change a core icon.css file and it will get overwritten by any updates to Font Awesome. However, if you want to do this, this is what I did to change them. 

As I mentioned above, these are located in the modules/boonex/fontawesome/template/css/icons.css file. I would make a backup of this file first. I tried to put these changes in my Custom Styles area but it didn't work. You will need to download whatever emojis you want to use for you reactions. I changed all of my sizes to 20px x 20px as it seems to "fit" a little better. 

From there, I created a folder called "emoji" in the modules/boonex/fontawesome/template/css/ directory. I uploaded these emojis into that folder. Then you will need to locate the following entries in modules/boonex/fontawesome/template/css/icons.css for each reactions (I put names to them so you know what they are like haha, love, etc):

HAHA/LOL
.sys-icon.grin-squint:before, .fa-grin-squint:before

LOVE
.sys-icon.heart:before, .fa-heart:before

SAD
.sys-icon.sad-tear:before, .fa-sad-tear:before

ANGRY
.sys-icon.angry:before, .fa-angry:before

LIKE
.sys-icon.thumbs-up:before, .fa-thumbs-up:before

Each one of these entries have a "content" entry like this:

.sys-icon.sad-tear:before, .fa-sad-tear:before {
content: "\f5b4"; }

You will need to change that "content" to point to the folder you uploaded your emojis in :

Change from:

.sys-icon.sad-tear:before, .fa-sad-tear:before {
content: "\f5b4"; }

TO (assuming you named your sad emoji as sad.png)

.sys-icon.sad-tear:before, .fa-sad-tear:before {
content: url("emoji/sad.png"); }

Keep replacing each one above with  url("emoji/xxxx.png"); xxxx = the file name of the emoji

You're welcome 😀 

Thank you so much. I am going to try to use animated .gif emojis to add some extra flavor to the sauce.

Good, I do not know how to try for now, what does it look like on the dark theme?

Hey Baloo - Doesn't look too bad with the emojis I have picked.

You're right, it's much better as well. Let's say more expressive ! 😮

Does anyone know how I can make different icons for the Thank you! and Like reaction? When I use this code in Custom Styles: .sys-icon.thumbs-up:before, .fa-thumbs-up:before{content: url("--"); } I end up changing both Thank you and Like Thumb up icons... (screenshot attached)

And another question: does anyone know how I can deactivate the pop-up with other reactions?

I need to have two buttons with two different icons.

I got it working on my sites and they are animated on my sites. Took a bit of time and playing about. UNA really need to make it easy to change the reactions and to add new ones. Anyone want to see a video of it working message me.