Stay Aligned UI Improvements (#1632)

Author: Aed-1

gui/public/i18n/en/translation.ftl

@@ -1277,7 +1277,7 @@ onboarding-stay_aligned-put_trackers_on-title = Put on your trackers
 onboarding-stay_aligned-put_trackers_on-description = To save your resting poses, we'll use the trackers you just assigned. Put on all your trackers, you can see which are which in the figure to the right.
 onboarding-stay_aligned-put_trackers_on-trackers_warning = You have fewer than 5 trackers currently connected and assigned! This is the minimum amount of trackers required for Stay Aligned to function properly.
 onboarding-stay_aligned-put_trackers_on-next = I have all my trackers on
-onboarding-stay_aligned-verify_mounting-title = Check your Mounting
+onboarding-stay_aligned-verify_mounting-title = Mounting Reset
 onboarding-stay_aligned-verify_mounting-step-0 = Stay Aligned requires good mounting. Otherwise, you won't get a good experience with Stay Aligned.
 onboarding-stay_aligned-verify_mounting-step-1 = 1. Move around while standing.
 onboarding-stay_aligned-verify_mounting-step-2 = 2. Sit down and move your legs and feet.

gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/VerifyMounting.tsx

@@ -1,44 +1,63 @@
 import { Button } from '@/components/commons/Button';
 import { Typography } from '@/components/commons/Typography';
+import { ResetType } from 'solarxr-protocol';
+import { ResetButton } from '@/components/home/ResetButton';
+import { useLocalization } from '@fluent/react';
+import { useBreakpoint } from '@/hooks/breakpoint';
 import { VerticalStepComponentProps } from '@/components/commons/VerticalStepper';
-import { Localized } from '@fluent/react';
 
 export function VerifyMountingStep({
   nextStep,
   prevStep,
 }: VerticalStepComponentProps) {
+  const { isMobile } = useBreakpoint('mobile');
+  const { l10n } = useLocalization();
   return (
-    <div className="flex flex-grow flex-col gap-4 py-2">
-      <div className="flex flex-col gap-2">
-        <Localized id="onboarding-stay_aligned-verify_mounting-step-0">
-          <Typography />
-        </Localized>
-        <Localized id="onboarding-stay_aligned-verify_mounting-step-1">
-          <Typography />
-        </Localized>
-        <Localized id="onboarding-stay_aligned-verify_mounting-step-2">
-          <Typography />
-        </Localized>
-        <Localized id="onboarding-stay_aligned-verify_mounting-step-3">
-          <Typography />
-        </Localized>
-      </div>
-      <div className="flex gap-3 justify-between">
-        <Localized id="onboarding-stay_aligned-previous_step">
-          <Button variant="secondary" onClick={prevStep} />
-        </Localized>
+    <div className="flex flex-col flex-grow justify-between py-2 gap-2">
+      <div className="flex flex-col flex-grow">
+        <div className="flex flex-grow flex-col gap-4 max-w-sm">
+          <div className="flex flex-col gap-2">
+            <Typography>
+              {l10n.getString(
+                'onboarding-automatic_mounting-mounting_reset-step-0'
+              )}
+            </Typography>
+            <Typography>
+              {l10n.getString(
+                'onboarding-automatic_mounting-mounting_reset-step-1'
+              )}
+            </Typography>
+          </div>
+        </div>
+
+        {isMobile && (
+          <div className="flex flex-col items-center fill-background-50 justify-center">
+            <img
+              src="/images/mounting-reset-pose.webp"
+              width={450}
+              alt="mounting reset ski pose"
+            />
+          </div>
+        )}
 
-        <div className="flex gap-2">
-          <Localized id="onboarding-stay_aligned-verify_mounting-redo_mounting">
-            <Button
-              variant={'secondary'}
-              to="/onboarding/mounting/choose"
-              state={{ alonePage: true }}
+        {!isMobile && (
+          <div className="flex flex-col pt-1 items-center fill-background-50 justify-center">
+            <img
+              src="/images/mounting-reset-pose.webp"
+              width={600}
+              alt="mounting reset ski pose"
             />
-          </Localized>
-          <Localized id="onboarding-stay_aligned-next_step">
-            <Button variant="primary" onClick={nextStep} />
-          </Localized>
+          </div>
+        )}
+        <div className="flex gap-3 justify-between">
+          <Button variant={'secondary'} onClick={prevStep}>
+            {l10n.getString('onboarding-automatic_mounting-prev_step')}
+          </Button>
+          <ResetButton
+            size="small"
+            type={ResetType.Mounting}
+            onReseted={nextStep}
+          />
         </div>
       </div>
     </div>