From c21576a4433d8049d04c908ad13597ff6f3c5565 Mon Sep 17 00:00:00 2001 From: Jens Mohrmann Date: Sun, 28 Dec 2025 14:47:37 +0100 Subject: [PATCH] Modern fermata logo --- src/App.tsx | 5 ++++- src/components/Logo.tsx | 47 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 src/components/Logo.tsx diff --git a/src/App.tsx b/src/App.tsx index 9b4373f..c415013 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,7 @@ import { useState, useEffect, useCallback, useMemo, useRef } from 'react'; +import { Logo } from './components/Logo'; + + import { SheetMusic } from './components/SheetMusic'; import { Controls, type AppSettings } from './components/Controls'; import { SettingsModal } from './components/SettingsModal'; @@ -398,7 +401,7 @@ function App() { {!settings.zenMode && (
-
Sheet music trainer
+
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 0000000..6893674 --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +export const Logo: React.FC<{ className?: string }> = ({ className }) => { + return ( + + + + {/* Using currentColor strategy if needed, but for black/white requirement we stick to solid fill usually. + However, relying on currentColor allows dark mode adaptation. */} + + + + {/* Icon: Stylized Fermata (Eye) */} + + {/* The Arc (Eyelid) */} + + {/* The Dot (Pupil / Note head) */} + + + + {/* Text */} + + sight-reading + .de + + + ); +};