Fixed conflicts after rebase

monkvision · Apr 24, 2024 · 119040f · 119040f
1 parent 30b8633
commit 119040f
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 18 deletions.
diff --git a/.../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts b/.../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
@@ -4,7 +4,8 @@ import { getInteractiveVariants, InteractiveVariation } from '@monkvision/common
 const BUTTON_SIZE = 60;
 const BUTTON_PADDING = 20;
 const BUTTON_BORDER_WIDTH = 2;
-export const PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH = BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
+export const PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH =
+  BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
 
 export const captureButtonForegroundColors = getInteractiveVariants(
   '#f3f3f3',

diff --git a/...D/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts b/...D/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -27,7 +27,7 @@ export const styles: Styles = {
   },
   topLandscape: {
     __media: { landscape: true },
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
   },
   infoBtn: {
     position: 'absolute',
@@ -36,7 +36,7 @@ export const styles: Styles = {
   },
   infoBtnPortrait: {
     __media: { portrait: true },
-    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
   },
   svg: {
     width: '15%',

diff --git a/...tureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.tsx b/...tureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.tsx
@@ -7,6 +7,7 @@ import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureMode } from '../../hooks';
 import { PhotoCaptureHUDCancelButton } from '../PhotoCaptureHUDCancelButton';
 import { crosshairSvg } from '../../../assets';
+import { usePhotoCaptureHUDPreviewAddDamage1stShotStyles } from './hooks';
 
 /**
  * Props of the PhotoCaptureHUDPreviewAddDamage1stShot component.
@@ -28,7 +29,7 @@ export function PhotoCaptureHUDPreviewAddDamage1stShot({
   const [showInfoPopup, setShowInfoPopup] = useState(true);
   const { t } = useTranslation();
   const primaryColor = usePhotoCaptureHUDButtonBackground();
-  const style = usePhotoCaptureHUDPreviewAddDamage1stShotStyle();
+  const style = usePhotoCaptureHUDPreviewAddDamage1stShotStyles();
 
   return (
     <div style={styles['container']}>

diff --git a/...CaptureHUDPreviewAddDamage1stShot/hook.ts → ...aptureHUDPreviewAddDamage1stShot/hooks.ts b/...CaptureHUDPreviewAddDamage1stShot/hook.ts → ...aptureHUDPreviewAddDamage1stShot/hooks.ts
@@ -7,7 +7,7 @@ export interface PhotoCaptureHUDPreviewAddDamage1stShotStyle {
   infoBtn: CSSProperties;
 }
 
-export function usePhotoCaptureHUDPreviewAddDamage1stShotStyle(): PhotoCaptureHUDPreviewAddDamage1stShotStyle {
+export function usePhotoCaptureHUDPreviewAddDamage1stShotStyles(): PhotoCaptureHUDPreviewAddDamage1stShotStyle {
   const { responsive } = useResponsiveStyle();
 
   return {

diff --git a/...D/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts b/...D/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -27,7 +27,7 @@ export const styles: Styles = {
   },
   topLandscape: {
     __media: { landscape: true },
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
   },
   frameContainer: {
     position: 'absolute',
@@ -71,6 +71,6 @@ export const styles: Styles = {
   },
   infoCloseupPortrait: {
     __media: { portrait: true },
-    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
   },
 };
diff --git a/...tureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.tsx b/...tureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.tsx
@@ -5,7 +5,7 @@ import { PhotoCaptureMode } from '../../hooks';
 import { styles } from './PhotoCaptureHUDPreviewAddDamage2ndShot.styles';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureHUDCancelButton } from '../PhotoCaptureHUDCancelButton';
-import { usePhotoCaptureHUDPreviewAddDamage2ndShotStyle } from './hook';
+import { usePhotoCaptureHUDPreviewAddDamage2ndShotStyle } from './hooks';
 
 /**
  * Props of the PhotoCaptureHUDPreviewAddDamage2ndShot component.

diff --git a/...CaptureHUDPreviewAddDamage2ndShot/hook.ts → ...aptureHUDPreviewAddDamage2ndShot/hooks.ts b/...CaptureHUDPreviewAddDamage2ndShot/hook.ts → ...aptureHUDPreviewAddDamage2ndShot/hooks.ts
diff --git a/...Capture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts b/...Capture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -26,7 +26,7 @@ export const styles: Styles = {
   },
   topLandscape: {
     __media: { landscape: true },
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
   },
   overlay: {
     zIndex: '9',

diff --git a/.../PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx b/.../PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
@@ -3,7 +3,7 @@ import { SightOverlay } from '@monkvision/common-ui-web';
 import { SightSlider } from './SightSlider';
 import { styles } from './PhotoCaptureHUDPreviewSight.styles';
 import { AddDamageButton } from './AddDamageButton';
-import { usePhotoCaptureHUDSightPreviewStyle } from './hook';
+import { usePhotoCaptureHUDSightPreviewStyle } from './hooks';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureMode } from '../../hooks';
 

diff --git a/...hotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts b/...hotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -16,12 +16,12 @@ export const styles: Styles = {
     maxWidth: '60vw',
     zIndex: '9',
     bottom: '0',
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
     left: '0',
   },
   containerPortrait: {
     __media: { portrait: true },
-    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
     right: '0',
     paddingRight: '45%',
   },

diff --git a/.../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.tsx b/.../src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.tsx
@@ -2,8 +2,8 @@ import { ImageStatus, Sight } from '@monkvision/types';
 import { RefObject, useEffect, useMemo, useRef } from 'react';
 import { useMonkState, useSightLabel } from '@monkvision/common';
 import { labels } from '@monkvision/sights';
-import { styles } from './SightSlider.styles';
 import { SightSliderButton } from './SightSliderButton';
+import { useSightSliderStyles } from './hooks';
 
 /**
  * Props of the SightSlider component.
@@ -78,14 +78,15 @@ export function SightSlider({
 }: SightSliderProps) {
   const items = useSightSliderItems(inspectionId, sights);
   const { label } = useSightLabel({ labels });
+  const { container } = useSightSliderStyles();
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     scrollToSelectedSight(ref, sights.indexOf(selectedSight), true);
   }, [selectedSight, sightsTaken]);
 
   return (
-    <div style={styles['container']} ref={ref}>
+    <div style={container} ref={ref}>
       {items.map(({ sight, status }) => (
         <SightSliderButton
           key={sight.id}

diff --git a/...ure-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/hooks.ts b/...ure-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/hooks.ts
@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './SightSlider.styles';
+
+export interface SightsSliderHUDStyle {
+  container: CSSProperties;
+}
+
+export function useSightSliderStyles(): SightsSliderHUDStyle {
+  const { responsive } = useResponsiveStyle();
+
+  return {
+    container: {
+      ...styles['container'],
+      ...responsive(styles['containerPortrait']),
+    },
+  };
+}
diff --git a/...reHUD/PhotoCaptureHUDPreviewSight/hook.ts → ...eHUD/PhotoCaptureHUDPreviewSight/hooks.ts b/...reHUD/PhotoCaptureHUDPreviewSight/hook.ts → ...eHUD/PhotoCaptureHUDPreviewSight/hooks.ts