modify feedback widget behaviour

[malunem]

Description

• Add isExpanded state to FeedbackWidget component
• Set a 30sec timeout as a side effect to change isExpanded state to true and clear timeout on unmount
• Use media query to apply style changes only on desktop devices
• Apply 0.5 transition timing for width and border-radius
• Reset isExpanded to false when isOpen is reset too
• Import Text component from ChakraUI
• Truncate text while expanding to show a smooth animation

Related Issue

#8298

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 21m build time

[pettinarip]

Thanks for the PR @marcellamalune. I think the basic animation is working but there are some problems when the expanding animation starts. Take a look at this to see it clearly:
https://user-images.githubusercontent.com/468158/198043249-d6e3e1f4-5c69-4c76-bb2f-c46ed4ea9608.mp4

[pettinarip]

This is looking nice so far @marcellamalune. Wanted to check with @konopkja what he thinks about it? should the animation be faster? or is it ok as it is?

[konopkja]

looks nice! agree, the animation could be twice as fast. other than that it looks good.

[malunem]

Thank you for your feedback @pettinarip @konopkja! I speeded up the animation.

[konopkja]

• Deploy preview

ok this is better. @pettinarip im good with this.

[corwintines]

Hey @marcellamalune!

Noticing this isn't working on mobile.

[malunem]

Hey @marcellamalune!

Noticing this isn't working on mobile.

Sorry about that, I screwed up something with the latest changes without realizing. Now it's fixed.

[corwintines]

Thanks for fixing @marcellamalune. Will get to review this week, but I did add the hacktoberfest-accepted label to get you credit for this still.

[pettinarip]

The overall result looks great right now @marcellamalune. My only concern is more about the implementation using ids, wondering if we could adjust a bit that.

[pettinarip]

I don't love the idea of using ids to achieve this. Why can't we implement this logic using style props?

Can't we do this like

<Text ... width={{ base: "3rem", lg: isExpanded ? "13.5rem" : "3rem" }}>
  <Box
    as={Translation}
    id="feedback-card-prompt-page"
    display={{ base: "flex", lg: isExpanded ? "flex" : "none" }}
  />
</Text>

[malunem]

@pettinarip thanks for the feedback and for the improvements you've made 🙂

[konopkja]

@pettinarip @marcellamalune can we push this forward?

[pettinarip]

@pettinarip @marcellamalune can we push this forward?

I think this is done. I'll do some small tweaks and get it merged.

[corwintines]

Thanks @marcellamalune and @pettinarip!