TIER 3 - POLISH
This commit is contained in:
@@ -108,7 +108,7 @@ export default function RealtimePage() {
|
|||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
||||||
</span>
|
</span>
|
||||||
<span className="text-lg font-normal text-neutral-500">
|
<span className="text-lg font-normal text-neutral-500" aria-live="polite" aria-atomic="true">
|
||||||
{visitors.length} active now
|
{visitors.length} active now
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@@ -314,9 +314,11 @@ export default function SiteSettingsPage() {
|
|||||||
|
|
||||||
<div className="flex flex-col md:flex-row gap-8">
|
<div className="flex flex-col md:flex-row gap-8">
|
||||||
{/* Sidebar Navigation */}
|
{/* Sidebar Navigation */}
|
||||||
<nav className="w-full md:w-64 flex-shrink-0 space-y-1">
|
<nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Site settings sections">
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('general')}
|
onClick={() => setActiveTab('general')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'general'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'general'
|
activeTab === 'general'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
@@ -328,6 +330,8 @@ export default function SiteSettingsPage() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('visibility')}
|
onClick={() => setActiveTab('visibility')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'visibility'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'visibility'
|
activeTab === 'visibility'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
@@ -339,6 +343,8 @@ export default function SiteSettingsPage() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('data')}
|
onClick={() => setActiveTab('data')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'data'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'data'
|
activeTab === 'data'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
@@ -350,6 +356,8 @@ export default function SiteSettingsPage() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('goals')}
|
onClick={() => setActiveTab('goals')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'goals'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'goals'
|
activeTab === 'goals'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
|
|||||||
@@ -102,11 +102,13 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Content view tabs">
|
||||||
{(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
|
{(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab}
|
key={tab}
|
||||||
onClick={() => setActiveTab(tab)}
|
onClick={() => setActiveTab(tab)}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === tab}
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
|
className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
|
||||||
activeTab === tab
|
activeTab === tab
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||||
|
|||||||
@@ -202,11 +202,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Location view tabs">
|
||||||
{(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
|
{(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab}
|
key={tab}
|
||||||
onClick={() => setActiveTab(tab)}
|
onClick={() => setActiveTab(tab)}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === tab}
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
|
className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
|
||||||
activeTab === tab
|
activeTab === tab
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||||
|
|||||||
@@ -125,11 +125,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
|
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Technology view tabs">
|
||||||
{(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
|
{(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab}
|
key={tab}
|
||||||
onClick={() => setActiveTab(tab)}
|
onClick={() => setActiveTab(tab)}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === tab}
|
||||||
className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
|
className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
|
||||||
activeTab === tab
|
activeTab === tab
|
||||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||||
|
|||||||
@@ -350,9 +350,11 @@ export default function OrganizationSettings() {
|
|||||||
|
|
||||||
<div className="flex flex-col md:flex-row gap-8">
|
<div className="flex flex-col md:flex-row gap-8">
|
||||||
{/* Sidebar Navigation */}
|
{/* Sidebar Navigation */}
|
||||||
<nav className="w-full md:w-64 flex-shrink-0 space-y-1">
|
<nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Organization settings sections">
|
||||||
<button
|
<button
|
||||||
onClick={() => handleTabChange('general')}
|
onClick={() => handleTabChange('general')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'general'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'general'
|
activeTab === 'general'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
@@ -364,6 +366,8 @@ export default function OrganizationSettings() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleTabChange('members')}
|
onClick={() => handleTabChange('members')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'members'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'members'
|
activeTab === 'members'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
@@ -375,6 +379,8 @@ export default function OrganizationSettings() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleTabChange('billing')}
|
onClick={() => handleTabChange('billing')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'billing'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'billing'
|
activeTab === 'billing'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
@@ -386,6 +392,8 @@ export default function OrganizationSettings() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleTabChange('audit')}
|
onClick={() => handleTabChange('audit')}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={activeTab === 'audit'}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
|
||||||
activeTab === 'audit'
|
activeTab === 'audit'
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? 'bg-brand-orange/10 text-brand-orange'
|
||||||
|
|||||||
1042
docs/DESIGN_SYSTEM.md
Normal file
1042
docs/DESIGN_SYSTEM.md
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user