Update reactions to new design

[Half-Shot]

https://www.figma.com/design/fq7cTHPNHZX3ttFW1gBEnv/Compound-Element-Call?node-id=3503-20185&node-type=frame&t=wxQhSaTWeyrvUxhq-0

Needs tests still.

	Closed	Open
Desktop
Mobile

[toger5]

What is the reason for the yaxis asymmetry here:

.reactionPopupMenuModal > div > div {
  padding-inline: var(--cpd-space-6x) !important;
padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;

To me it just looks off that the icons are not y centered

[robintown]

Removing this will regress #2754

[Half-Shot]

Looks like a case of Ctrl-X rather than Ctrl-C

[toger5]

Is the very small width addressed in the PR?

[Half-Shot]

Is the very small width addressed in the PR?

Should help, although

Is the very small width addressed in the PR?

yep!

[toger5]

This has not yet been addressed: #2751 (comment)
Is there a reason for the asymmetry.

Maybe it would be interesting to explore adding some react spring (or maybe a css transition is enough) to open and close the expanded/non expanded panel?

[Half-Shot]

This has not yet been addressed: #2751 (comment) Is there a reason for the asymmetry.

Maybe it would be interesting to explore adding some react spring (or maybe a css transition is enough) to open and close the expanded/non expanded panel?

That chunk didn't seem to be making any visual difference so removed it. I'm afraid my eyes might be failing me, but it looks y centered to me.

[toger5]

Maybe you are looking at a different y-centering?

The two boxes have the same size (this is the screenshot from your examples)

[toger5]

That chunk didn't seem to be making any visual difference so removed it

I think we still need to reduce it to:

padding: var(--cpd-space-6x);

otherwise we get the dialog default of -x10 which looks to generous

[toger5]

This looks nice.
What do you think about the idea of making the open/close of the reactions animated?
I also think the disabled state is a bit unfortunate (with the grey bg)
It would be nice if the icon would be a bit transparent...
But It seems we are just passing disabled to compound so this probably should not be done here.

[toger5]

@Half-Shot I also think we can do a shortcut:

• if the hand is raised and you press the raise hand button we can just lower the hand?
• this looses the option to: "send reaction while raising hand" but i think that is worth the nicer ux of lowering immediately.

[Half-Shot]

This looks nice. What do you think about the idea of making the open/close of the reactions animated? I also think the disabled state is a bit unfortunate (with the grey bg) It would be nice if the icon would be a bit transparent... But It seems we are just passing disabled to compound so this probably should not be done here.

I had a look at animating it, but it is a bit of a faff with the dialog present. I'll do a draft PR with some animations to follow this up.

The disabled state is a bit unfortunate, yeah. I think it's a compound problem yep.

[toger5]

I had a look at animating it, but it is a bit of a faff with the dialog present. I'll do a draft PR with some animations to follow this up.

it its not as easy as addin a css tanstition duration we should not bother too much about it!