diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index ab5bacae38..80fbc08a8f 100644
--- a/gui/public/i18n/en/translation.ftl
+++ b/gui/public/i18n/en/translation.ftl
@@ -74,6 +74,12 @@ skeleton_bone-ELBOW_OFFSET = Elbow Offset
## Tracker reset buttons
reset-reset_all = Reset all proportions
+reset-reset_all_warning =
+ Warning: This will reset your proportions to being just based on your height.
+ Are you sure you want to do this?
+reset-reset_all_warning-reset = Reset proportions
+reset-reset_all_warning-cancel = Cancel
+
reset-full = Full Reset
reset-mounting = Reset Mounting
reset-yaw = Yaw Reset
diff --git a/gui/src/components/onboarding/OnboardingLayout.tsx b/gui/src/components/onboarding/OnboardingLayout.tsx
index 1949e70dd8..671ada5e6d 100644
--- a/gui/src/components/onboarding/OnboardingLayout.tsx
+++ b/gui/src/components/onboarding/OnboardingLayout.tsx
@@ -10,7 +10,7 @@ import './OnboardingLayout.scss';
export function OnboardingLayout({ children }: { children: ReactNode }) {
const { isMobile } = useBreakpoint('mobile');
const { state, skipSetup } = useOnboarding();
- const [skipWarning, setSkipWarning] = useState(false);
+ const [showWarning, setShowWarning] = useState(false);
return !state.alonePage ? (
@@ -21,15 +21,15 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
setSkipWarning(true)}
+ modalVisible={showWarning}
+ onClick={() => setShowWarning(true)}
>
{children}
setSkipWarning(false)}
- isOpen={skipWarning}
+ onClose={() => setShowWarning(false)}
+ isOpen={showWarning}
>
diff --git a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
index e9f832febf..b843ba1352 100644
--- a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
@@ -15,6 +15,8 @@ import { VerifyResultsStep } from './autobone-steps/VerifyResults';
import { useCountdown } from '@/hooks/countdown';
import { CheckHeight } from './autobone-steps/CheckHeight';
import { PreparationStep } from './autobone-steps/Preparation';
+import { useState } from 'react';
+import { ProportionsResetModal } from './ProportionsResetModal';
export function AutomaticProportionsPage() {
const { l10n } = useLocalization();
@@ -30,6 +32,8 @@ export function AutomaticProportionsPage() {
},
});
+ const [showWarning, setShowWarning] = useState(false);
+
applyProgress(0.9);
return (
@@ -65,7 +69,7 @@ export function AutomaticProportionsPage() {
+ {
+ startCountdown();
+ setShowWarning(false);
+ }}
+ onClose={() => setShowWarning(false)}
+ isOpen={showWarning}
+ >
);
diff --git a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
index 55a0ad7855..71b6accdd0 100644
--- a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
@@ -7,15 +7,17 @@ import { CheckBox } from '@/components/commons/Checkbox';
import { Typography } from '@/components/commons/Typography';
import { BodyProportions } from './BodyProportions';
import { useLocalization } from '@fluent/react';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { useBreakpoint } from '@/hooks/breakpoint';
import { SkeletonVisualizerWidget } from '@/components/widgets/SkeletonVisualizerWidget';
+import { ProportionsResetModal } from './ProportionsResetModal';
export function ButtonsControl() {
const { l10n } = useLocalization();
const { state } = useOnboarding();
const { sendRPCPacket } = useWebsocketAPI();
+ const [showWarning, setShowWarning] = useState(false);
const resetAll = () => {
sendRPCPacket(
RpcMessage.SkeletonResetAllRequest,
@@ -32,9 +34,17 @@ export function ButtonsControl() {
>
{l10n.getString('onboarding-previous_step')}
-