diff --git a/src/App.css b/src/App.css index dd5ebac..c8ed3ca 100644 --- a/src/App.css +++ b/src/App.css @@ -851,6 +851,26 @@ table tbody tr:hover { accent-color: var(--accent); } +.settings-link { + text-align: center; + padding: 32px 0 16px; +} + +.settings-link a { + display: inline-flex; + align-items: center; + gap: 6px; + color: var(--text-secondary); + font-size: 0.8125rem; + text-decoration: none; + opacity: 0.6; + transition: opacity 150ms ease; +} + +.settings-link a:hover { + opacity: 1; +} + /* Settings page */ .settings-page { padding: 24px; diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 4c22e2a..2026acb 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -1,5 +1,5 @@ import React, { useState, useMemo, useEffect } from 'react'; -import { useSearchParams } from 'react-router-dom'; +import { useSearchParams, Link } from 'react-router-dom'; import { Line, Bar } from 'react-chartjs-2'; import { Carousel, EmptyState, FilterControls, MultiSelect, StatCard } from './shared'; import { ExportableChart } from './ChartExport'; @@ -799,6 +799,15 @@ function Dashboard({ data, seasons, showDataLabels, setShowDataLabels, includeVA )} + +
+ + + + + {t('nav.settings')} + +
); }