diff --git a/src/app/globals.css b/src/app/globals.css index 32a9a84..8f2e8b5 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -718,6 +718,40 @@ html { outline-offset: 2px; } +/* Scope picker checkbox — native input hidden, indicator rendered as a + sibling so we can style it consistently across browsers. */ +.scope-checkbox { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + pointer-events: none; +} +.scope-checkbox-box { + width: 18px; + height: 18px; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--bg-tertiary); + border: 1.5px solid var(--border-medium); + color: transparent; + flex-shrink: 0; + transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; +} +.scope-checkbox:checked + .scope-checkbox-box { + background: var(--accent-moss); + border-color: var(--accent-moss); + color: var(--text-on-accent); +} +.scope-checkbox:focus-visible + .scope-checkbox-box { + outline: 2px solid var(--text-accent); + outline-offset: 2px; +} +.scope-checkbox:disabled + .scope-checkbox-box { + opacity: 0.6; +} + /* Profile Preview Styles */ .profile-stats-container { display: flex; diff --git a/src/components/oauth/ScopeSelector.tsx b/src/components/oauth/ScopeSelector.tsx index 4f65a29..889f6ac 100644 --- a/src/components/oauth/ScopeSelector.tsx +++ b/src/components/oauth/ScopeSelector.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState } from 'react'; -import { ArrowLeft } from 'lucide-react'; +import { ArrowLeft, Check } from 'lucide-react'; import { ALL_SCOPE_IDS, buildScopeString, @@ -97,17 +97,14 @@ export default function ScopeSelector({