style(tangle-dapp): Design changes in jam meeting

[yuri-xyz]

Summary of changes

Provide a detailed description of proposed changes.

• ➕ The sidebar now automatically closes when a link is clicked.
• 🔧 Some wallets (such as MetaMask) allow for dApp usage on mobile via a built-in browser. However, our current Connect Wallet modal does not allow mobile users to connect their wallets. Fixed that.
• 🎨 Implemented and completed the design jam meeting changes across different components, improving design details, spacing, colors, and more.
• 🎨 Improved table consistency by explicitly defining 4 different table variants, so that they can be reused without custom class names.
• 🎨 Improved the loading spinner icon and animation to look more modern and fitting within the dapp.
• 🎨 Increased sizing of tooltips and made general legibility & readability improvements.
• 🎨 Applied container consistency across pages: Liquid staking cards, bridge, and restaking operations.
• 🎨 Other misc. small design bug fixes and improvements.

Proposed area of change

Put an x in the boxes that apply.

• apps/tangle-dapp
• apps/tangle-cloud
• libs/tangle-shared-ui
• libs/webb-ui-components

Associated issue(s)

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

• Closes [TASK] Design jam / updates #2665
• Closes [TASK] Unify liquid staking & restaking UI #2672

Screen Recording

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

Added mobile responsiveness for wallet connect modal, which was previously unusable for mobile devices:

Improved loading page layout:

Improved spinners:

Screenshot.2024-11-21.at.22.08.40.mp4

[netlify]

✅ Deploy Preview for tangle-cloud ready!

Name	Link
🔨 Latest commit	1fd6403
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-cloud/deploys/6743d1da5dc33d00083db2ed
😎 Deploy Preview	https://deploy-preview-2664--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.

[netlify]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	1fd6403
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/6743d1dad1172d000852dcf6
😎 Deploy Preview	https://deploy-preview-2664--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.

[drewstone]

The page layout loading for bridge doesn't look like the bridge actually looks though ya?

[drewstone]

Awesome work!