jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-09-02 01:24:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjust logo and switch help and settings buttons

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-28 15:09:30 +01:00
parent c21576a443
commit 1008fe0eb6
4 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sheet-music-trainer</title> <title>sheet-music-trainer</title>
</head> </head>

17
public/favicon.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg width="64" height="64" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
d="M 2 18 Q 15 -5 28 18"
fill="none"
stroke="black"
stroke-width="3"
stroke-linecap="round"
/>
<circle cx="15" cy="18" r="4" fill="black" />
<style>
@media (prefers-color-scheme: dark) {
path { stroke: white; }
circle { fill: white; }
}
</style>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

14
src/App.tsx
View File

@@ -420,13 +420,6 @@ function App() {
</button> </button>
</div> </div>
<button
className="icon-button"
onClick={() => setIsSettingsOpen(true)}
title="Settings"
>
<Settings size={24} />
</button>
<button <button
className="icon-button" className="icon-button"
onClick={() => setShowHelp(true)} onClick={() => setShowHelp(true)}
@@ -434,6 +427,13 @@ function App() {
> >
<HelpCircle size={24} /> <HelpCircle size={24} />
</button> </button>
<button
className="icon-button"
onClick={() => setIsSettingsOpen(true)}
title="Settings"
>
<Settings size={24} />
</button>
</div> </div>
</header> </header>
)} )}

10
src/components/Logo.tsx
View File

@@ -3,9 +3,9 @@ import React from 'react';
export const Logo: React.FC<{ className?: string }> = ({ className }) => { export const Logo: React.FC<{ className?: string }> = ({ className }) => {
return ( return (
<svg <svg
width="250" width="260"
height="40" height="40"
viewBox="0 0 250 40" viewBox="0 0 260 40"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className} className={className}
aria-label="sight-reading.de logo" aria-label="sight-reading.de logo"
@@ -18,7 +18,7 @@ export const Logo: React.FC<{ className?: string }> = ({ className }) => {
</defs> </defs>
{/* Icon: Stylized Fermata (Eye) */} {/* Icon: Stylized Fermata (Eye) */}
<g transform="translate(10, 8) scale(0.8)"> <g transform="translate(5, 5) scale(1.1)">
{/* The Arc (Eyelid) */} {/* The Arc (Eyelid) */}
<path <path
d="M 2 18 Q 15 -5 28 18" d="M 2 18 Q 15 -5 28 18"
@@ -33,8 +33,8 @@ export const Logo: React.FC<{ className?: string }> = ({ className }) => {
{/* Text */} {/* Text */}
<text <text
x="45" x="48"
y="25" y="28"
fontFamily='"Inter", system-ui, -apple-system, sans-serif' fontFamily='"Inter", system-ui, -apple-system, sans-serif'
fontSize="20" fontSize="20"
fill="currentColor" fill="currentColor"