Enhanced Telegram MiniApp

[ihsraham]

Enhance Telegram MiniApp with Improved Theming, Responsiveness, Accessibility, and Code Organization

---

Motivation and Context

This update enhances the Telegram MiniApp to ensure brand consistency with Web3Auth, improve user experience across different themes (light and dark modes), and provide a more responsive, accessible, and performant interface. Additionally, it addresses several layout, styling, and usability bugs.

This change was required to create a more polished and professional user interface, aligning closely with Web3Auth's design guidelines while ensuring the app is accessible and performs well across various screen sizes and devices.

Jira Link: DEVREL-1057

---

Description

Changes Made

1. Theme Implementation

   • Added a toggle for light/dark mode to improve user experience.
   • Implemented color variables in :root for easy theme management.
   • Set dark mode background to match Web3Auth's official design (#0F1221).
   • Enabled smooth transitions between themes for a polished effect.

2. Layout & Spacing

   • Adjusted content layout to fit within a single viewport, eliminating the need for scrolling.
   • Fixed horizontal centering issues to ensure consistent layout across devices.
   • Set container width with max-width: min(600px, 90%) for optimal readability.
   • Improved spacing between elements for better visual separation.
   • Resolved footer line visibility issues to maintain a clean design.

3. Responsive Design

   • Introduced media queries to adapt to various screen heights.
   • Used clamp() for responsive font sizing, ensuring readability on all devices.
   • Adjusted logo size with width: min(180px, 40%) for optimal display.
   • Made padding and margins adaptive to smaller screens.

4. Typography & Styling

   • Applied Web3Auth's gradient to the title for brand consistency.
   • Enhanced font sizes and weights for readability and emphasis.
   • Improved letter spacing for a clean, modern look.

5. Component Styling

   • Added card shadows and borders for a more defined and interactive design.
   • Enhanced hover states for better user feedback.
   • Added transitions to interactive elements for smooth interactions.
   • Fixed positioning of the copy icon, including hover and active states.

6. Performance & Best Practices

   • Applied box-sizing: border-box for consistent sizing.
   • Prevented horizontal scroll issues across all layouts.
   • Optimized transitions for smoother animations.
   • Added vendor prefixes to ensure cross-browser compatibility.

7. Brand Consistency

   • Aligned color scheme with Web3Auth's branding.
   • Used official gradient colors from Web3Auth's design system.
   • Maintained consistent spacing and layout structure.

8. Bug Fixes

   • Resolved theme toggle alignment issues.
   • Fixed layout shifting in the container on different screen sizes.
   • Resolved disappearing footer line issue.
   • Corrected text overflow issues for long messages and account addresses.

9. Accessibility

   • Ensured high color contrast for better readability.
   • Made all interactive elements keyboard accessible.
   • Added ARIA labels for better screen reader support.
   • Used readable font sizes that comply with accessibility standards.

10. Code Organization

    • Grouped related CSS properties for better readability.
    • Added descriptive comments for clarity.
    • Used consistent naming conventions across components.
    • Structured code for maintainability and scalability.

---

How has this been tested?

The following testing steps were taken to ensure functionality and stability:

• Environment: Tested on various screen sizes, including mobile and desktop.
• Theme Toggle: Verified light/dark mode toggle across different devices and Telegram app themes.
• Responsiveness: Ensured that elements resized and reflowed correctly in different viewport sizes.
• Performance: Observed transitions and responsiveness to confirm smooth performance.

---

Screenshots (if appropriate)

---

Types of Changes

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

---

Checklist

• My code follows the code style of this project. (run lint)
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My code requires a db migration.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
mpc-core-kit-aggregate-verifier-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-angular-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-bitcoin	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-farcaster	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-nextjs-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-react-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-solana	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
mpc-core-kit-vue-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-angular-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-nextjs-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-react-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-vanillajs-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-vue-quick-start	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-aggregate-verifier-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-auth0-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-bitcoin-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-farcaster	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-google-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-nextauth-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-passwordless-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-ton-telegram-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
sfa-web-ton-telegram-server	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm
web3auth-core-kit-examples	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:34pm