Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 3 commits into from
Dec 22, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1fc18e7
fix: editor image full screen modal
aaryan610 Dec 22, 2025
feac646
Merge branch 'preview' of https://github.com/makeplane/plane into fix…
JayashTripathy Dec 22, 2025
c592890
fix: format imports in confirm-workspace-member-remove component
JayashTripathy Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
27 changes: 15 additions & 12 deletions packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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}
Expand All @@ -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">
Copy link
Copy Markdown

@cursor cursor bot Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Border color becomes theme-dependent on hardcoded dark background

The border and divider colors are changed from border-white/20 and divide-white/20 to border-subtle-1 and divide-subtle-1. However, the modal uses a hardcoded bg-black background regardless of theme. The subtle-1 tokens are theme-dependent semantic colors that resolve to light gray in light mode but dark gray in dark mode. This causes the toolbar borders to be much less visible in dark mode since dark gray on black provides poor contrast. The original white/20 was theme-independent and worked consistently. Other color changes in this PR correctly use theme-independent alpha-white-* tokens for this dark modal context.

Fix in Cursor Fix in Web

<div className="flex items-center">
<button
type="button"
Expand All @@ -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) => {
Expand All @@ -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"
>
Expand All @@ -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" />
Expand All @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
Expand Down
Loading