From 1acc0754071b579dbb100f48fb72a0bd21f4c130 Mon Sep 17 00:00:00 2001
From: ImUrX <urielfontan2002@gmail.com>
Date: Thu, 14 Mar 2024 21:09:06 -0300
Subject: [PATCH 1/2] add height tip and full reset step

---
 gui/public/i18n/en/translation.ftl            |  2 +
 .../body-proportions/AutomaticProportions.tsx |  2 +
 .../autobone-steps/Preparation.tsx            | 70 +++++++++++++++++++
 .../autobone-steps/\320\241heckHeight.tsx"    | 31 ++++----
 4 files changed, 93 insertions(+), 12 deletions(-)
 create mode 100644 gui/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx

diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index 0c3d0904bd..42f2d7414d 100644
--- a/gui/public/i18n/en/translation.ftl
+++ b/gui/public/i18n/en/translation.ftl
@@ -814,6 +814,8 @@ onboarding-automatic_proportions-check_height-title = Check your height
 onboarding-automatic_proportions-check_height-description = We use your height as a basis of our measurements by using the headset's (HMD) height as an approximation of your actual height, but it's better to check if they are right yourself!
 # All the text is in bold!
 onboarding-automatic_proportions-check_height-calculation_warning = Please press the button while standing <u>upright</u> to calculate your height. You have 3 seconds after you press the button!
+onboarding-automatic_proportions-check_height-guardian_tip = If you are using an standalone VR, be sure to have your guardian/
+    boundary turned on so your height is correct!
 onboarding-automatic_proportions-check_height-fetch_height = I'm standing!
 # Context is that the height is unknown
 onboarding-automatic_proportions-check_height-unknown = Unknown
diff --git a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
index af6b7fb7b5..629353e2db 100644
--- a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
@@ -14,6 +14,7 @@ import { StartRecording } from './autobone-steps/StartRecording';
 import { VerifyResultsStep } from './autobone-steps/VerifyResults';
 import { useCountdown } from '@/hooks/countdown';
 import { CheckHeight } from './autobone-steps/СheckHeight';
