From 7310d4da036a41b2ad488a080eabd4324554be41 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 16 Jan 2025 09:46:43 +0530
Subject: [PATCH] const

---
 .../PhotoViewer/ImageEditorOverlay.tsx        | 383 +++++++++---------
 web/packages/base/components/utils/theme.ts   |   4 +-
 2 files changed, 188 insertions(+), 199 deletions(-)

diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
index 351102dfe4..4396b9ee9f 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
@@ -520,225 +520,214 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
     };
 
     return (
-        <>
-            <Backdrop
+        <Backdrop
+            sx={{
+                backgroundColor: "background.default" /* Opaque */,
+                zIndex: photosDialogZIndex,
+                width: "100%",
+            }}
+            open
+        >
+            <Box
                 sx={{
-                    background: "#000",
-                    zIndex: photosDialogZIndex,
+                    padding: "1rem",
                     width: "100%",
+                    height: "100%",
                 }}
-                open
             >
-                <Box
+                <Stack
+                    direction="row"
                     sx={{
-                        padding: "1rem",
-                        width: "100%",
-                        height: "100%",
+                        justifyContent: "space-between",
+                        alignItems: "center",
                     }}
                 >
-                    <Stack
-                        direction="row"
-                        sx={{
-                            justifyContent: "space-between",
-                            alignItems: "center",
+                    <Typography variant="h2" sx={{ fontWeight: "medium" }}>
+                        {t("photo_editor")}
+                    </Typography>
+                    <IconButton
+                        onClick={() => {
+                            setShowControlsDrawer(true);
                         }}
                     >
-                        <Typography variant="h2" sx={{ fontWeight: "medium" }}>
-                            {t("photo_editor")}
-                        </Typography>
-                        <IconButton
-                            onClick={() => {
-                                setShowControlsDrawer(true);
-                            }}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                    </Stack>
-                    <Stack
-                        direction="row"
-                        onMouseUp={handleDragEnd}
-                        onMouseMove={isDragging ? handleDrag : null}
-                        onMouseDown={handleDragStart}
+                        <MenuIcon />
+                    </IconButton>
+                </Stack>
+                <Stack
+                    direction="row"
+                    onMouseUp={handleDragEnd}
+                    onMouseMove={isDragging ? handleDrag : null}
+                    onMouseDown={handleDragStart}
+                    sx={{
+                        width: "100%",
+                        height: "100%",
+                        overflow: "hidden",
+                        boxSizing: "border-box",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        position: "relative",
+                    }}
+                >
+                    <Box
                         sx={{
+                            position: "relative",
                             width: "100%",
                             height: "100%",
-                            overflow: "hidden",
-                            boxSizing: "border-box",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            position: "relative",
                         }}
                     >
-                        <Box
+                        <Stack
+                            ref={parentRef}
+                            direction="row"
                             sx={{
-                                position: "relative",
+                                height: "88%",
                                 width: "100%",
-                                height: "100%",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                position: "relative",
                             }}
                         >
-                            <Stack
-                                ref={parentRef}
-                                direction="row"
-                                sx={{
-                                    height: "88%",
-                                    width: "100%",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    position: "relative",
-                                }}
-                            >
-                                {(fileURL === null || canvasLoading) && (
-                                    <CircularProgress />
-                                )}
-
-                                <canvas
-                                    ref={canvasRef}
-                                    style={{
-                                        objectFit: "contain",
-                                        display:
-                                            fileURL === null || canvasLoading
-                                                ? "none"
-                                                : "block",
-                                        position: "absolute",
-                                    }}
-                                />
-                                <canvas
-                                    ref={originalSizeCanvasRef}
-                                    style={{
-                                        display: "none",
-                                    }}
-                                />
-
-                                {currentTab === "crop" && (
-                                    <FreehandCropRegion
-                                        cropBox={cropBox}
-                                        ref={cropBoxRef}
-                                        setIsDragging={setIsDragging}
-                                    />
-                                )}
-                            </Stack>
-                            {currentTab === "crop" && (
-                                <CenteredFlex marginTop="1rem">
-                                    <Button
-                                        color="accent"
-                                        startIcon={<CropIcon />}
-                                        onClick={applyCrop}
-                                    >
-                                        {t("apply_crop")}
-                                    </Button>
-                                </CenteredFlex>
+                            {(fileURL === null || canvasLoading) && (
+                                <CircularProgress />
                             )}
-                        </Box>
-                    </Stack>
-                </Box>
-                <SidebarDrawer
-                    variant="persistent"
-                    anchor="right"
-                    open={showControlsDrawer}
-                    onClose={handleCloseWithConfirmation}
-                >
-                    <Stack
-                        direction="row"
-                        sx={{ justifyContent: "space-between" }}
-                    >
-                        <IconButton
-                            onClick={() => {
-                                setShowControlsDrawer(false);
-                            }}
-                        >
-                            <ChevronRightIcon />
-                        </IconButton>
-                        <IconButton onClick={handleCloseWithConfirmation}>
-                            <CloseIcon />
-                        </IconButton>
-                    </Stack>
-                    <Stack
-                        direction="row"
-                        sx={{
-                            gap: "0.5rem",
-                            marginBottom: "1rem",
+
+                            <canvas
+                                ref={canvasRef}
+                                style={{
+                                    objectFit: "contain",
+                                    display:
+                                        fileURL === null || canvasLoading
+                                            ? "none"
+                                            : "block",
+                                    position: "absolute",
+                                }}
+                            />
+                            <canvas
+                                ref={originalSizeCanvasRef}
+                                style={{
+                                    display: "none",
+                                }}
+                            />
+
+                            {currentTab === "crop" && (
+                                <FreehandCropRegion
+                                    cropBox={cropBox}
+                                    ref={cropBoxRef}
+                                    setIsDragging={setIsDragging}
+                                />
+                            )}
+                        </Stack>
+                        {currentTab === "crop" && (
+                            <CenteredFlex marginTop="1rem">
+                                <Button
+                                    color="accent"
+                                    startIcon={<CropIcon />}
+                                    onClick={applyCrop}
+                                >
+                                    {t("apply_crop")}
+                                </Button>
+                            </CenteredFlex>
+                        )}
+                    </Box>
+                </Stack>
+            </Box>
+            <SidebarDrawer
+                variant="persistent"
+                anchor="right"
+                open={showControlsDrawer}
+                onClose={handleCloseWithConfirmation}
+            >
+                <Stack direction="row" sx={{ justifyContent: "space-between" }}>
+                    <IconButton
+                        onClick={() => {
+                            setShowControlsDrawer(false);
                         }}
                     >
-                        <Tabs
-                            value={currentTab}
-                            onChange={(_, value) => {
-                                setCurrentTab(value);
-                            }}
-                        >
-                            <Tab label={t("crop")} value="crop" />
-                            <Tab label={t("transform")} value="transform" />
-                            <Tab
-                                label={t("colors")}
-                                value="colors"
-                                disabled={transformationPerformed}
-                            />
-                        </Tabs>
-                    </Stack>
-                    <MenuSectionTitle title={t("reset")} />
-                    <MenuItemGroup sx={{ mb: "0.5rem" }}>
-                        <EnteMenuItem
-                            disabled={canvasLoading}
-                            startIcon={<CropOriginalIcon />}
-                            onClick={() => {
-                                loadCanvas();
-                            }}
-                            label={t("restore_original")}
+                        <ChevronRightIcon />
+                    </IconButton>
+                    <IconButton onClick={handleCloseWithConfirmation}>
+                        <CloseIcon />
+                    </IconButton>
+                </Stack>
+                <Stack
+                    direction="row"
+                    sx={{
+                        gap: "0.5rem",
+                        marginBottom: "1rem",
+                    }}
+                >
+                    <Tabs
+                        value={currentTab}
+                        onChange={(_, value) => {
+                            setCurrentTab(value);
+                        }}
+                    >
+                        <Tab label={t("crop")} value="crop" />
+                        <Tab label={t("transform")} value="transform" />
+                        <Tab
+                            label={t("colors")}
+                            value="colors"
+                            disabled={transformationPerformed}
                         />
-                    </MenuItemGroup>
-                    {currentTab === "crop" && (
-                        <CropMenu
-                            {...menuProps}
-                            previewScale={previewCanvasScale}
-                            cropBoxProps={cropBox}
-                            cropBoxRef={cropBoxRef}
-                            resetCropBox={resetCropBox}
-                        />
-                    )}
-                    {currentTab === "transform" && (
-                        <TransformMenu {...menuProps} />
-                    )}
-                    {currentTab === "colors" && (
-                        <ColoursMenu
-                            brightness={brightness}
-                            contrast={contrast}
-                            saturation={saturation}
-                            blur={blur}
-                            invert={invert}
-                            setBrightness={setBrightness}
-                            setContrast={setContrast}
-                            setSaturation={setSaturation}
-                            setBlur={setBlur}
-                            setInvert={setInvert}
-                        />
-                    )}
-                    <MenuSectionTitle title={t("export_data")} />
-                    <MenuItemGroup>
-                        <EnteMenuItem
-                            startIcon={<DownloadIcon />}
-                            onClick={downloadEditedPhoto}
-                            label={t("download_edited")}
-                            disabled={
-                                !transformationPerformed && !coloursAdjusted
-                            }
-                        />
-                        <MenuItemDivider />
-                        <EnteMenuItem
-                            startIcon={<CloudUploadIcon />}
-                            onClick={saveCopyToEnte}
-                            label={t("save_a_copy_to_ente")}
-                            disabled={
-                                !transformationPerformed && !coloursAdjusted
-                            }
-                        />
-                    </MenuItemGroup>
-                    {!transformationPerformed && !coloursAdjusted && (
-                        <MenuSectionTitle
-                            title={t("photo_edit_required_to_save")}
-                        />
-                    )}
-                </SidebarDrawer>
-            </Backdrop>
-        </>
+                    </Tabs>
+                </Stack>
+                <MenuSectionTitle title={t("reset")} />
+                <MenuItemGroup sx={{ mb: "0.5rem" }}>
+                    <EnteMenuItem
+                        disabled={canvasLoading}
+                        startIcon={<CropOriginalIcon />}
+                        onClick={() => {
+                            loadCanvas();
+                        }}
+                        label={t("restore_original")}
+                    />
+                </MenuItemGroup>
+                {currentTab === "crop" && (
+                    <CropMenu
+                        {...menuProps}
+                        previewScale={previewCanvasScale}
+                        cropBoxProps={cropBox}
+                        cropBoxRef={cropBoxRef}
+                        resetCropBox={resetCropBox}
+                    />
+                )}
+                {currentTab === "transform" && <TransformMenu {...menuProps} />}
+                {currentTab === "colors" && (
+                    <ColoursMenu
+                        brightness={brightness}
+                        contrast={contrast}
+                        saturation={saturation}
+                        blur={blur}
+                        invert={invert}
+                        setBrightness={setBrightness}
+                        setContrast={setContrast}
+                        setSaturation={setSaturation}
+                        setBlur={setBlur}
+                        setInvert={setInvert}
+                    />
+                )}
+                <MenuSectionTitle title={t("export_data")} />
+                <MenuItemGroup>
+                    <EnteMenuItem
+                        startIcon={<DownloadIcon />}
+                        onClick={downloadEditedPhoto}
+                        label={t("download_edited")}
+                        disabled={!transformationPerformed && !coloursAdjusted}
+                    />
+                    <MenuItemDivider />
+                    <EnteMenuItem
+                        startIcon={<CloudUploadIcon />}
+                        onClick={saveCopyToEnte}
+                        label={t("save_a_copy_to_ente")}
+                        disabled={!transformationPerformed && !coloursAdjusted}
+                    />
+                </MenuItemGroup>
+                {!transformationPerformed && !coloursAdjusted && (
+                    <MenuSectionTitle
+                        title={t("photo_edit_required_to_save")}
+                    />
+                )}
+            </SidebarDrawer>
+        </Backdrop>
     );
 };
 
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 37cd77020a..512e130468 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -183,7 +183,7 @@ const _colors = {
     },
     dark: {
         background: {
-            base: "#000000",
+            base: "#000",
             paper: "#1b1b1b",
             paper2: "#252525",
         },
@@ -205,7 +205,7 @@ const _colors = {
             faintHover: "rgba(255, 255, 255, 0.06)",
         },
         stroke: {
-            base: "#ffffff",
+            base: "#fff",
             muted: "rgba(255,255,255,0.24)",
             faint: "rgba(255,255,255,0.16)",
         },