# Feature Flags Modal – RBC Style

## Overview
This modal allows users to view, add, toggle, and remove feature flags stored in session storage. It is styled to match the RBC Direct Investing modal design, with a professional, modern look and clear sectioning.

---

## 🆕 New Layout (as of July 2025)

### 1. **Header**
- **Title:** `Feature Flags Manager`
- Large, bold, and visually separated from the rest of the modal.

### 2. **Add New Feature Flags (Top Section)**
- **Header:** `Add New Feature Flags`
- Always at the top, right below the main title.
- Allows adding multiple new feature flags before saving.
- Each new flag row includes:
  - Checkbox (default: checked)
  - Text input for flag name
  - Remove button
- "+ Add Another Feature Flag" button for more rows
- Section is visually separated with a border below.

### 3. **Existing Feature Flags**
- **Header:** `Existing Feature Flags`
- Appears below the new flags section.
- Flags are displayed in a two-column grid.
- Each flag is shown as a card with:
  - Checkbox (toggle on/off)
  - Flag name
  - Delete (×) button
- Cards have hover and focus effects for clarity.

### 4. **Action Buttons (Footer)**
- **Buttons:** `Cancel` (secondary), `Save Changes` (primary)
- Right-aligned, styled to match RBC's button system
- Cancel closes the modal without saving
- Save applies all changes and reloads the page

### 5. **Close Button**
- Top-right corner (×), styled as a circular icon
- Closes the modal and overlay

### 6. **Overlay**
- Dimmed, blurred background overlay for focus

---

## 🎨 Styling Details
- **Colors:** RBC blue (`#006ac3`), hover blue (`#0051a5`), error red (`#d32f2f`), backgrounds (`#fafafa`, `#f3f7f8`)
- **Typography:** System font stack, clear hierarchy
- **Spacing:** Generous padding, grid layout, rounded corners
- **Accessibility:** High contrast, focus states, large click targets

---

## 🛠️ Usage
- The modal is generated and injected by the `rbc-di-featureflags.js` bookmarklet.
- All changes are saved to `sessionStorage` under the `rbc_di_session` key.
- Use the provided script to generate a bookmarklet for browser use.

---

## 📋 Example Structure

```
┌─────────────────────────────────────┐
│ Feature Flags Manager               │ ← Main Header
├─────────────────────────────────────┤
│ Add New Feature Flags               │ ← New section (top)
│ [+] Add Another Feature Flag        │
├─────────────────────────────────────┤
│ Existing Feature Flags              │ ← New header
│ ┌─────────────┐ ┌─────────────┐     │
│ │ Flag 1  [×] │ │ Flag 2  [×] │     │
│ └─────────────┘ └─────────────┘     │
├─────────────────────────────────────┤
│              [Cancel] [Save Changes] │
└─────────────────────────────────────┘
```

---

## ✅ Improvements Over Previous Version
- New flags section is always visible and prioritized
- Existing flags are clearly separated and labeled
- Modern, accessible, and brand-consistent design
- All actions (add, remove, toggle, save, cancel) are visually clear and easy to use