[WEB-5773] fix: editor image full screen modal (#8413)

Author: aaryan610

apps/web/core/components/workspace/confirm-workspace-member-remove.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react"; import { observer } from "mobx-react";
+import { useState } from "react";
+import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
 // ui
 import { useTranslation } from "@plane/i18n";

packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx

@@ -34,7 +34,7 @@ export function ImageAlignmentAction(props: Props) {
       <Tooltip disabled={isTouchDevice} tooltipContent="Align">
         <button
           type="button"
-          className="h-full flex items-center gap-1 text-on-color/60 hover:text-on-color transition-colors"
+          className="h-full flex items-center gap-1 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
@@ -47,7 +47,7 @@ export function ImageAlignmentAction(props: Props) {
             <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
               <button
                 type="button"
-                className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
+                className="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
                 onClick={() => {
                   handleChange(option.value);
                   setIsDropdownOpen(false);

packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx

@@ -14,7 +14,7 @@ export function ImageDownloadAction(props: Props) {
       <button
         type="button"
         onClick={() => window.open(src, "_blank")}
-        className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
+        className="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
         aria-label="Download image"
       >
         <Download className="size-3" />

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx

@@ -193,11 +193,14 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
 
   return (
     <div
-      className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
-        "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
-        "cursor-default": !isDragging,
-        "cursor-grabbing": isDragging,
-      })}
+      className={cn(
+        "fixed inset-0 size-full z-50 bg-alpha-black-1100 opacity-0 pointer-events-none transition-opacity",
+        {
+          "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
+          "cursor-default": !isDragging,
+          "cursor-grabbing": isDragging,
+        }
+      )}
       role="dialog"
       aria-modal="true"
       aria-label="Fullscreen image viewer"
@@ -213,7 +216,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           className="absolute top-10 right-10 size-8 grid place-items-center"
           aria-label="Close image viewer"
         >
-          <CloseIcon className="size-8 text-on-color/60 hover:text-on-color transition-colors" />
+          <CloseIcon className="size-8 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors" />
         </button>
         <img
           ref={setImageRef}
@@ -231,7 +234,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           }}
           onMouseDown={handleMouseDown}
         />
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
+        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
           <div className="flex items-center">
             <button
               type="button"
@@ -242,13 +245,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("decrease");
               }}
-              className="size-6 grid place-items-center text-on-color/60 hover:text-on-color disabled:text-on-color/30 transition-colors duration-200"
+              className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
               disabled={magnification <= MIN_ZOOM}
               aria-label="Zoom out"
             >
               <Minus className="size-4" />
             </button>
-            <span className="text-13 w-12 text-center text-on-color">{Math.round(100 * magnification)}%</span>
+            <span className="text-13 w-12 text-center text-alpha-white-1200">{Math.round(100 * magnification)}%</span>
             <button
               type="button"
               onClick={(e) => {
@@ -258,7 +261,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("increase");
               }}
-              className="size-6 grid place-items-center text-on-color/60 hover:text-on-color disabled:text-on-color/30 transition-colors duration-200"
+              className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
             >
@@ -269,7 +272,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(downloadSrc, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-on-color/60 hover:text-on-color transition-colors duration-200"
+              className="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
               aria-label="Download image"
             >
               <Download className="size-4" />
@@ -279,7 +282,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(src, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-on-color/60 hover:text-on-color transition-colors duration-200"
+              className="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
               aria-label="Open image in new tab"
             >
               <ExternalLink className="size-4" />

packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx

@@ -31,7 +31,7 @@ export function ImageToolbarRoot(props: Props) {
     <>
       <div
         className={cn(
-          "absolute top-1 right-1 h-7 z-20 bg-black/80 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
+          "absolute top-1 right-1 h-7 z-20 bg-alpha-black-1000 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
           {
             "opacity-100 pointer-events-auto": shouldShowToolbar,
           }