227 lines
6.4 KiB
Markdown
227 lines
6.4 KiB
Markdown
# EU-Utility UI Consistency Report
|
|
|
|
**Date:** 2026-02-14
|
|
**Agent:** UI/UX Polish Agent
|
|
**Scope:** Complete UI audit for Entropia Universe aesthetic matching
|
|
|
|
---
|
|
|
|
## Executive Summary
|
|
|
|
The EU-Utility project has a solid foundation with `eu_styles.py` providing a comprehensive design system. However, there are several inconsistencies that need addressing to achieve a professional, polished UI that matches Entropia Universe's sci-fi aesthetic.
|
|
|
|
**Overall Grade: B-** (Good foundation, needs polish)
|
|
|
|
---
|
|
|
|
## 1. Color System Review ✅
|
|
|
|
**Status:** GOOD
|
|
|
|
The `eu_styles.py` color system is well-designed:
|
|
- Dark theme matches EU's sci-fi aesthetic
|
|
- Orange accent (#ff8c42) is appropriate for EU branding
|
|
- Teal secondary accent provides good contrast
|
|
- Proper layering with primary/secondary/tertiary backgrounds
|
|
|
|
**Verified Colors:**
|
|
```python
|
|
'accent_orange': '#ff8c42' # EU Logo orange - CORRECT
|
|
'accent_teal': '#4ecdc4' # Good sci-fi cyan
|
|
'bg_primary': '#0d1117' # Deep space dark - CORRECT
|
|
'accent_gold': '#ffc107' # PED gold - CORRECT
|
|
```
|
|
|
|
**Recommendation:** Colors are accurate. No changes needed.
|
|
|
|
---
|
|
|
|
## 2. Emoji Usage - CRITICAL ISSUE ❌
|
|
|
|
**Status:** NEEDS IMMEDIATE FIX
|
|
|
|
Emojis are used extensively throughout the codebase instead of SVG icons. This creates:
|
|
- Inconsistent rendering across platforms
|
|
- Unprofessional appearance
|
|
- Accessibility issues
|
|
- Violation of the IconManager philosophy ("NO emojis")
|
|
|
|
### Files with Emoji Violations:
|
|
|
|
| File | Emojis Found |
|
|
|------|-------------|
|
|
| `core/dashboard.py` | 📊, ⚡, 🔍, 📸, 🎵, 🪙 |
|
|
| `core/overlay_widgets.py` | 📈, 🎯, 🎵, 📜, ⏮, ▶, ⏭ |
|
|
| `core/overlay_window.py` | 🌙, ☀️, ✕, 🎯, 📦 |
|
|
| `core/plugin_ui_components.py` | 🔍 |
|
|
| `plugins/auction_tracker/plugin.py` | 📈, 🔍 |
|
|
| `plugins/global_tracker/plugin.py` | 💰 |
|
|
| `plugins/universal_search/plugin.py` | ⚠️, ❌, ✅ |
|
|
| `plugins/inventory_manager/plugin.py` | 💰 |
|
|
| `plugins/chat_logger/plugin.py` | 💬, 🔍 |
|
|
| `plugins/mission_tracker/plugin.py` | ⚔️ |
|
|
| `plugins/dpp_calculator/plugin.py` | 🎯 |
|
|
| `plugins/settings/plugin.py` | 🗑️ |
|
|
| `plugins/game_reader/plugin.py` | 📋, ✅, ❌, 📋 |
|
|
| `plugins/spotify_controller/plugin.py` | ❌ |
|
|
| `plugins/event_bus_example/plugin.py` | ⚔️ |
|
|
|
|
### Required SVG Icons (Missing):
|
|
|
|
| Emoji | Purpose | Icon Name |
|
|
|-------|---------|-----------|
|
|
| ✅ | Success status | `check.svg` (exists) |
|
|
| ❌ | Error status | `close.svg` (exists) |
|
|
| ⚠️ | Warning status | `warning.svg` (NEED TO CREATE) |
|
|
| 🔍 | Search | `search.svg` (exists) |
|
|
| 📈 | Stats/Trends | `trending-up.svg` (exists) |
|
|
| 💰 | PED/Money | `dollar-sign.svg` (exists) |
|
|
| 📊 | Dashboard | `grid.svg` or `bar-chart.svg` (NEED TO CREATE) |
|
|
| ⚡ | Quick Actions | `zap.svg` (exists) |
|
|
| 🎯 | DPP/Target | `target.svg` (exists) |
|
|
| 💬 | Chat | `message-square.svg` (exists) |
|
|
| 🗑️ | Delete/Clear | `trash.svg` (exists) |
|
|
| 📋 | Copy/Clipboard | `clipboard.svg` (NEED TO CREATE) |
|
|
| 🌙 | Dark mode | `moon.svg` (NEED TO CREATE) |
|
|
| ☀️ | Light mode | `sun.svg` (NEED TO CREATE) |
|
|
| 🎵 | Music | `music.svg` (exists) |
|
|
| 📜 | Mission | `map.svg` or `scroll.svg` (exists) |
|
|
| 🪙 | PED Coin | `ped.svg` (exists) |
|
|
| ⚔️ | Combat | `sword.svg` (NEED TO CREATE) |
|
|
| 📦 | Package | `package.svg` (exists) |
|
|
| ✕ | Close | `close.svg` (exists) |
|
|
|
|
---
|
|
|
|
## 3. Plugin Styling Consistency
|
|
|
|
**Status:** NEEDS IMPROVEMENT
|
|
|
|
### Issues Found:
|
|
|
|
1. **Inline styles override theme system**
|
|
- Many plugins use hardcoded colors like `rgba(30, 35, 45, 200)` instead of `get_color('bg_secondary')`
|
|
|
|
2. **Inconsistent border radius**
|
|
- Some use `4px`, others `6px`, others `8px`
|
|
- Should use `EU_SIZES['radius_md']` consistently
|
|
|
|
3. **Font sizes not standardized**
|
|
- Some plugins use hardcoded `font-size: 16px` instead of `EU_TYPOGRAPHY['size_lg']`
|
|
|
|
### Examples of Violations:
|
|
|
|
```python
|
|
# BAD (auction_tracker/plugin.py)
|
|
title.setStyleSheet("color: white; font-size: 16px; font-weight: bold;")
|
|
|
|
# BAD (global_tracker/plugin.py)
|
|
stats_frame.setStyleSheet("""
|
|
QFrame {
|
|
background-color: rgba(30, 35, 45, 200);
|
|
border: 1px solid rgba(100, 110, 130, 80);
|
|
border-radius: 6px;
|
|
}
|
|
""")
|
|
```
|
|
|
|
---
|
|
|
|
## 4. Icon System
|
|
|
|
**Status:** GOOD FOUNDATION, NEEDS COMPLETION
|
|
|
|
The `IconManager` class is well-designed and already excludes emojis. However:
|
|
|
|
### Missing Icon Files:
|
|
|
|
Need to create these SVG files in `assets/icons/`:
|
|
|
|
1. `warning.svg` - For warning states (⚠️ replacement)
|
|
2. `moon.svg` - For dark mode toggle (🌙 replacement)
|
|
3. `sun.svg` - For light mode toggle (☀️ replacement)
|
|
4. `clipboard.svg` - For copy actions (📋 replacement)
|
|
5. `sword.svg` - For combat/mission tracker (⚔️ replacement)
|
|
6. `bar-chart.svg` - For dashboard/stats (📊 replacement)
|
|
7. `minus.svg` - For minimize actions
|
|
|
|
---
|
|
|
|
## 5. Spacing & Alignment
|
|
|
|
**Status:** MOSTLY GOOD
|
|
|
|
The `EU_SPACING` system is properly defined and used in most places:
|
|
```python
|
|
EU_SPACING = {
|
|
'xs': '4px',
|
|
'sm': '8px',
|
|
'md': '12px',
|
|
'lg': '16px',
|
|
'xl': '20px',
|
|
'2xl': '24px',
|
|
'3xl': '32px',
|
|
'4xl': '40px',
|
|
}
|
|
```
|
|
|
|
### Minor Issues:
|
|
- Some hardcoded padding values in plugin UIs
|
|
- Inconsistent margins between plugins
|
|
|
|
---
|
|
|
|
## 6. Responsive Behavior
|
|
|
|
**Status:** IMPLEMENTED BUT LIMITED
|
|
|
|
The `ResponsiveHelper` class exists but is underutilized:
|
|
|
|
```python
|
|
class ResponsiveHelper:
|
|
BREAKPOINTS = {
|
|
'sm': 640,
|
|
'md': 768,
|
|
'lg': 1024,
|
|
'xl': 1280,
|
|
'2xl': 1536,
|
|
}
|
|
```
|
|
|
|
### Current Usage:
|
|
- `overlay_window.py` uses it to hide sidebar on small screens
|
|
- Most plugins don't implement responsive layouts
|
|
|
|
---
|
|
|
|
## 7. Recommendations Summary
|
|
|
|
### Priority 1 (Critical):
|
|
1. Replace all emojis with SVG icons
|
|
2. Create missing SVG icon files
|
|
3. Update IconManager PLUGIN_ICONS mapping
|
|
|
|
### Priority 2 (Important):
|
|
1. Standardize plugin styling to use `eu_styles` functions
|
|
2. Remove inline style definitions from plugins
|
|
3. Create reusable plugin UI templates
|
|
|
|
### Priority 3 (Nice to have):
|
|
1. Implement responsive layouts for all plugins
|
|
2. Add animation helpers to all UI transitions
|
|
3. Add high contrast mode support
|
|
|
|
---
|
|
|
|
## Deliverables Created
|
|
|
|
1. ✅ Missing SVG icons created in `assets/icons/`
|
|
2. ✅ `icon_helper.py` - Helper functions for icon usage
|
|
3. ✅ Updated plugin files with emoji replacements
|
|
4. ✅ Updated `eu_styles.py` with helper utilities
|
|
5. ✅ Consistency fixes applied to core files
|
|
|
|
---
|
|
|
|
**End of Report**
|