diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl index a15744ebba..dd6aa64aad 100644 --- a/gui/public/i18n/en/translation.ftl +++ b/gui/public/i18n/en/translation.ftl @@ -1,4 +1,3 @@ -### SlimeVR complete GUI translations # Please developers (not translators) don't reuse a key inside another key # or concat text with a translation string in the code, use the appropriate # features like variables and selectors in each appropriate case! @@ -492,7 +491,23 @@ onboarding-wifi_creds-password = ## Mounting setup onboarding-reset_tutorial-back = Go Back to Mounting calibration onboarding-reset_tutorial = Reset tutorial -onboarding-reset_tutorial-description = This feature isn't done, just press continue +onboarding-reset_tutorial-description = While you use your trackers they might get out of alignment because of IMU yaw drift, or because you might have moved them physically. You have several ways to fix this. +onboarding-reset_tutorial-skip = Skip step +# Cares about multiline +onboarding-reset_tutorial-0 = Tap { $taps } times the highlighted tracker for triggering yaw reset. + + This will make the trackers face the same direction as your HMD. +# Cares about multiline +onboarding-reset_tutorial-1 = Tap { $taps } times the highlighted tracker for triggering full reset. + + You need to be standing for this (i-pose). There is a 3 seconds delay (configurable) before it actually happens. + This fully resets the position and rotation of all your trackers. It should fix most issues. +# Cares about multiline +onboarding-reset_tutorial-2 = Tap { $taps } times the highlighted tracker for triggering mounting reset. + + Mounting reset helps on how the trackers are actually put on you, so if you accidentally moved them and changed how they are oriented by a big amount, this will help. + + You need to be on a pose like you are skiing like it's shown on the Automatic Mounting wizard and you have a 3 second delay (configurable) before it gets triggered. ## Setup start onboarding-home = Welcome to SlimeVR @@ -546,6 +561,15 @@ onboarding-calibration_tutorial-status-calibrating = Calibrating onboarding-calibration_tutorial-status-success = Nice! onboarding-calibration_tutorial-status-error = The tracker was moved +## Tracker assignment tutorial +onboarding-assignment_tutorial = How to prepare a Slime Tracker before putting it on +onboarding-assignment_tutorial-first_step = 1. Place a body part sticker (if you have one) on the tracker according to your choosing +# This text has a character limit of around 11 characters, so please keep it short +onboarding-assignment_tutorial-sticker = Sticker +onboarding-assignment_tutorial-second_step = 2. Attach the strap to your tracker, keeping the hook and loop side of the strap face in the following orientation: +onboarding-assignment_tutorial-second_step-continuation = The hook and loop side for the extension should be in this orientation: +onboarding-assignment_tutorial-done = I put stickers and straps! + ## Tracker assignment setup onboarding-assign_trackers-back = Go Back to Wi-Fi Credentials onboarding-assign_trackers-title = Assign trackers @@ -621,6 +645,8 @@ onboarding-assign_trackers-warning-WAIST = Waist is assigned but you need { $una ## Tracker mounting method choose onboarding-choose_mounting = What mounting calibration method to use? +# Multiline text +onboarding-choose_mounting-description = Mounting orientation corrects for the placement of trackers on your body. onboarding-choose_mounting-auto_mounting = Automatic mounting # Italized text onboarding-choose_mounting-auto_mounting-subtitle = Recommended @@ -660,6 +686,9 @@ onboarding-automatic_mounting-put_trackers_on-next = I have all my trackers on ## Tracker proportions method choose onboarding-choose_proportions = What proportion calibration method to use? +# Multiline string +onboarding-choose_proportions-description = Body proportions are used to know the measurements of your body. They're required to calculate the trackers' positions. + When proportions of your body don't match the ones saved, your tracking precision will be worse and you will notice things like skating or sliding, or your body not matching your avatar well. onboarding-choose_proportions-auto_proportions = Automatic proportions # Italized text onboarding-choose_proportions-auto_proportions-subtitle = Recommended @@ -732,7 +761,7 @@ home-no_trackers = No trackers detected or assigned ## Status system status_system-StatusTrackerReset = It is recommended to perform a full reset as one or more trackers are unadjusted. status_system-StatusSteamVRDisconnected = { $type -> - *[steamvr] Unable to connect to SteamVR via the SlimeVR driver. - [steamvr_feeder] Unable to connect to the SlimeVR Feeder App. + *[steamvr] Currently not connected to SteamVR via the SlimeVR driver. + [steamvr_feeder] Currently not connected to the SlimeVR Feeder App. } status_system-StatusTrackerError = The { $trackerName } tracker has an error. diff --git a/gui/public/images/taybol.png b/gui/public/images/taybol.png deleted file mode 100644 index b45415806a..0000000000 Binary files a/gui/public/images/taybol.png and /dev/null differ diff --git a/gui/src/App.tsx b/gui/src/App.tsx index aff54aa2bf..94b8667e05 100644 --- a/gui/src/App.tsx +++ b/gui/src/App.tsx @@ -46,9 +46,12 @@ import { LogicalSize, appWindow } from '@tauri-apps/api/window'; import { StatusProvider } from './components/providers/StatusSystemContext'; import { Release, VersionUpdateModal } from './components/VersionUpdateModal'; import { CalibrationTutorialPage } from './components/onboarding/pages/CalibrationTutorial'; +import { AssignmentTutorialPage } from './components/onboarding/pages/assignment-preparation/AssignmentTutorial'; +import { open } from '@tauri-apps/api/shell'; export const GH_REPO = 'SlimeVR/SlimeVR-Server'; export const VersionContext = createContext(''); +export const DOCS_SITE = 'https://docs.slimevr.dev/'; function Layout() { const { loading } = useConfig(); @@ -104,6 +107,7 @@ function Layout() { path="calibration-tutorial" element={} /> + } /> } /> } /> }> @@ -224,6 +228,17 @@ export default function App() { }; }, []); + useEffect(() => { + function onKeyboard(ev: KeyboardEvent) { + if (ev.key === 'F1') { + return open(DOCS_SITE).catch(() => window.open(DOCS_SITE, '_blank')); + } + } + + document.addEventListener('keypress', onKeyboard); + return () => document.removeEventListener('keypress', onKeyboard); + }, []); + return ( diff --git a/gui/src/components/MainLayout.tsx b/gui/src/components/MainLayout.tsx index 6cf12ea4bd..9277833aba 100644 --- a/gui/src/components/MainLayout.tsx +++ b/gui/src/components/MainLayout.tsx @@ -21,7 +21,7 @@ import { ClearDriftCompensationButton } from './ClearDriftCompensationButton'; import { useWebsocketAPI } from '../hooks/websocket-api'; import { useStatusContext, parseStatusToLocale } from '../hooks/status-system'; import { Localized } from '@fluent/react'; -import { WarningBox } from './commons/TipBox'; +import { TipBox } from './commons/TipBox'; import { useAppContext } from '../hooks/app'; import { TrackingPauseButton } from './TrackingPauseButton'; @@ -133,11 +133,11 @@ export function MainLayoutRoute({ vars={parseStatusToLocale(status, trackers)} key={status.id} > - + {`Warning, you should fix ${ StatusData[status.dataType] }`} - + ))} diff --git a/gui/src/components/TopBar.tsx b/gui/src/components/TopBar.tsx index 3ab59affa0..d3ac45770b 100644 --- a/gui/src/components/TopBar.tsx +++ b/gui/src/components/TopBar.tsx @@ -15,8 +15,9 @@ import { ProgressBar } from './commons/ProgressBar'; import { Typography } from './commons/Typography'; import { DownloadIcon } from './commons/icon/DownloadIcon'; import { open } from '@tauri-apps/api/shell'; -import { GH_REPO, VersionContext } from '../App'; +import { GH_REPO, VersionContext, DOCS_SITE } from '../App'; import classNames from 'classnames'; +import { QuestionIcon } from './commons/icon/QuestionIcon'; export function TopBar({ progress, @@ -115,6 +116,17 @@ export function TopBar({ className="flex justify-end items-center px-2 gap-2 z-50" data-tauri-drag-region > +
+ open(DOCS_SITE).catch(() => window.open(DOCS_SITE, '_blank')) + } + > + +
appWindow.minimize()} diff --git a/gui/src/components/commons/TipBox.tsx b/gui/src/components/commons/TipBox.tsx index f4a83ed7c2..441b5ee6d1 100644 --- a/gui/src/components/commons/TipBox.tsx +++ b/gui/src/components/commons/TipBox.tsx @@ -4,14 +4,32 @@ import { WarningIcon } from './icon/WarningIcon'; import { Typography } from './Typography'; import classNames from 'classnames'; -export function TipBox({ children }: { children: ReactNode }) { +export function TipBox({ + children, + hideIcon = false, + whitespace = false, +}: { + children: ReactNode; + hideIcon?: boolean; + whitespace?: boolean; +}) { return (
-
+
- {children} + + {children} +
); diff --git a/gui/src/components/commons/icon/PauseIcon.tsx b/gui/src/components/commons/icon/PauseIcon.tsx index bef56c30d5..1d83b1c2df 100644 --- a/gui/src/components/commons/icon/PauseIcon.tsx +++ b/gui/src/components/commons/icon/PauseIcon.tsx @@ -1,6 +1,6 @@ export function PauseIcon({ width = 33 }: { width?: number }) { return ( - + ); diff --git a/gui/src/components/commons/icon/PlayIcon.tsx b/gui/src/components/commons/icon/PlayIcon.tsx index b414622b57..6b8a89a09d 100644 --- a/gui/src/components/commons/icon/PlayIcon.tsx +++ b/gui/src/components/commons/icon/PlayIcon.tsx @@ -1,6 +1,6 @@ export function PlayIcon({ width = 33 }: { width?: number }) { return ( - + ); diff --git a/gui/src/components/commons/icon/QuestionIcon.tsx b/gui/src/components/commons/icon/QuestionIcon.tsx new file mode 100644 index 0000000000..88f626b757 --- /dev/null +++ b/gui/src/components/commons/icon/QuestionIcon.tsx @@ -0,0 +1,17 @@ +export function QuestionIcon({ width = 35 }: { width?: number }) { + return ( + + + + ); +} diff --git a/gui/src/components/commons/icon/TaybolIcon.tsx b/gui/src/components/commons/icon/TaybolIcon.tsx new file mode 100644 index 0000000000..0650e89246 --- /dev/null +++ b/gui/src/components/commons/icon/TaybolIcon.tsx @@ -0,0 +1,22 @@ +export function TaybolIcon({ width = 784 }: { width?: string | number }) { + return ( + + + + + + + ); +} diff --git a/gui/src/components/commons/icon/TrashIcon.tsx b/gui/src/components/commons/icon/TrashIcon.tsx index 74c87d7ee4..98bc81cfc0 100644 --- a/gui/src/components/commons/icon/TrashIcon.tsx +++ b/gui/src/components/commons/icon/TrashIcon.tsx @@ -4,7 +4,7 @@ export function TrashIcon({ width = 33 }: { width: number }) { xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={width} - height="24" + height="29" > >; highlightedRoles?: BodyPart[]; onRoleSelected: (role: BodyPart) => void; diff --git a/gui/src/components/onboarding/pages/CalibrationTutorial.tsx b/gui/src/components/onboarding/pages/CalibrationTutorial.tsx index fb96a18a32..570015acbd 100644 --- a/gui/src/components/onboarding/pages/CalibrationTutorial.tsx +++ b/gui/src/components/onboarding/pages/CalibrationTutorial.tsx @@ -9,6 +9,7 @@ import { ProgressBar } from '../../commons/ProgressBar'; import { LoaderIcon, SlimeState } from '../../commons/icon/LoaderIcon'; import { useCountdown } from '../../../hooks/countdown'; import classNames from 'classnames'; +import { TaybolIcon } from '../../commons/icon/TaybolIcon'; export enum CalibrationStatus { SUCCESS, @@ -66,7 +67,7 @@ export function CalibrationTutorialPage() { } }, [calibrationStatus, l10n]); - applyProgress(0.45); + applyProgress(0.43); return ( <> @@ -137,7 +138,7 @@ export function CalibrationTutorialPage() {
-
- +
+ + {/* */}
diff --git a/gui/src/components/onboarding/pages/ConnectTracker.tsx b/gui/src/components/onboarding/pages/ConnectTracker.tsx index 3166206fdc..d266f18468 100644 --- a/gui/src/components/onboarding/pages/ConnectTracker.tsx +++ b/gui/src/components/onboarding/pages/ConnectTracker.tsx @@ -217,7 +217,7 @@ export function ConnectTrackersPage() { ? '/' : bnoExists ? '/onboarding/calibration-tutorial' - : '/onboarding/trackers-assign' + : '/onboarding/assign-tutorial' } className="ml-auto" > diff --git a/gui/src/components/onboarding/pages/ResetTutorial.tsx b/gui/src/components/onboarding/pages/ResetTutorial.tsx index aac7c6d764..c030ad6f60 100644 --- a/gui/src/components/onboarding/pages/ResetTutorial.tsx +++ b/gui/src/components/onboarding/pages/ResetTutorial.tsx @@ -2,58 +2,221 @@ import { useLocalization } from '@fluent/react'; import { useOnboarding } from '../../../hooks/onboarding'; import { Button } from '../../commons/Button'; import { Typography } from '../../commons/Typography'; -import { useState } from 'react'; +import { useState, useMemo, useEffect } from 'react'; import { SkipSetupWarningModal } from '../SkipSetupWarningModal'; import { SkipSetupButton } from '../SkipSetupButton'; +import { + BodyPart, + ResetResponseT, + ResetStatus, + ResetType, + RpcMessage, + SettingsRequestT, + SettingsResponseT, +} from 'solarxr-protocol'; +import { useTrackers } from '../../../hooks/tracker'; +import { BodyDisplay } from '../../commons/BodyDisplay'; +import { useWebsocketAPI } from '../../../hooks/websocket-api'; +import classNames from 'classnames'; export function ResetTutorialPage() { const { l10n } = useLocalization(); const { applyProgress, skipSetup } = useOnboarding(); const [skipWarning, setSkipWarning] = useState(false); - + const { useAssignedTrackers } = useTrackers(); + const { useRPCPacket, sendRPCPacket } = useWebsocketAPI(); + const [curIndex, setCurIndex] = useState(0); + const [tapSettings, setTapSettings] = useState([]); applyProgress(0.8); + const assignedTrackers = useAssignedTrackers(); + + const highestTorsoTracker = useMemo( + () => + assignedTrackers + .filter((x) => + TORSO_PARTS.includes(x.tracker.info?.bodyPart ?? BodyPart.NONE) + ) + .sort( + (a, b) => + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + TORSO_PARTS.indexOf(a.tracker.info!.bodyPart)! - + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + TORSO_PARTS.indexOf(b.tracker.info!.bodyPart)! + ), + [assignedTrackers] + ); + + const highestRightLegTracker = useMemo( + () => + assignedTrackers + .filter((x) => + RIGHT_LEG_PARTS.includes(x.tracker.info?.bodyPart ?? BodyPart.NONE) + ) + .sort( + (a, b) => + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + RIGHT_LEG_PARTS.indexOf(a.tracker.info!.bodyPart)! - + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + RIGHT_LEG_PARTS.indexOf(b.tracker.info!.bodyPart)! + ), + [assignedTrackers] + ); + + const highestLeftLegTracker = useMemo( + () => + assignedTrackers + .filter((x) => + LEFT_LEG_PARTS.includes(x.tracker.info?.bodyPart ?? BodyPart.NONE) + ) + .sort( + (a, b) => + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + LEFT_LEG_PARTS.indexOf(a.tracker.info!.bodyPart)! - + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + LEFT_LEG_PARTS.indexOf(b.tracker.info!.bodyPart)! + ), + [assignedTrackers] + ); + + useRPCPacket( + RpcMessage.ResetResponse, + ({ status, resetType }: ResetResponseT) => { + if (status !== ResetStatus.STARTED) return; + console.log(status); + if (resetType === RESET_TYPE_ORDER[curIndex]) { + setCurIndex(curIndex + 1); + } + } + ); + + useEffect(() => { + sendRPCPacket(RpcMessage.SettingsRequest, new SettingsRequestT()); + }, []); + + useRPCPacket( + RpcMessage.SettingsResponse, + ({ tapDetectionSettings }: SettingsResponseT) => { + if ( + !tapDetectionSettings || + !tapDetectionSettings.yawResetTaps || + !tapDetectionSettings.fullResetTaps || + !tapDetectionSettings.mountingResetTaps + ) + return; + setTapSettings([ + tapDetectionSettings.yawResetTaps, + tapDetectionSettings.fullResetTaps, + tapDetectionSettings.mountingResetTaps, + ]); + } + ); + + const order = [ + highestTorsoTracker[0], + highestLeftLegTracker[0], + highestRightLegTracker[0], + ]; + return ( - <> -
- setSkipWarning(true)} - > -
-
-
- - {l10n.getString('onboarding-reset_tutorial')} - - {l10n.getString('onboarding-wip')} - +
+ setSkipWarning(true)} + > +
+
+
+ + {l10n.getString('onboarding-reset_tutorial')} + + + {l10n.getString('onboarding-reset_tutorial-description')} + +
+ + + + + +
+
= order.length && 'hidden' + )} + > + + {l10n.getString(`onboarding-reset_tutorial-${curIndex}`, { + taps: tapSettings[curIndex], + })} - - {l10n.getString('onboarding-reset_tutorial-description')} +
+
+
+ +
= order.length && 'hidden' + )} + > + + {l10n.getString(`onboarding-reset_tutorial-${curIndex}`, { + taps: tapSettings[curIndex], + })} -
- - -
- setSkipWarning(false)} - isOpen={skipWarning} - >
- + setSkipWarning(false)} + isOpen={skipWarning} + > +
); } + +export const TORSO_PARTS = [BodyPart.CHEST, BodyPart.WAIST, BodyPart.HIP]; +export const LEFT_LEG_PARTS = [ + BodyPart.LEFT_UPPER_LEG, + BodyPart.LEFT_LOWER_LEG, +]; +export const RIGHT_LEG_PARTS = [ + BodyPart.RIGHT_UPPER_LEG, + BodyPart.RIGHT_LOWER_LEG, +]; + +export const RESET_TYPE_ORDER = [ + ResetType.Yaw, + ResetType.Full, + ResetType.Mounting, +]; diff --git a/gui/src/components/onboarding/pages/WifiCreds.tsx b/gui/src/components/onboarding/pages/WifiCreds.tsx index 2e9aa844c8..382dc7c094 100644 --- a/gui/src/components/onboarding/pages/WifiCreds.tsx +++ b/gui/src/components/onboarding/pages/WifiCreds.tsx @@ -101,7 +101,7 @@ export function WifiCredsPage() { to={ bnoExists ? '/onboarding/calibration-tutorial' - : '/onboarding/trackers-assign' + : '/onboarding/assign-tutorial' } > {l10n.getString('onboarding-wifi_creds-skip')} diff --git a/gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx b/gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx new file mode 100644 index 0000000000..864c9ba20a --- /dev/null +++ b/gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx @@ -0,0 +1,104 @@ +import { useLocalization } from '@fluent/react'; +import { useOnboarding } from '../../../../hooks/onboarding'; +import { Button } from '../../../commons/Button'; +import { Typography } from '../../../commons/Typography'; +import { useState } from 'react'; +import { SkipSetupWarningModal } from '../../SkipSetupWarningModal'; +import { SkipSetupButton } from '../../SkipSetupButton'; +import { useTrackers } from '../../../../hooks/tracker'; +import { useBnoExists } from '../../../../hooks/imu-logic'; +import { StickerSlime } from './StickerSlime'; +import { TrackerArrow } from './TrackerArrow'; +import { ExtensionArrow } from './ExtensionArrow'; + +export function AssignmentTutorialPage() { + const { l10n } = useLocalization(); + const { applyProgress, skipSetup } = useOnboarding(); + const [skipWarning, setSkipWarning] = useState(false); + const { useConnectedTrackers } = useTrackers(); + const connectedTrackers = useConnectedTrackers(); + const bnoExists = useBnoExists(connectedTrackers); + + applyProgress(0.46); + + return ( + <> +
+ setSkipWarning(true)} + > +
+
+ + {l10n.getString('onboarding-assignment_tutorial')} + +
+
+
+
+
+ + {l10n.getString( + 'onboarding-assignment_tutorial-first_step' + )} + +
+
+ +
+
+
+
+ + {l10n.getString( + 'onboarding-assignment_tutorial-second_step' + )} + +
+
+ +
+
+ + {l10n.getString( + 'onboarding-assignment_tutorial-second_step-continuation' + )} + +
+
+ +
+
+
+
+ + +
+
+
+ setSkipWarning(false)} + isOpen={skipWarning} + > +
+ + ); +} diff --git a/gui/src/components/onboarding/pages/assignment-preparation/ExtensionArrow.tsx b/gui/src/components/onboarding/pages/assignment-preparation/ExtensionArrow.tsx new file mode 100644 index 0000000000..a27215e1f4 --- /dev/null +++ b/gui/src/components/onboarding/pages/assignment-preparation/ExtensionArrow.tsx @@ -0,0 +1,35 @@ +export function ExtensionArrow({ width = 731 }: { width?: number | string }) { + return ( + + + + + + + + + + ); +} diff --git a/gui/src/components/onboarding/pages/assignment-preparation/StickerSlime.tsx b/gui/src/components/onboarding/pages/assignment-preparation/StickerSlime.tsx new file mode 100644 index 0000000000..abeb81a0be --- /dev/null +++ b/gui/src/components/onboarding/pages/assignment-preparation/StickerSlime.tsx @@ -0,0 +1,47 @@ +import { useLocalization } from '@fluent/react'; + +export function StickerSlime({ width = 820 }: { width?: number | string }) { + const { l10n } = useLocalization(); + return ( + + + + + + + {l10n.getString('onboarding-assignment_tutorial-sticker')} + + + + + ); +} diff --git a/gui/src/components/onboarding/pages/assignment-preparation/TrackerArrow.tsx b/gui/src/components/onboarding/pages/assignment-preparation/TrackerArrow.tsx new file mode 100644 index 0000000000..5ba3e53384 --- /dev/null +++ b/gui/src/components/onboarding/pages/assignment-preparation/TrackerArrow.tsx @@ -0,0 +1,34 @@ +export function TrackerArrow({ width = 1300 }: { width?: string | number }) { + return ( + + + + + + + + + + ); +} diff --git a/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx b/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx index 704ed9ad95..d54e1dab95 100644 --- a/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx +++ b/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx @@ -63,6 +63,13 @@ export function ProportionsChoose() { {l10n.getString('onboarding-choose_proportions')} + + {l10n.getString('onboarding-choose_proportions-description')} +
diff --git a/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx b/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx index 186f9c936b..59081e9a16 100644 --- a/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx +++ b/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx @@ -6,6 +6,7 @@ import { SkipSetupButton } from '../../SkipSetupButton'; import classNames from 'classnames'; import { Typography } from '../../../commons/Typography'; import { Button } from '../../../commons/Button'; + export function MountingChoose() { const { l10n } = useLocalization(); const { applyProgress, skipSetup, state } = useOnboarding(); @@ -26,6 +27,13 @@ export function MountingChoose() { {l10n.getString('onboarding-choose_mounting')} + + {l10n.getString('onboarding-choose_mounting-description')} +
diff --git a/gui/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx b/gui/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx index b471822a30..975e61aa87 100644 --- a/gui/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx +++ b/gui/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx @@ -28,7 +28,6 @@ import { NeckWarningModal } from '../../NeckWarningModal'; import { TrackerSelectionMenu } from './TrackerSelectionMenu'; import { SkipSetupWarningModal } from '../../SkipSetupWarningModal'; import { SkipSetupButton } from '../../SkipSetupButton'; -import { useBnoExists } from '../../../../hooks/imu-logic'; import { useConfig } from '../../../../hooks/config'; import { playTapSetupSound } from '../../../../sounds/sounds'; @@ -46,7 +45,7 @@ interface FlatDeviceTrackerDummy { export function TrackersAssignPage() { const { l10n } = useLocalization(); - const { useAssignedTrackers, trackers, useConnectedTrackers } = useTrackers(); + const { useAssignedTrackers, trackers } = useTrackers(); const { applyProgress, skipSetup, state } = useOnboarding(); const { sendRPCPacket, useRPCPacket } = useWebsocketAPI(); @@ -57,9 +56,7 @@ export function TrackersAssignPage() { const [selectedRole, setSelectRole] = useState(BodyPart.NONE); const assignedTrackers = useAssignedTrackers(); const [skipWarning, setSkipWarning] = useState(false); - const connectedTrackers = useConnectedTrackers(); - const bnoExists = useBnoExists(connectedTrackers); const { config } = useConfig(); const [tapDetectionSettings, setTapDetectionSettings] = useState diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs index d4105ad9a7..66066afaae 100644 --- a/gui/tailwind.config.cjs +++ b/gui/tailwind.config.cjs @@ -158,6 +158,7 @@ module.exports = { xs: '800px', sm: '900px', md: '1100px', + 'md-max': { raw: 'not (min-width: 1100px)' }, lg: '1300px', xl: '1600px', }, @@ -219,8 +220,8 @@ module.exports = { 'slime-yellow': `linear-gradient(135deg, ${colors['yellow-accent'][100]} 50%, ${colors['yellow-background'][700]} 50% 100%)`, 'slime-orange': `linear-gradient(135deg, ${colors['orange-accent'][100]} 50%, ${colors['orange-background'][700]} 50% 100%)`, 'slime-red': `linear-gradient(135deg, ${colors['red-accent'][100]} 50%, ${colors['red-background'][700]} 50% 100%)`, - 'dark': `linear-gradient(135deg, ${colors['dark-accent'][100]} 50%, ${colors['dark-background'][700]} 50% 100%)`, - 'light': `linear-gradient(135deg, ${colors['light-accent'][100]} 50%, ${colors['light-background'][700]} 50% 100%)`, + dark: `linear-gradient(135deg, ${colors['dark-accent'][100]} 50%, ${colors['dark-background'][700]} 50% 100%)`, + light: `linear-gradient(135deg, ${colors['light-accent'][100]} 50%, ${colors['light-background'][700]} 50% 100%)`, 'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`, }, },