legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

adjusting stylings

Browse Source
This commit is contained in:
legop3
2026-09-08 23:52:25 -04:00
parent d3fd3946e6
commit 6ca7cc0cf0
14 changed files with 198 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/RoverAccessoryControls/AccessoriesToggle.jsx
+10 -4
View File
@@ -9,8 +9,14 @@ export default function AccessoriesToggle({
ariaLabel,
onClick,
compact = false,
hud = false,
className = '',
}) {
const sizeClass = compact ? 'h-6 w-10' : 'h-full w-8';
const toneClass = hud
? 'rounded-none border-0 bg-black/60 text-white/75 shadow-none hover:bg-black hover:text-white'
: 'rounded-xl border-2 border-cyan-300/70 bg-cyan-900 text-cyan-50 shadow-md hover:brightness-110 active:brightness-125';
return (
<button
type="button"
@@ -19,11 +25,11 @@ export default function AccessoriesToggle({
triggerTouchHaptic('button');
onClick();
}}
className={`mobile-touch-control flex shrink-0 items-center justify-center rounded-xl border-2 border-cyan-300/70 bg-cyan-900 text-sm font-semibold text-cyan-50 shadow-md transition hover:brightness-110 active:scale-[0.98] active:brightness-125 ${compact ? 'h-14 w-7' : 'h-full w-8'} ${className}`.trim()}
className={`mobile-touch-control flex shrink-0 items-center justify-center text-sm font-semibold transition active:scale-[0.98] ${sizeClass} ${toneClass} ${className}`.trim()}
>
{/* Vertical writing keeps the launcher readable in the narrow wall space
without rotating the glyph itself away from its natural orientation. */}
<span className="flex items-center gap-1 [writing-mode:vertical-rl] rotate-180">
{/* Full launchers use vertical writing in the narrow wall space. The
compact Aux return stays horizontal so it consumes only one heading. */}
<span className={compact ? 'flex items-center' : 'flex items-center gap-1 [writing-mode:vertical-rl] rotate-180'}>
{!compact ? <FaPuzzlePiece className="shrink-0 text-sm" aria-hidden="true" /> : null}
<span>{label}</span>
</span>