diff --git a/frontend/src/features/canvas/components/IAICanvasGrid.tsx b/frontend/src/features/canvas/components/IAICanvasGrid.tsx index 0b09b38868..7495f0ee7d 100644 --- a/frontend/src/features/canvas/components/IAICanvasGrid.tsx +++ b/frontend/src/features/canvas/components/IAICanvasGrid.tsx @@ -21,6 +21,12 @@ const selector = createSelector( } ); +const gridLinesColor = { + dark: 'rgba(255, 255, 255, 0.2)', + green: 'rgba(255, 255, 255, 0.2)', + light: 'rgba(0, 0, 0, 0.2)', +}; + const IAICanvasGrid = () => { const { colorMode } = useColorMode(); const { stageScale, stageCoordinates, stageDimensions } = @@ -35,8 +41,7 @@ const IAICanvasGrid = () => { ); useLayoutEffect(() => { - const gridLineColor = - colorMode === 'light' ? 'rgba(136, 136, 136, 1)' : 'rgba(84, 84, 84, 1)'; + const gridLineColor = gridLinesColor[colorMode]; const { width, height } = stageDimensions; const { x, y } = stageCoordinates; diff --git a/frontend/src/features/gallery/components/HoverableImage.tsx b/frontend/src/features/gallery/components/HoverableImage.tsx index a93965ace0..5748b51aab 100644 --- a/frontend/src/features/gallery/components/HoverableImage.tsx +++ b/frontend/src/features/gallery/components/HoverableImage.tsx @@ -167,6 +167,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { className="hoverable-image" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} + userSelect={'none'} > { onMouseOver={ !shouldPinOptionsPanel ? cancelCloseOptionsPanelTimer : undefined } + style={{ + borderRight: !shouldPinOptionsPanel + ? '0.3rem solid var(--tab-list-text-inactive)' + : '', + }} >