feat: Slick card look

[Dhruwang]

What does this PR do?

Fixes https://github.com/formbricks/internal/issues/74

Screen-Recording-2024-04-25-at-4.05.23.PM.mp4

Screen-Recording-2024-04-25-at-4.05.00.PM.mp4

How should this be tested?

Go to card settings
Choose among the available card arrangements

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2024 1:53pm

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		May 7, 2024 1:53pm
formbricks-docs	⬜️ Ignored (Inspect)	Visit Preview		May 7, 2024 1:53pm

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[jobenjada]

Hey @Dhruwang

thanks for this, looks really slick already :) We'll have to do a bit of tweaking to get to the look & feel that we want for the cards and overall UX:

Settings UX

1. Only display relevant settings:

We know here what survey type this survey is so pls only display the relevant setting.

---

2. Backwards compatibility: My existing survey was rendered with "casual".

I think we should set all existing surveys to straight or simple (I prefer straight to get the look out there :) )

---

Highlight border clashes:

(looks like a 🦓 )

---

Date Picker and Cal Embed not working

---

Cards Look and Feel

1. The cards don't get smaller the further they are away:

Now that I looked for where I designed that I couldn't even find it 🙈 Pls scale them down a bit and the further they are away the smaller they get.

This also means that the cards need to get scaled up when they go from the stack to become the main question card. This will give the whole look more depth 🤓

---

2. Corner border weak: The border is inconsistent. Please make sure it doesnt fade out on the corners:

---

3. Animation issue: You can see the content of the Thank You card while the second card fades in with opacity.

fade-issue.mp4

---

4. It seems like there is an additional empty card somewhere. You can see it best when the Thank You card fades in

additional-card.mp4

---

5. The hover effect is a bit too slow / delayed. Please have a look at what I built for the Verify Email screen and use this animation: The scale up is snappy / immediately and the cards in the back are slightly delayed and slower.

---

6. The progress bar looks broken. We should hide it on the cards which are staked behind:

---

7. The animate out and in is too "much"

animate.out.mp4

Status quo: The card slides to the left end of the screen and is visible the whole time
What we need: The card slides a bit (~15% screen width) to the right and then fades out

Big elements flying long distances never looks good. We want to have a subtle movement.

---

8. OPTIONAL (do last): Change the direction of "Animate out" for straight card style:

Currently, the card always moves to the right.

For the card "Straight" I'd love the cards to move down and fade out. Since the card stack are clearly positioned above the main visible question card, it will feel more intuitive that the card fades down and out and the next card comes from above.

---

9. Assure that easing is added to all animations: https://tailwindcss.com/docs/transition-timing-function#controlling-the-easing-curve

---

10. Card height issue:

height-change.mp4

Status: As soon as we click "Next" the height of the current card snaps to the height of the following card.
Solution: This shouldn't happen (or it should be slower and animated). It doesn't feel natural that the height of the card changes because the content of it doesn't change (from a logical point of view, not from a technical point of view).

[mattinannt]

@Dhruwang smaller things I saw while scrolling through the code. Please fix before the merge :-)

[jobenjada]

hey @Dhruwang

here are some more things I noticed:

1. The next button pops up in the out animation. Pls resolve:

slick-next-btn.mp4

---

2. Is this an optical illusion or do the cards move down and to the right? It's really hard to tell :D Not horrible but if you have an idea why its not moving straight down, pls check ;)

slick-down-right.mp4

---

3. if you go from a long card to a shorter one you can see the Thank You tick flickr up briefly:

slick-thank-you-flicker.mp4

Any non-hacky idea to solve this?

---

4. UX Remark: Is there a non-hacky way to reset the survey back to start on switching the card arrangement? If your at the end of the survey (or only have 1 cards left) the difference isn't really apparent:

---

5. In app: The Close icon is acting weird. It's missing on most cards and sometimes coming through:

slick-close-icon.mp4

---

6. In app: Height change smoothness

The height change is much smoother for links surveys compared to in-app. Any idea why? 🤔

Uploading slick-smoothness.mp4…

---

7. If we choose "Simple" on In-app surveys we see a flicker between different cards:
   https://github.com/formbricks/formbricks/assets/72809645/399a7fda-9eba-473e-b688-9e10664fbf52

Don't see it for link surveys. Pls look into it.

---

I think that's it ;)