From 10ef7e8707714551931551b6089039ae6363ed3c Mon Sep 17 00:00:00 2001
From: LinaYahya <linaebe0@gmail.com>
Date: Mon, 29 Jul 2024 14:21:34 +0200
Subject: [PATCH] feat: style enhancement

---
 .../AddLabelsStep/ImageFrame.tsx              |  3 +-
 .../builder/configuration/PreviewStep.tsx     | 32 ++++++++++---------
 .../common/DraggableFrameWithLabels.tsx       |  2 +-
 src/modules/common/ImageFrame.tsx             |  5 +--
 src/modules/common/PlayerFrame.tsx            |  4 +--
 5 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/modules/builder/configuration/AddLabelsStep/ImageFrame.tsx b/src/modules/builder/configuration/AddLabelsStep/ImageFrame.tsx
index e30e039..80069f2 100644
--- a/src/modules/builder/configuration/AddLabelsStep/ImageFrame.tsx
+++ b/src/modules/builder/configuration/AddLabelsStep/ImageFrame.tsx
@@ -12,7 +12,7 @@ import { debounce } from '@/utils';
 const Container = styled('div')(() => ({
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center',
+  alignItems: 'baseline',
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -78,6 +78,7 @@ const ImageFrame = (): JSX.Element | null => {
             objectFit: 'cover',
             pointerEvents: 'auto',
             cursor: 'cell',
+            width: '100%',
           }}
         />
       </Container>
diff --git a/src/modules/builder/configuration/PreviewStep.tsx b/src/modules/builder/configuration/PreviewStep.tsx
index 9a9a6df..7a0f7cc 100644
--- a/src/modules/builder/configuration/PreviewStep.tsx
+++ b/src/modules/builder/configuration/PreviewStep.tsx
@@ -19,23 +19,25 @@ const PreviewStep = ({
 
   const { t } = useAppTranslation();
   return (
-    <Stack spacing={2} padding={2}>
+    <>
       <Alert severity="success">{t(APP.PREVIEW_NOTE)}</Alert>
-      <Box>
-        <Typography variant="h5" fontWeight="bold">
-          {appContext?.item.name}
-        </Typography>
-        <Typography variant="body1">
-          {appSettings?.[0].data.description}
-        </Typography>
-      </Box>
-      <PlayerFrame />
-      <Stack direction="row" gap={1} width="100%" justifyContent="flex-end">
-        <Button size="large" onClick={moveToPrevStep}>
-          {t(APP.BACK)}
-        </Button>
+      <Stack spacing={2} padding={2}>
+        <Box>
+          <Typography variant="h5" fontWeight="bold">
+            {appContext?.item.name}
+          </Typography>
+          <Typography variant="body1">
+            {appSettings?.[0].data.description}
+          </Typography>
+        </Box>
+        <PlayerFrame />
+        <Stack direction="row" gap={1} width="100%" justifyContent="flex-end">
+          <Button size="large" onClick={moveToPrevStep}>
+            {t(APP.BACK)}
+          </Button>
+        </Stack>
       </Stack>
-    </Stack>
+    </>
   );
 };
 
diff --git a/src/modules/common/DraggableFrameWithLabels.tsx b/src/modules/common/DraggableFrameWithLabels.tsx
index f570f41..2f53c78 100644
--- a/src/modules/common/DraggableFrameWithLabels.tsx
+++ b/src/modules/common/DraggableFrameWithLabels.tsx
@@ -40,7 +40,7 @@ const DraggableFrameWithLabels = ({
   };
 
   return (
-    <Box sx={{ position: 'relative', width: '100%' }}>
+    <Box sx={{ width: '100%' }}>
       <TransformContainer
         initialScale={1}
         panning={{ disabled: isDragging }}
diff --git a/src/modules/common/ImageFrame.tsx b/src/modules/common/ImageFrame.tsx
index a7b050c..40b3289 100644
--- a/src/modules/common/ImageFrame.tsx
+++ b/src/modules/common/ImageFrame.tsx
@@ -8,7 +8,7 @@ type Props = {
 const Container = styled('div')(() => ({
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center',
+  alignItems: 'baseline',
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -27,10 +27,11 @@ const ImageFrame = ({ appSettingId }: Props): JSX.Element | null => {
         src={URL.createObjectURL(dataFile)}
         alt="frame"
         style={{
-          maxWidth: '100%',
+          width: '100%',
           objectFit: 'cover',
           pointerEvents: 'auto',
           cursor: 'cell',
+          maxHeight: '100%',
         }}
       />
     </Container>
diff --git a/src/modules/common/PlayerFrame.tsx b/src/modules/common/PlayerFrame.tsx
index aaebcb8..1444e22 100644
--- a/src/modules/common/PlayerFrame.tsx
+++ b/src/modules/common/PlayerFrame.tsx
@@ -37,7 +37,7 @@ const PlayerFrame = (): JSX.Element => {
           ind: index + 1,
           choices: [],
           x: `${(l.x / imageDimension.width) * 100}%`,
-          y: `${(l.y / ADD_LABEL_FRAME_HEIGHT) * 100}%`,
+          y: `${((l.y - 0) / ADD_LABEL_FRAME_HEIGHT) * 100}%`,
         }));
 
         const allChoices = appLabels.map(({ id, content }) => ({
@@ -104,7 +104,7 @@ const PlayerFrame = (): JSX.Element => {
   };
 
   return (
-    <Box>
+    <Box sx={{ width: '100%' }}>
       <Typography variant="body1" fontWeight={500}>
         {t(APP.DRAG_DROP_EXERCISE_TITLE)}
       </Typography>