mirror of
https://github.com/A6-9V/MQL5-Google-Onedrive.git
synced 2026-04-11 05:10:58 +00:00
3bf1aa2163
- Added SVG icon with hover animation to external links in index.html and dashboard/index.html - Updated web_dashboard.py template to include the same icon and animation for consistency - Added 'Open' button with icon to Telegram Bot status in web_dashboard.py - Documented new UX pattern in .jules/palette.md This change improves usability by clearly indicating which links open in a new tab and providing a subtle motion cue on hover.
13 lines
1.5 KiB
Markdown
13 lines
1.5 KiB
Markdown
## PALETTE'S JOURNAL - CRITICAL LEARNINGS ONLY
|
|
|
|
## 2026-02-13 - [Brand Color Contrast Failure]
|
|
**Learning:** The brand color `#667eea` fails WCAG AA contrast (3.4:1) against white backgrounds, affecting accessibility for text headers and primary buttons.
|
|
**Action:** Replace `#667eea` with `#4f46e5` (Indigo 600) which passes WCAG AA (5.5:1) while maintaining brand identity. Update all instances including `manifest.json`.
|
|
|
|
## 2026-02-26 - [Copy to Clipboard Micro-Interaction]
|
|
**Learning:** Users frequently need to copy system identifiers (like bot handles) to share or search. Adding a dedicated copy button with immediate visual feedback (icon change to checkmark) significantly reduces friction compared to manual selection.
|
|
**Action:** Identify other read-only data fields (IDs, keys, paths) that users might need to copy and apply this pattern. Ensure the success state resets after a short delay (e.g., 2s) and updates the aria-label for accessibility.
|
|
|
|
## 2026-02-27 - [External Link Micro-Interaction]
|
|
**Learning:** Static external links often surprise users by opening new tabs without warning. Adding a consistent "external link" icon that animates (moves up-right) on hover provides a subtle, non-intrusive cue about the link's behavior (opening a new context).
|
|
**Action:** Use the `.btn` class with `inline-flex` and the specific SVG icon pattern for all primary actions that lead to external services (Telegram, Exness, etc.). Ensure the icon is `aria-hidden` if the text label (or aria-label) already explicitly states "opens in new tab".
|