From 57b82299697856963c09b060219af2349c437ebb Mon Sep 17 00:00:00 2001
From: David Ly <dly@acvauctions.com>
Date: Wed, 15 Jan 2025 12:20:12 +0100
Subject: [PATCH] Fixed PhotoCapture tutorial portrait behavior

---
 apps/demo-app/src/components/AppRouter.tsx          |  4 ++--
 apps/demo-app/src/pages/index.ts                    |  2 ++
 .../SightSlider/SightSlider.styles.ts               |  1 +
 .../PhotoCaptureHUDTutorial.styles.ts               |  7 +++++++
 .../PhotoCaptureHUDTutorial.tsx                     |  4 +++-
 .../PhotoCaptureHUDTutorial/hooks.ts                | 13 +++++++++++++
 6 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/hooks.ts

diff --git a/apps/demo-app/src/components/AppRouter.tsx b/apps/demo-app/src/components/AppRouter.tsx
index d641ac0bc..440ffc480 100644
--- a/apps/demo-app/src/components/AppRouter.tsx
+++ b/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 (
diff --git a/apps/demo-app/src/pages/index.ts b/apps/demo-app/src/pages/index.ts
index 88cdfcf36..1ca8c777b 100644
--- a/apps/demo-app/src/pages/index.ts
+++ b/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';
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSlider.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSlider.styles.ts
index 732a0c72c..c3187b1e2 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightSlider/SightSlider.styles.ts
+++ b/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: {
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts
index d616a3a7b..fef7323b6 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts
+++ b/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',
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
index d10d97d23..50263be44 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx
+++ b/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']} />
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/hooks.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/hooks.ts
new file mode 100644
index 000000000..e99115330
--- /dev/null
+++ b/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']),
+    },
+  };
+}