style(tangle-dapp): Improve mobile responsiveness

yurixander commented 1 week ago

Summary of changes

Provide a detailed description of proposed changes.

🔧 Improved the code & styling of the modal components to have a more standardized modal interface.
🎨 Improved the responsiveness of all modals, and added mobile-friendly positioning & animations (ex. they now slide up from the bottom and are located on the bottom of the screen instead of the center for mobile viewports).
🎨 Improved the design of the Bridge page and made the UI a bit more intuitive. For example, now the dropdown icon no longer appears if there's only one chain option.
🎨 Improved the responsiveness of the Liquid Staking page.

Proposed area of change

Put an x in the boxes that apply.

[x] apps/tangle-dapp
[ ] apps/tangle-cloud
[ ] libs/tangle-shared-ui
[x] libs/webb-ui-components

Associated issue(s)

Specify any issues that can be closed from these changes (e.g. Closes #233).

Closes #2656

Screen Recording

If possible provide screenshots and/or a screen recording of proposed change.

https://github.com/user-attachments/assets/55f94495-cfd8-4bf9-b664-02405441571c

netlify[bot] commented 1 week ago

Deploy Preview for tangle-dapp ready!

Name	Link
Latest commit	a2f8ca0294d5660c5dfa0a787ab7fef5f8bda345
Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/673940ae670e950008a30810
Deploy Preview	https://deploy-preview-2657--tangle-dapp.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 week ago

Deploy Preview for tangle-cloud ready!

Name	Link
Latest commit	a2f8ca0294d5660c5dfa0a787ab7fef5f8bda345
Latest deploy log	https://app.netlify.com/sites/tangle-cloud/deploys/673940ae4407da00080c878b
Deploy Preview	https://deploy-preview-2657--tangle-cloud.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

drewstone commented 1 week ago

How do we get nomination label (or bridge or restaked, etc) into the top navbar row?

yurixander commented 1 week ago

How do we get nomination label (or bridge or restaked, etc) into the top navbar row?

@drewstone The breadcrumbs I think its better to leave them under for now, the thing is it does look better above but breadcrumbs get wide so it'll look awkward in some cases or run out of space, and also it's complex to refactor it that way

tangle-network / dapp