From 265e5f84c28b38b56e22ef5352c4355f776ee462 Mon Sep 17 00:00:00 2001
From: httpjamesm <github@httpjames.space>
Date: Thu, 19 Oct 2023 22:29:15 -0400
Subject: [PATCH] feat: photo editor title

---
 .../photos/public/locales/en/translation.json |  3 +-
 .../PhotoViewer/ImageEditorOverlay/index.tsx  | 70 ++++++++++---------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/apps/photos/public/locales/en/translation.json b/apps/photos/public/locales/en/translation.json
index 4a06eb17d..1e59e3db9 100644
--- a/apps/photos/public/locales/en/translation.json
+++ b/apps/photos/public/locales/en/translation.json
@@ -614,5 +614,6 @@
     "COLORS": "Colors",
     "FLIP": "Flip",
     "ROTATION": "Rotation",
-    "RESET": "Reset"
+    "RESET": "Reset",
+    "PHOTO_EDITOR": "Photo Editor"
 }
diff --git a/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
index 6fa5bfd0b..dced7b6b0 100644
--- a/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
+++ b/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
@@ -5,6 +5,7 @@ import {
     IconButton,
     Tab,
     Tabs,
+    Typography,
     useTheme,
 } from '@mui/material';
 import {
@@ -217,41 +218,46 @@ const ImageEditorOverlay = (props: IProps) => {
                             backdropFilter: 'blur(5px)',
                         }}
                         open>
-                        <Box
-                            display="inline-block"
-                            width="100%"
-                            height="100%"
-                            overflow="hidden"
-                            padding="3rem"
-                            boxSizing={'border-box'}>
+                        <Box padding="3rem" width="100%" height="100%">
+                            <Typography variant="h2" fontWeight="bold">
+                                {t('PHOTO_EDITOR')}
+                            </Typography>
                             <Box
-                                height="100%"
+                                display="inline-block"
                                 width="100%"
-                                ref={parentRef}
-                                display="flex"
-                                alignItems="center"
-                                justifyContent="center">
-                                {(fileURL === null || canvasLoading) && (
-                                    <CircularProgress />
-                                )}
+                                height="100%"
+                                overflow="hidden"
+                                boxSizing={'border-box'}>
+                                <Box
+                                    height="100%"
+                                    width="100%"
+                                    ref={parentRef}
+                                    display="flex"
+                                    alignItems="center"
+                                    justifyContent="center">
+                                    {(fileURL === null || canvasLoading) && (
+                                        <CircularProgress />
+                                    )}
 
-                                <canvas
-                                    ref={canvasRef}
-                                    style={{
-                                        objectFit: 'contain',
-                                        display:
-                                            fileURL === null || canvasLoading
-                                                ? 'none'
-                                                : 'block',
-                                        position: 'absolute',
-                                    }}
-                                />
-                                <canvas
-                                    ref={originalSizeCanvasRef}
-                                    style={{
-                                        display: 'none',
-                                    }}
-                                />
+                                    <canvas
+                                        ref={canvasRef}
+                                        style={{
+                                            objectFit: 'contain',
+                                            display:
+                                                fileURL === null ||
+                                                canvasLoading
+                                                    ? 'none'
+                                                    : 'block',
+                                            position: 'absolute',
+                                        }}
+                                    />
+                                    <canvas
+                                        ref={originalSizeCanvasRef}
+                                        style={{
+                                            display: 'none',
+                                        }}
+                                    />
+                                </Box>
                             </Box>
                         </Box>
                         <Box