# Visual Issues: Bookmark Icon on Event Detail Page

**Date**: 2026-03-12
**Branch**: `017-watch-event`
**File**: `frontend/src/views/EventDetailView.vue`

## Issue 1: Meta icons have hover effect

**Problem**: The `<dt class="detail__meta-icon glass">` elements (date, location, attendees) change background/border color on hover. These are non-interactive `<dt>` elements — they should not react to hover.

**Root cause**: The global `.glass:hover` rule in `frontend/src/assets/main.css:247`:
```css
.glass:hover:not(input):not(textarea):not(.btn-primary) {
  background: var(--color-glass-hover);
  border-color: var(--color-glass-border-hover);
}
```
This applies to ALL `.glass` elements including the static meta icons. Scoped CSS overrides don't win because the global rule has equal or higher specificity.

**Fix options**:
- A) Remove `glass` class from meta icons, replicate the static glass styles in scoped CSS
- B) Add `.glass--static` modifier that opts out of hover, use it on meta icons
- C) Add `:not(.detail__meta-icon)` to the global rule (leaks component knowledge into global CSS — bad)

Option A is cleanest — meta icons only need the static glass background, not the full interactive glass behavior.

## Issue 2: Glow effect on bookmark is ugly

**Problem**: The accent-colored `box-shadow` glow around the bookmark icon looks bad visually.

**Current CSS**:
```css
.detail__bookmark {
  border-color: var(--color-accent);
  box-shadow: 0 0 6px rgba(255, 112, 67, 0.15);
}
.detail__bookmark--filled {
  box-shadow: 0 0 8px rgba(255, 112, 67, 0.3);
}
```

**Fix**: Remove the glow entirely. Differentiate the bookmark from inert meta icons through a different, subtler approach — e.g. a slightly brighter/different border color, or rely solely on the cursor change and active/focus states.

## Issue 3: Filled bookmark should use same icon color as unfilled

**Problem**: Filled bookmark uses `color: var(--color-accent)` (orange), unfilled uses `color: var(--color-text-on-gradient)` (white/light). User wants both states to use the same color.

**Current CSS**:
```css
.detail__bookmark--filled {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
```

**Fix**: Remove `color: var(--color-accent)` from `.detail__bookmark--filled`. The SVG `fill` attribute is already controlled by `:fill="eventIsStored ? 'currentColor' : 'none'"` in the template — so filled state will use `currentColor` (which inherits from the parent), and unfilled state will be outline-only. Both will be the same color (`--color-text-on-gradient`).

## Issue 4: Icons not centered in their boxes

**Problem**: SVGs inside the 36x36 glass boxes (both bookmark and meta icons) are shifted slightly to the right. The centering is off despite `display: flex; align-items: center; justify-content: center`.

**Root cause**: SVGs rendered inline have implicit `line-height` whitespace. The `line-height: 0` fix was added to `.detail__bookmark` and `.detail__meta-icon` but the meta icon override may not be applying due to specificity issues with the `glass` class, or the SVGs themselves may need `display: block`.

**Context**: The `<dt>` element defaults to `display: block` but the SVG inside is inline. The flex container should handle it, but browser rendering of inline SVGs inside flex containers can be inconsistent.

**Fix options**:
- Add `display: block` to the SVGs directly via a scoped rule: `.detail__meta-icon svg, .detail__bookmark svg { display: block; }`
- Or ensure `line-height: 0` is actually applying (check specificity)

## Screenshot reference

User-provided screenshot showing the issues: `/home/nitrix/Pictures/Screenshot_20260312_215543.png`