Tab design improvements

[ArafatOSDev]

What does this PR do?

Improve minimize tab design.

Fixes #7150

[greptile-apps]

PR Summary

This pull request improves the minimized tab design in the right drawer, addressing the requirements specified in issue #7150.

• Updated StyledContainer in RightDrawer.tsx with new styling, including border-radius, blur effect, and box shadow
• Modified animationVariants.minimized to adjust width and height of the minimized tab
• Removed border-left and border-top styles from StyledContainer for a cleaner look
• Added backdrop-filter: blur(40px) to create the desired blur effect on the minimized tab
• Potential performance impact due to the blur effect should be considered, especially on lower-end devices

_{2 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings}

[ehconitin]

Left some comments ;)

[ehconitin]

@FelixMalfait LGTM!
Could you check if animations are smooth, I couldnt judge with my laggy machine :)

Update - lets wait on the merge, need some clarifications

[ehconitin]

@Bonapara
should minimized tab also appear for mobile devices?
As of now we dont show minimize button for mobile devices.

[FelixMalfait]

We should most likely keep the current behavior on mobile, I don't think there's room to display both the tab bar and additional sub-tabs :)

But this PR needs to be adjusted because it changes the design not just of the minimized side-panel but also of the standard right drawer. In that case, we want to keep the previous look.

Animations looked fine to me!

[ArafatOSDev]

Hi @FelixMalfait, I can keep the right tab bar design & change the minimize tab design.

[FelixMalfait]

@ArafatOSDev thanks! Would be great if you can make the required adjustments

[ehconitin]

@ArafatOSDev are you still working on this PR?

[ArafatOSDev]

@ehconitin Yes, I am working on this PR.

[ArafatOSDev]

@ehconitin Can you check this PR now?

[FelixMalfait]

Hey @ArafatOSDev I pushed a fix. We should avoid introducing new variables + avoid using useEffect unless it's strictly necessary. Also the border color was stronger in minimized state. I revert the commits to start fresh but took inspiration from your code. Thanks for your contribution!

[FelixMalfait]

/award 100

[oss-gg]

Awarding ArafatOSDev: 100 points 🕹️ Well done! Check out your new contribution on oss.gg/ArafatOSDev

[ehconitin]

Thanks @FelixMalfait

[ArafatOSDev]

Thanks @FelixMalfait I will follow your suggestion for the next contribution.