saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-22 19:46:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make crop UI blue

Browse Source
This commit is contained in:
James Brunton 2025-09-19 16:12:03 +01:00
parent 3af2e47bda
commit 163422407e
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/tools/crop/CropAreaSelector.tsx
View File

@ -1,5 +1,5 @@
import React, { useRef, useState, useCallback, useEffect } from 'react'; import React, { useRef, useState, useCallback, useEffect } from 'react';
import { Box } from '@mantine/core'; import { Box, useMantineTheme, MantineTheme } from '@mantine/core';
import { import {
PDFBounds, PDFBounds,
CropArea, CropArea,
@ -32,6 +32,7 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
disabled = false, disabled = false,
children children
}) => { }) => {
const theme = useMantineTheme();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const overlayRef = useRef<HTMLDivElement>(null); const overlayRef = useRef<HTMLDivElement>(null);
@ -170,15 +171,15 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
top: domRect.y, top: domRect.y,
width: domRect.width, width: domRect.width,
height: domRect.height, height: domRect.height,
border: '2px solid #ff4757', border: `2px solid ${theme.other.crop.overlayBorder}`,
backgroundColor: 'rgba(255, 71, 87, 0.1)', backgroundColor: theme.other.crop.overlayBackground,
cursor: 'move', cursor: 'move',
pointerEvents: 'auto' pointerEvents: 'auto'
}} }}
onMouseDown={handleOverlayMouseDown} onMouseDown={handleOverlayMouseDown}
> >
{/* Resize Handles */} {/* Resize Handles */}
{renderResizeHandles(disabled)} {renderResizeHandles(disabled, theme)}
</Box> </Box>
)} )}
</Box> </Box>
@ -267,7 +268,7 @@ function calculateResizedRect(
return { x, y, width, height }; return { x, y, width, height };
} }
function renderResizeHandles(disabled: boolean) { function renderResizeHandles(disabled: boolean, theme: MantineTheme) {
if (disabled) return null; if (disabled) return null;
const handleSize = 8; const handleSize = 8;
@ -275,8 +276,8 @@ function renderResizeHandles(disabled: boolean) {
position: 'absolute' as const, position: 'absolute' as const,
width: handleSize, width: handleSize,
height: handleSize, height: handleSize,
backgroundColor: '#ff4757', backgroundColor: theme.other.crop.handleColor,
border: '1px solid white', border: `1px solid ${theme.other.crop.handleBorder}`,
borderRadius: '2px', borderRadius: '2px',
pointerEvents: 'auto' as const pointerEvents: 'auto' as const
}; };

10
frontend/src/theme/mantineTheme.ts
View File

@ -64,6 +64,16 @@ export const mantineTheme = createTheme({
xl: 'var(--shadow-xl)', xl: 'var(--shadow-xl)',
}, },
// Custom variables for specific components
other: {
crop: {
overlayBorder: 'var(--color-primary-500)',
overlayBackground: 'rgba(59, 130, 246, 0.1)', // Blue with 10% opacity
handleColor: 'var(--color-primary-500)',
handleBorder: 'var(--bg-surface)',
},
},
// Component customizations // Component customizations
components: { components: {
Button: { Button: {