itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(orbit): replace topbar trigger label with custom wordmark SVG

Browse Source 
Inline SVG component using currentColor so the wordmark inherits the
button's accent tint and hover state. Hover rotation is now scoped to
the lucide spinner icon so the wordmark doesn't tilt with it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-25 10:27:52 +02:00
parent 0e941c3ee4
commit bf53016de1
3 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OrbitStartTrigger.tsx
+4 -2
View File
@@ -7,6 +7,7 @@ import { useAuthStore } from '../store/authStore';
import { useHelpModalStore } from '../store/helpModalStore'; import { useHelpModalStore } from '../store/helpModalStore';
import OrbitStartModal from './OrbitStartModal'; import OrbitStartModal from './OrbitStartModal';
import OrbitJoinModal from './OrbitJoinModal'; import OrbitJoinModal from './OrbitJoinModal';
import OrbitWordmark from './OrbitWordmark';
/** /**
* Topbar trigger — opens a small launch popover offering three choices: * Topbar trigger — opens a small launch popover offering three choices:
@@ -71,10 +72,11 @@ export default function OrbitStartTrigger() {
data-tooltip-pos="bottom" data-tooltip-pos="bottom"
aria-haspopup="menu" aria-haspopup="menu"
aria-expanded={popoverOpen || undefined} aria-expanded={popoverOpen || undefined}
aria-label={t('orbit.triggerLabel')}
style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem' }} style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem' }}
> >
<OrbitIcon size={18} /> <OrbitIcon size={18} className="orbit-start-trigger__spin" />
<span>{t('orbit.triggerLabel')}</span> <OrbitWordmark height={14} />
</button> </button>
{popoverOpen && createPortal( {popoverOpen && createPortal(
src/components/OrbitWordmark.tsx
+27
View File
File diff suppressed because one or more lines are too long
src/styles/components.css
+2 -2
View File
@@ -11891,14 +11891,14 @@ html[data-psy-native-hidden="true"] *::after {
border-color: color-mix(in srgb, var(--accent) 45%, var(--ctp-surface1)); border-color: color-mix(in srgb, var(--accent) 45%, var(--ctp-surface1));
transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 200ms ease; transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 200ms ease;
} }
.orbit-start-trigger svg { transition: transform 260ms ease; } .orbit-start-trigger__spin { transition: transform 260ms ease; }
.orbit-start-trigger:hover { .orbit-start-trigger:hover {
color: var(--accent); color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 70%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent);
background: color-mix(in srgb, var(--accent) 10%, var(--bg-hover)); background: color-mix(in srgb, var(--accent) 10%, var(--bg-hover));
box-shadow: 0 0 12px -3px color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 12px -3px color-mix(in srgb, var(--accent) 55%, transparent);
} }
.orbit-start-trigger:hover svg { transform: rotate(45deg); } .orbit-start-trigger:hover .orbit-start-trigger__spin { transform: rotate(45deg); }
/* Launch popover — three-option menu anchored below the topbar trigger. */ /* Launch popover — three-option menu anchored below the topbar trigger. */
.orbit-launch-pop { .orbit-launch-pop {