+import { PreparationStep } from './autobone-steps/Preparation';
 
 export function AutomaticProportionsPage() {
   const { l10n } = useLocalization();
@@ -50,6 +51,7 @@ export function AutomaticProportionsPage() {
               variant={state.alonePage ? 'alone' : 'onboarding'}
               steps={[
                 { type: 'numbered', component: PutTrackersOnStep },
+                { type: 'numbered', component: PreparationStep },
                 { type: 'numbered', component: RequirementsStep },
                 { type: 'numbered', component: CheckHeight },
                 { type: 'numbered', component: StartRecording },
diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx
new file mode 100644
index 0000000000..81f9300a89
--- /dev/null
+++ b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx
@@ -0,0 +1,70 @@
+import { ResetType } from 'solarxr-protocol';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { ResetButton } from '@/components/home/ResetButton';
+import { useLocalization } from '@fluent/react';
+import { useBreakpoint } from '@/hooks/breakpoint';
+
+export function PreparationStep({
+  nextStep,
+  prevStep,
+  variant,
+}: {
+  nextStep: () => void;
+  prevStep: () => void;
+  variant: 'onboarding' | 'alone';
+}) {
+  const { isMobile } = useBreakpoint('mobile');
+  const { l10n } = useLocalization();
+
+  return (
+    <div className="flex mobile:flex-col items-center w-full">
+      <div className="flex flex-col flex-grow justify-between">
+        <div className="flex flex-col gap-4 max-w-sm">
+          <Typography variant="main-title" bold>
+            {l10n.getString('onboarding-automatic_mounting-preparation-title')}
+          </Typography>
+          <div>
+            <Typography color="secondary">
+              {l10n.getString(
+                'onboarding-automatic_mounting-preparation-step-0'
+              )}
+            </Typography>
+            <Typography color="secondary">
+              {l10n.getString(
+                'onboarding-automatic_mounting-preparation-step-1'
+              )}
+            </Typography>
+          </div>
+        </div>
+        {isMobile && (
+          <div className="flex flex-col pt-1 items-center fill-background-50 justify-center px-12">
+            <img
+              src="/images/reset-pose.webp"
+              width={100}
+              alt="Reset position"
+            />
+          </div>
+        )}
+        <div className="flex gap-3 mobile:justify-between">
+          <Button
+            variant={variant === 'onboarding' ? 'secondary' : 'tertiary'}
+            onClick={prevStep}
+          >
+            {l10n.getString('onboarding-automatic_mounting-prev_step')}
+          </Button>
+          <ResetButton
+            variant="small"
+            type={ResetType.Full}
+            onReseted={nextStep}
+          ></ResetButton>
+        </div>
+      </div>
+      {!isMobile && (
+        <div className="flex flex-col pt-1 items-center fill-background-50 justify-center px-12">
+          <img src="/images/reset-pose.webp" width={90} alt="Reset position" />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git "a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/\320\241heckHeight.tsx" "b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/\320\241heckHeight.tsx"
index 185eac9d62..1bed346ae5 100644
--- "a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/\320\241heckHeight.tsx"
+++ "b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/\320\241heckHeight.tsx"
@@ -18,6 +18,7 @@ import {
 } from '@/components/onboarding/pages/body-proportions/ProportionsChoose';
 import { useLocaleConfig } from '@/i18n/config';
 import { useCountdown } from '@/hooks/countdown';
+import { TipBox } from '@/components/commons/TipBox';
 
 interface HeightForm {
   height: number;
@@ -104,18 +105,24 @@ export function CheckHeight({
               </Typography>
             </Localized>
 
-            <Button
-              variant="primary"
-              className="mt-2"
-              onClick={startCountdown}
-              disabled={isCounting}
-            >
-              {isCounting
-                ? sFormat.format(timer, 'second')
-                : l10n.getString(
-                    'onboarding-automatic_proportions-check_height-fetch_height'
-                  )}
-            </Button>
+            <div className="flex flex-row items-center mt-2 gap-2">
+              <Button
+                variant="primary"
+                onClick={startCountdown}
+                disabled={isCounting}
+              >
+                {isCounting
+                  ? sFormat.format(timer, 'second')
+                  : l10n.getString(
+                      'onboarding-automatic_proportions-check_height-fetch_height'
+                    )}
+              </Button>
+              <TipBox whitespace={true}>
+                {l10n.getString(
+                  'onboarding-automatic_proportions-check_height-guardian_tip'
+                )}
+              </TipBox>
+            </div>
           </div>
           <form className="flex flex-col self-center items-center justify-center">
             <NumberSelector

From 05f14bef864b5e9b75be6429bb283bfd77d66278 Mon Sep 17 00:00:00 2001
From: Uriel <imurx@proton.me>
Date: Wed, 20 Mar 2024 22:40:29 -0300
Subject: [PATCH 2/2] fox review

Co-authored-by: Erimel <marioluigivideo@gmail.com>
---
 gui/public/i18n/en/translation.ftl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index 42f2d7414d..1edea1610f 100644
--- a/gui/public/i18n/en/translation.ftl
+++ b/gui/public/i18n/en/translation.ftl
@@ -814,8 +814,8 @@ onboarding-automatic_proportions-check_height-title = Check your height
 onboarding-automatic_proportions-check_height-description = We use your height as a basis of our measurements by using the headset's (HMD) height as an approximation of your actual height, but it's better to check if they are right yourself!
 # All the text is in bold!
 onboarding-automatic_proportions-check_height-calculation_warning = Please press the button while standing <u>upright</u> to calculate your height. You have 3 seconds after you press the button!
-onboarding-automatic_proportions-check_height-guardian_tip = If you are using an standalone VR, be sure to have your guardian/
-    boundary turned on so your height is correct!
+onboarding-automatic_proportions-check_height-guardian_tip = If you are using a standalone VR headset, make sure to have your guardian/
+    boundary turned on so that your height is correct!
 onboarding-automatic_proportions-check_height-fetch_height = I'm standing!
 # Context is that the height is unknown
 onboarding-automatic_proportions-check_height-unknown = Unknown