diff --git a/src/components/OrbitStartTrigger.tsx b/src/components/OrbitStartTrigger.tsx index ddd52bc1..29dc22a8 100644 --- a/src/components/OrbitStartTrigger.tsx +++ b/src/components/OrbitStartTrigger.tsx @@ -7,6 +7,7 @@ import { useAuthStore } from '../store/authStore'; import { useHelpModalStore } from '../store/helpModalStore'; import OrbitStartModal from './OrbitStartModal'; import OrbitJoinModal from './OrbitJoinModal'; +import OrbitWordmark from './OrbitWordmark'; /** * Topbar trigger — opens a small launch popover offering three choices: @@ -71,10 +72,11 @@ export default function OrbitStartTrigger() { data-tooltip-pos="bottom" aria-haspopup="menu" aria-expanded={popoverOpen || undefined} + aria-label={t('orbit.triggerLabel')} style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem' }} > - - {t('orbit.triggerLabel')} + + {popoverOpen && createPortal( diff --git a/src/components/OrbitWordmark.tsx b/src/components/OrbitWordmark.tsx new file mode 100644 index 00000000..07d9d40f --- /dev/null +++ b/src/components/OrbitWordmark.tsx @@ -0,0 +1,27 @@ +interface Props { + height?: number; + className?: string; +} + +export default function OrbitWordmark({ height = 14, className }: Props) { + const aspect = 196.08815 / 57.845078; + return ( + + ); +} diff --git a/src/styles/components.css b/src/styles/components.css index f43f802c..8d8368b6 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -11891,14 +11891,14 @@ html[data-psy-native-hidden="true"] *::after { 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; } -.orbit-start-trigger svg { transition: transform 260ms ease; } +.orbit-start-trigger__spin { transition: transform 260ms ease; } .orbit-start-trigger:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); 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); } -.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. */ .orbit-launch-pop {