Implement dark-first design system with Geist typography (#28)

Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com> Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>
2026-02-17 20:48:42 +01:00
parent e3b3dc5317
commit 42b66ee9a2
56 changed files with 1151 additions and 1067 deletions
--- a/frontend/src/components/ShinyBox.tsx
+++ b/frontend/src/components/ShinyBox.tsx
@@ -12,7 +12,7 @@ export function ShinyBox({ encounters, onEncounterClick }: ShinyBoxProps) {
      <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-400 mb-3 flex items-center gap-1.5">
        <span>&#10022;</span>
        Shiny Box
-        <span className="text-xs font-normal text-gray-400 dark:text-gray-500 ml-1">
+        <span className="text-xs font-normal text-text-muted ml-1">
          {encounters.length} {encounters.length === 1 ? 'shiny' : 'shinies'}
        </span>
      </h3>
@@ -27,9 +27,7 @@ export function ShinyBox({ encounters, onEncounterClick }: ShinyBoxProps) {
          ))}
        </div>
      ) : (
-        <p className="text-sm text-gray-400 dark:text-gray-500 text-center py-2">
-          No shinies found yet
-        </p>
+        <p className="text-sm text-text-muted text-center py-2">No shinies found yet</p>
      )}
    </div>
  )