Fixed PhotoCapture tutorial portrait behavior (#903)

Author: dlymonkai

apps/demo-app/src/components/AppRouter.tsx

@@ -6,10 +6,10 @@ import {
   Page,
   PhotoCapturePage,
   VehicleTypeSelectionPage,
+  CaptureSelectionPage,
+  DamageDisclosurePage,
 } from '../pages';
 import { App } from './App';
-import { CaptureSelectionPage } from '../pages/CaptureSelectionPage';
-import { DamageDisclosurePage } from '../pages/DamageDisclosurePage';
 
 export function AppRouter() {
   return (

apps/demo-app/src/pages/index.ts

@@ -3,3 +3,5 @@ export * from './LoginPage';
 export * from './CreateInspectionPage';
 export * from './PhotoCapturePage';
 export * from './VehicleTypeSelectionPage';
+export * from './CaptureSelectionPage';
+export * from './DamageDisclosurePage';

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSlider.styles.ts

@@ -19,6 +19,7 @@ export const styles: Styles = {
     __media: { portrait: true },
     bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
     right: 0,
+    paddingLeft: '30%',
     paddingRight: '45%',
   },
   button: {

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts

@@ -22,6 +22,13 @@ export const styles: Styles = {
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  elementsContainerPortrait: {
+    __media: { portrait: true },
+    width: 'auto',
+    right: '10px',
+    left: '10px',
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.8}px`,
+  },
   topContainer: {
     width: '100%',
     display: 'flex',

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx

@@ -8,6 +8,7 @@ import { SightGuideline } from '../PhotoCaptureHUDElementsSight';
 import { ArrowIcon } from './ArrowIcon';
 import { DisplayText } from './DisplayText';
 import { useColorBackground } from '../../../hooks';
+import { usePhotoCaptureHUDTutorialStyle } from './hooks';
 
 /**
  * Props of the PhotoCaptureHUDTutorial component.
@@ -50,10 +51,11 @@ export function PhotoCaptureHUDTutorial({
 }: PhotoCaptureHUDTutorialProps) {
   const { t } = useTranslation();
   const primaryColor = useColorBackground();
+  const style = usePhotoCaptureHUDTutorialStyle();
 
   return currentTutorialStep ? (
     <div style={styles['backdropContainer']} data-testid='backdrop'>
-      <div style={styles['elementsContainer']}>
+      <div style={style.elementsContainer}>
         <div style={styles['topContainer']}>
           <div style={styles['buttonsContainer']}>
             <div style={styles['closeButtonTwin']} />

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/hooks.ts

@@ -0,0 +1,13 @@
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './PhotoCaptureHUDTutorial.styles';
+
+export function usePhotoCaptureHUDTutorialStyle() {
+  const { responsive } = useResponsiveStyle();
+
+  return {
+    elementsContainer: {
+      ...styles['elementsContainer'],
+      ...responsive(styles['elementsContainerPortrait']),
+    },
+  };
+}