fix: recovery back button

(cherry picked from commit 8570f84)
trezor · May 10, 2022 · 4fc5e88 · 4fc5e88
1 parent 6035083
commit 4fc5e88
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/packages/components/src/config/variables.ts b/packages/components/src/config/variables.ts
@@ -34,15 +34,16 @@ export const LAYOUT_SIZE = {
 } as const;
 
 export const Z_INDEX = {
-    MODAL: 10000,
+    BASE: 0,
     BANNER: 3,
-    BANNER_ON_TOP: 10001,
-    NAVIGATION_BAR: 30,
     DISCOVERY_PROGRESS: 29, // should be below NAVIGATION_BAR
+    NAVIGATION_BAR: 30,
     GUIDE_PANEL: 11,
-    GUIDE_PANEL_BESIDE_MODAL: 10002,
     GUIDE_BUTTON: 10,
+    MODAL: 10000,
+    BANNER_ON_TOP: 10001,
     GUIDE_BUTTON_BESIDE_MODAL: 10001,
+    GUIDE_PANEL_BESIDE_MODAL: 10002,
     DROPDOWN_MENU: 10003, // should lay above GUIDE_PANEL
     TOOLTIP: 10003, // should lay above GUIDE_PANEL
     TOAST_CONTAINER: 10003, // should lay above GUIDE_PANEL

diff --git a/packages/suite/src/components/onboarding/OnboardingStepBox/index.tsx b/packages/suite/src/components/onboarding/OnboardingStepBox/index.tsx
@@ -5,11 +5,10 @@ import { Box, BoxProps } from '@onboarding-components';
 import { Translation } from '@suite-components';
 import { useGuide } from '@guide-hooks';
 
-const OuterActions = styled.div<{ smallMargin?: boolean }>`
-    display: flex;
-    margin-top: ${props => (props.smallMargin ? '0px' : '40px')};
-    width: 100%;
-    justify-content: center;
+const ConfirmWrapper = styled.div`
+    margin-bottom: 20px;
+    height: 62px;
+    z-index: 1;
 `;
 
 const InnerActions = styled.div`
@@ -19,29 +18,32 @@ const InnerActions = styled.div`
     margin-top: 32px;
 `;
 
-const ConfirmWrapper = styled.div`
-    margin-bottom: 20px;
+const OuterActions = styled.div<{ smallMargin?: boolean }>`
+    display: flex;
+    margin-top: ${({ smallMargin }) => (smallMargin ? '0px' : '20px')};
+    width: 100%;
+    justify-content: center;
     z-index: 1;
     height: 62px;
 `;
 
 const StyledBackdrop = styled(Backdrop)<{ guideOpen: boolean; show: boolean }>`
     right: ${({ guideOpen }) => (guideOpen ? variables.LAYOUT_SIZE.GUIDE_PANEL_WIDTH : '0')};
     transition: all 0.3s;
-    z-index: 0;
     opacity: ${({ show }) => (show ? '1' : '0')};
     pointer-events: ${({ show }) => (show ? 'initial' : 'none')};
+    z-index: ${variables.Z_INDEX.BASE};
 `;
 
-interface Props extends BoxProps {
+export interface OnboardingStepBoxProps extends BoxProps {
     innerActions?: React.ReactNode;
     outerActions?: React.ReactNode;
     confirmOnDevice?: number;
     disableConfirmWrapper?: boolean;
     nested?: boolean;
 }
 
-const OnboardingStepBox = ({
+export const OnboardingStepBox = ({
     heading,
     description,
     image,
@@ -53,15 +55,15 @@ const OnboardingStepBox = ({
     className,
     children,
     ...rest
-}: Props) => (
+}: OnboardingStepBoxProps) => (
     <>
         <StyledBackdrop
             guideOpen={useGuide().isGuideOpen}
             show={!!confirmOnDevice && !disableConfirmWrapper}
         />
         {!disableConfirmWrapper && (
             <ConfirmWrapper data-test="@onboarding/confirm-on-device">
-                {typeof confirmOnDevice === 'number' && (
+                {confirmOnDevice && (
                     <ConfirmOnDevice
                         title={<Translation id="TR_CONFIRM_ON_TREZOR" />}
                         trezorModel={confirmOnDevice === 1 ? 1 : 2}
@@ -70,6 +72,7 @@ const OnboardingStepBox = ({
                 )}
             </ConfirmWrapper>
         )}
+
         <Box image={image} heading={heading} description={description} nested={nested} {...rest}>
             {(children || innerActions) && (
                 <>
@@ -78,9 +81,7 @@ const OnboardingStepBox = ({
                 </>
             )}
         </Box>
+
         {outerActions && <OuterActions smallMargin={nested}>{outerActions}</OuterActions>}
     </>
 );
-
-export default OnboardingStepBox;
-export type { Props as OnboardingStepBoxProps };
diff --git a/packages/suite/src/components/onboarding/index.ts b/packages/suite/src/components/onboarding/index.ts
@@ -11,8 +11,8 @@ import ConnectDevicePromptManager from './ConnectDevicePromptManager';
 import { OnboardingLayout } from './Layouts/OnboardingLayout';
 import ProgressBar from './ProgressBar';
 import Hologram from './Hologram';
-import DeviceAnimation, { DeviceAnimationType } from './DeviceAnimation';
-import OnboardingStepBox, { OnboardingStepBoxProps } from './OnboardingStepBox';
+import DeviceAnimation, { type DeviceAnimationType } from './DeviceAnimation';
+import { OnboardingStepBox, type OnboardingStepBoxProps } from './OnboardingStepBox';
 import SkipStepConfirmation from './SkipStepConfirmation';
 
 export {