From 69e10dbf925fdf67f4ab9b771cbe3bd42d81d116 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Tue, 24 Sep 2024 16:21:44 +0300
Subject: [PATCH 1/3] Add warning to proportions reset

---
 gui/public/i18n/en/translation.ftl            |  6 ++
 .../body-proportions/AutomaticProportions.tsx | 14 ++++-
 .../body-proportions/ManualProportions.tsx    | 14 ++++-
 .../ProportionsResetModal.tsx                 | 63 +++++++++++++++++++
 4 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx

diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index 783ab650a4..3a6e3c91ec 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 =
+    <b>Warning:</b> This will reset your proportions to the defaults.
+    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/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
index e9f832febf..9354d3fcc4 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 [skipWarning, setSkipWarning] = useState(false);
+
   applyProgress(0.9);
 
   return (
@@ -65,7 +69,7 @@ export function AutomaticProportionsPage() {
         <div className="w-full pb-4 flex flex-row mobile:justify-center">
           <Button
             variant="secondary"
-            onClick={startCountdown}
+            onClick={() => setSkipWarning(true)}
             disabled={isCounting}
           >
             <div className="relative">
@@ -76,6 +80,14 @@ export function AutomaticProportionsPage() {
             </div>
           </Button>
         </div>
+        <ProportionsResetModal
+          accept={() => {
+            startCountdown();
+            setSkipWarning(false);
+          }}
+          onClose={() => setSkipWarning(false)}
+          isOpen={skipWarning}
+        ></ProportionsResetModal>
       </div>
     </AutoboneContextC.Provider>
   );
diff --git a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
index 55a0ad7855..c6bca5f747 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 [skipWarning, setSkipWarning] = useState(false);
   const resetAll = () => {
     sendRPCPacket(
       RpcMessage.SkeletonResetAllRequest,
@@ -32,9 +34,17 @@ export function ButtonsControl() {
       >
         {l10n.getString('onboarding-previous_step')}
       </Button>
-      <Button variant="secondary" onClick={resetAll}>
+      <Button variant="secondary" onClick={() => setSkipWarning(true)}>
         {l10n.getString('reset-reset_all')}
       </Button>
+      <ProportionsResetModal
+        accept={() => {
+          resetAll();
+          setSkipWarning(false);
+        }}
+        onClose={() => setSkipWarning(false)}
+        isOpen={skipWarning}
+      ></ProportionsResetModal>
       {!state.alonePage && (
         <Button variant="primary" className="ml-auto" to="/onboarding/done">
           {l10n.getString('onboarding-continue')}
diff --git a/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx b/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
new file mode 100644
index 0000000000..283a8aee68
--- /dev/null
+++ b/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
@@ -0,0 +1,63 @@
+import { Button } from '@/components/commons/Button';
+import { WarningBox } from '@/components/commons/TipBox';
+import { Localized, useLocalization } from '@fluent/react';
+import { BaseModal } from '@/components/commons/BaseModal';
+import ReactModal from 'react-modal';
+
+export function ProportionsResetModal({
+  isOpen = true,
+  onClose,
+  accept,
+  ...props
+}: {
+  /**
+   * Is the parent/sibling component opened?
+   */
+  isOpen: boolean;
+  /**
+   * Function to trigger when the warning hasn't been accepted
+   */
+  onClose: () => void;
+  /**
+   * Function when you press `Reset settings`
+   */
+  accept: () => void;
+} & ReactModal.Props) {
+  const { l10n } = useLocalization();
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      shouldCloseOnOverlayClick
+      onRequestClose={onClose}
+      className={props.className}
+      overlayClassName={props.overlayClassName}
+    >
+      <div className="flex w-full h-full flex-col ">
+        <div className="flex flex-col flex-grow items-center gap-3">
+          <Localized id="reset-reset_all_warning" elems={{ b: <b></b> }}>
+            <WarningBox>
+              <b>Warning:</b> This will reset your proportions to the defaults.
+              <br />
+              Are you sure you want to do this?
+            </WarningBox>
+          </Localized>
+
+          <div className="flex flex-row gap-3 pt-5 place-content-center">
+            <Button variant="primary" onClick={onClose}>
+              {l10n.getString('reset-reset_all_warning-cancel')}
+            </Button>
+            <Button
+              variant="tertiary"
+              onClick={() => {
+                accept();
+              }}
+            >
+              {l10n.getString('reset-reset_all_warning-reset')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}

From dbad2c83ed5be23a13c15ea7f895e12e5ca1c71c Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Tue, 24 Sep 2024 19:09:34 +0300
Subject: [PATCH 2/3] Code suggestion change

Co-Authored-By: Uriel <imurx@proton.me>
---
 gui/public/i18n/en/translation.ftl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index 3a6e3c91ec..ac5fed41f6 100644
--- a/gui/public/i18n/en/translation.ftl
+++ b/gui/public/i18n/en/translation.ftl
@@ -75,7 +75,7 @@ skeleton_bone-ELBOW_OFFSET = Elbow Offset
 ## Tracker reset buttons
 reset-reset_all = Reset all proportions
 reset-reset_all_warning =
-    <b>Warning:</b> This will reset your proportions to the defaults.
+    <b>Warning:</b> 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

From 7658741460581ff445fc7f8ea65bdb7bf38b8400 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Tue, 8 Oct 2024 16:12:19 +0300
Subject: [PATCH 3/3] Code review suggestions

renames "skipWarning to "showWarning" (other files had "skipWarning" renamed also) & updates fallback warning text

Co-Authored-By: Butterscotch! <5095026+ButterscotchV@users.noreply.github.com>
---
 gui/src/components/onboarding/OnboardingLayout.tsx     | 10 +++++-----
 .../pages/body-proportions/AutomaticProportions.tsx    | 10 +++++-----
 .../pages/body-proportions/ManualProportions.tsx       | 10 +++++-----
 .../pages/body-proportions/ProportionsResetModal.tsx   |  3 ++-
 .../onboarding/pages/mounting/MountingChoose.tsx       |  6 +++---
 5 files changed, 20 insertions(+), 19 deletions(-)

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 ? (
     <div className="onboarding-layout h-full">
@@ -21,15 +21,15 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
         <div className="absolute top-12 mobile:top-0 right-2 z-50">
           <SkipSetupButton
             visible={true}
-            modalVisible={skipWarning}
-            onClick={() => setSkipWarning(true)}
+            modalVisible={showWarning}
+            onClick={() => setShowWarning(true)}
           ></SkipSetupButton>
         </div>
         <div className="h-full w-full overflow-y-auto">{children}</div>
         <SkipSetupWarningModal
           accept={skipSetup}
-          onClose={() => setSkipWarning(false)}
-          isOpen={skipWarning}
+          onClose={() => setShowWarning(false)}
+          isOpen={showWarning}
         ></SkipSetupWarningModal>
       </div>
     </div>
diff --git a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
index 9354d3fcc4..b843ba1352 100644
--- a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
@@ -32,7 +32,7 @@ export function AutomaticProportionsPage() {
     },
   });
 
-  const [skipWarning, setSkipWarning] = useState(false);
+  const [showWarning, setShowWarning] = useState(false);
 
   applyProgress(0.9);
 
@@ -69,7 +69,7 @@ export function AutomaticProportionsPage() {
         <div className="w-full pb-4 flex flex-row mobile:justify-center">
           <Button
             variant="secondary"
-            onClick={() => setSkipWarning(true)}
+            onClick={() => setShowWarning(true)}
             disabled={isCounting}
           >
             <div className="relative">
@@ -83,10 +83,10 @@ export function AutomaticProportionsPage() {
         <ProportionsResetModal
           accept={() => {
             startCountdown();
-            setSkipWarning(false);
+            setShowWarning(false);
           }}
-          onClose={() => setSkipWarning(false)}
-          isOpen={skipWarning}
+          onClose={() => setShowWarning(false)}
+          isOpen={showWarning}
         ></ProportionsResetModal>
       </div>
     </AutoboneContextC.Provider>
diff --git a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
index c6bca5f747..71b6accdd0 100644
--- a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
@@ -17,7 +17,7 @@ export function ButtonsControl() {
   const { state } = useOnboarding();
   const { sendRPCPacket } = useWebsocketAPI();
 
-  const [skipWarning, setSkipWarning] = useState(false);
+  const [showWarning, setShowWarning] = useState(false);
   const resetAll = () => {
     sendRPCPacket(
       RpcMessage.SkeletonResetAllRequest,
@@ -34,16 +34,16 @@ export function ButtonsControl() {
       >
         {l10n.getString('onboarding-previous_step')}
       </Button>
-      <Button variant="secondary" onClick={() => setSkipWarning(true)}>
+      <Button variant="secondary" onClick={() => setShowWarning(true)}>
         {l10n.getString('reset-reset_all')}
       </Button>
       <ProportionsResetModal
         accept={() => {
           resetAll();
-          setSkipWarning(false);
+          setShowWarning(false);
         }}
-        onClose={() => setSkipWarning(false)}
-        isOpen={skipWarning}
+        onClose={() => setShowWarning(false)}
+        isOpen={showWarning}
       ></ProportionsResetModal>
       {!state.alonePage && (
         <Button variant="primary" className="ml-auto" to="/onboarding/done">
diff --git a/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx b/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
index 283a8aee68..62839c2a5e 100644
--- a/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
@@ -37,7 +37,8 @@ export function ProportionsResetModal({
         <div className="flex flex-col flex-grow items-center gap-3">
           <Localized id="reset-reset_all_warning" elems={{ b: <b></b> }}>
             <WarningBox>
-              <b>Warning:</b> This will reset your proportions to the defaults.
+              <b>Warning:</b> This will reset your proportions to being just
+              based on your height.
               <br />
               Are you sure you want to do this?
             </WarningBox>
diff --git a/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx b/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx
index 96eda0c580..af264e46e5 100644
--- a/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx
+++ b/gui/src/components/onboarding/pages/mounting/MountingChoose.tsx
@@ -10,7 +10,7 @@ export function MountingChoose() {
   const { l10n } = useLocalization();
   const { applyProgress, skipSetup, state } = useOnboarding();
   const [animated, setAnimated] = useState(false);
-  const [skipWarning, setSkipWarning] = useState(false);
+  const [showWarning, setShowWarning] = useState(false);
 
   applyProgress(0.65);
 
@@ -139,8 +139,8 @@ export function MountingChoose() {
       </div>
       <SkipSetupWarningModal
         accept={skipSetup}
-        onClose={() => setSkipWarning(false)}
-        isOpen={skipWarning}
+        onClose={() => setShowWarning(false)}
+        isOpen={showWarning}
       ></SkipSetupWarningModal>
     </>
   );