mRemoteNG/VISUAL_EXAMPLES.md

Connection Frame Color - Visual Examples

Before and After

Without Frame Color (Default)

┌──────────────────────────────────────────────┐
│  Connection Tab                              │
├──────────────────────────────────────────────┤
│                                              │
│                                              │
│   [Normal connection content area]          │
│                                              │
│                                              │
│                                              │
└──────────────────────────────────────────────┘

With Red Frame Color (Production)

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  Connection Tab (Production)                ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃  ╔════════════════════════════════════════╗ ┃
┃  ║                                        ║ ┃
┃  ║  [Connection content area]             ║ ┃
┃  ║   With 4-pixel RED border all around   ║ ┃
┃  ║                                        ║ ┃
┃  ╚════════════════════════════════════════╝ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

With Green Frame Color (Test)

┌──────────────────────────────────────────────┐
│  Connection Tab (Test)                       │
├──────────────────────────────────────────────┤
│  ╔════════════════════════════════════════╗ │
│  ║                                        ║ │
│  ║  [Connection content area]             ║ │
│  ║   With 4-pixel GREEN border all around ║ │
│  ║                                        ║ │
│  ╚════════════════════════════════════════╝ │
└──────────────────────────────────────────────┘

Side-by-Side Comparison

  Test Connection              Production Connection
┌─────────────────────┐       ┏━━━━━━━━━━━━━━━━━━━━━┓
│ [test server]       │       ┃ [production server] ┃
│                     │       ┃  ╔═══════════════╗  ┃
│  ┌───────────────┐  │       ┃  ║               ║  ┃
│  │               │  │       ┃  ║  !WARNING!    ║  ┃
│  │  SSH Session  │  │       ┃  ║  Production   ║  ┃
│  │  (Green)      │  │       ┃  ║  Environment  ║  ┃
│  └───────────────┘  │       ┃  ║   (Red)       ║  ┃
│                     │       ┃  ╚═══════════════╝  ┃
└─────────────────────┘       ┗━━━━━━━━━━━━━━━━━━━━━┛
  Safe to experiment          Requires extra caution!

Property Grid Display

When you select a connection in mRemoteNG, the Config panel will show:

┌─ Display ──────────────────────────────────┐
│                                            │
│  Name:                   My Server         │
│  Description:            Production DB     │
│  Icon:                   SSH               │
│  Panel:                  General           │
│  Color:                  [empty]           │
│  Tab Color:              [empty]           │
│  Connection Frame Color: ▼ Red (Production)│
│                           ├─ None          │
│                           ├─ Red (Prod...)│
│                           ├─ Yellow (St...)│
│                           ├─ Green (Test) │
│                           ├─ Blue (Dev)   │
│                           └─ Purple (C...)│
└────────────────────────────────────────────┘

Folder Inheritance Example

📁 Production Servers (ConnectionFrameColor: Red)
   ├─ 📄 Web Server 1 (inherits Red)
   ├─ 📄 Web Server 2 (inherits Red)
   └─ 📄 Database Server (inherits Red)

📁 Development Servers (ConnectionFrameColor: Blue)
   ├─ 📄 Dev Server 1 (inherits Blue)
   └─ 📄 Dev Server 2 (inherits Blue)

📁 Test Servers (ConnectionFrameColor: Green)
   ├─ 📄 Test Server 1 (inherits Green)
   └─ 📄 QA Server (inherits Green)

All connections in the "Production Servers" folder will automatically get a red border when you connect to them (assuming inheritance is enabled).

Color Palette

The implementation uses these specific colors:

• Red (Production): RGB(220, 53, 69) - High visibility warning color
• Yellow (Staging/UAT): RGB(255, 193, 7) - Caution/warning color
• Green (Test): RGB(40, 167, 69) - Safe/go color
• Blue (Development): RGB(0, 123, 255) - Calm, neutral color
• Purple (Custom): RGB(111, 66, 193) - Distinct custom color
• None (Default): Transparent - No border

These colors are chosen for:

1. High contrast and visibility
2. Universal recognition (red = danger, green = safe)
3. Accessibility considerations
4. Consistency with modern UI design patterns