Theme tweaks

This commit is contained in:
Reece Browne 2025-08-25 20:54:42 +01:00
parent 2c5354fa1d
commit 1a6e1fea2a
2 changed files with 29 additions and 24 deletions

View File

@ -132,12 +132,12 @@ const PageEditorControls = ({
{/* Undo/Redo */} {/* Undo/Redo */}
<Tooltip label="Undo"> <Tooltip label="Undo">
<ActionIcon onClick={onUndo} disabled={!canUndo} size="lg"> <ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" radius="md" size="lg">
<UndoIcon /> <UndoIcon />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip label="Redo"> <Tooltip label="Redo">
<ActionIcon onClick={onRedo} disabled={!canRedo} size="lg"> <ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" radius="md" size="lg">
<RedoIcon /> <RedoIcon />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
@ -149,8 +149,9 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={() => onRotate('left')} onClick={() => onRotate('left')}
disabled={selectionMode && selectedPages.length === 0} disabled={selectionMode && selectedPages.length === 0}
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"} variant="subtle"
color={selectionMode && selectedPages.length > 0 ? "blue" : undefined} style={{ color: 'var(--mantine-color-dimmed)' }}
radius="md"
size="lg" size="lg"
> >
<RotateLeftIcon /> <RotateLeftIcon />
@ -160,8 +161,9 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={() => onRotate('right')} onClick={() => onRotate('right')}
disabled={selectionMode && selectedPages.length === 0} disabled={selectionMode && selectedPages.length === 0}
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"} variant="subtle"
color={selectionMode && selectedPages.length > 0 ? "blue" : undefined} style={{ color: 'var(--mantine-color-dimmed)' }}
radius="md"
size="lg" size="lg"
> >
<RotateRightIcon /> <RotateRightIcon />
@ -172,9 +174,9 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={onDelete} onClick={onDelete}
disabled={selectedPages.length === 0} disabled={selectedPages.length === 0}
color="red" variant={selectedPages.length > 0 ? "light" : "subtle"}
variant={selectedPages.length > 0 ? "light" : "default"} radius="md"
size="lg" size="lg"
> >
<DeleteIcon /> <DeleteIcon />
</ActionIcon> </ActionIcon>
@ -184,8 +186,9 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={selectionMode ? onSplit : onSplitAll} onClick={selectionMode ? onSplit : onSplitAll}
disabled={selectionMode && selectedPages.length === 0} disabled={selectionMode && selectedPages.length === 0}
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"} variant="subtle"
color={selectionMode && selectedPages.length > 0 ? "blue" : undefined} style={{ color: 'var(--mantine-color-dimmed)' }}
radius="md"
size="lg" size="lg"
> >
<ContentCutIcon /> <ContentCutIcon />
@ -195,8 +198,9 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={selectionMode ? onPageBreak : onPageBreakAll} onClick={selectionMode ? onPageBreak : onPageBreakAll}
disabled={selectionMode && selectedPages.length === 0} disabled={selectionMode && selectedPages.length === 0}
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"} variant="subtle"
color={selectionMode && selectedPages.length > 0 ? "orange" : undefined} style={{ color: 'var(--mantine-color-dimmed)' }}
radius="md"
size="lg" size="lg"
> >
<InsertPageBreakIcon /> <InsertPageBreakIcon />
@ -209,9 +213,9 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={onExportSelected} onClick={onExportSelected}
disabled={exportLoading || selectedPages.length === 0} disabled={exportLoading || selectedPages.length === 0}
color="blue" variant={selectedPages.length > 0 ? "light" : "subtle"}
variant={selectedPages.length > 0 ? "light" : "default"} radius="md"
size="lg" size="lg"
> >
<DownloadIcon /> <DownloadIcon />
</ActionIcon> </ActionIcon>
@ -221,8 +225,8 @@ const PageEditorControls = ({
<ActionIcon <ActionIcon
onClick={onExportAll} onClick={onExportAll}
disabled={exportLoading} disabled={exportLoading}
color="green"
variant="light" variant="light"
radius="md"
size="lg" size="lg"
> >
<DownloadIcon /> <DownloadIcon />

View File

@ -379,8 +379,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
className={styles.pageNumber} className={styles.pageNumber}
size="sm" size="sm"
fw={500} fw={500}
c="white"
style={{ style={{
color: 'white', // Keep white for page numbers as they have colored backgrounds
position: 'absolute', position: 'absolute',
top: 5, top: 5,
left: 5, left: 5,
@ -402,7 +402,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
bottom: 8, bottom: 8,
left: '50%', left: '50%',
transform: 'translateX(-50%)', transform: 'translateX(-50%)',
background: 'rgba(0, 0, 0, 0.8)', backgroundColor: 'var(--mantine-color-default-hover)',
border: '1px solid rgba(128, 128, 128, 0.3)',
padding: '6px 12px', padding: '6px 12px',
borderRadius: 20, borderRadius: 20,
opacity: 0, opacity: 0,
@ -421,7 +422,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon <ActionIcon
size="md" size="md"
variant="subtle" variant="subtle"
c="white" style={{ color: 'var(--mantine-color-dimmed)' }}
disabled={index === 0} disabled={index === 0}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -444,7 +445,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon <ActionIcon
size="md" size="md"
variant="subtle" variant="subtle"
c="white" style={{ color: 'var(--mantine-color-dimmed)' }}
disabled={index === totalPages - 1} disabled={index === totalPages - 1}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -467,7 +468,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon <ActionIcon
size="md" size="md"
variant="subtle" variant="subtle"
c="white" style={{ color: 'var(--mantine-color-dimmed)' }}
onClick={handleRotateLeft} onClick={handleRotateLeft}
> >
<RotateLeftIcon style={{ fontSize: 20 }} /> <RotateLeftIcon style={{ fontSize: 20 }} />
@ -478,7 +479,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon <ActionIcon
size="md" size="md"
variant="subtle" variant="subtle"
c="white" style={{ color: 'var(--mantine-color-dimmed)' }}
onClick={handleRotateRight} onClick={handleRotateRight}
> >
<RotateRightIcon style={{ fontSize: 20 }} /> <RotateRightIcon style={{ fontSize: 20 }} />
@ -501,7 +502,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon <ActionIcon
size="md" size="md"
variant="subtle" variant="subtle"
c="white" style={{ color: 'var(--mantine-color-dimmed)' }}
onClick={handleSplit} onClick={handleSplit}
> >
<ContentCutIcon style={{ fontSize: 20 }} /> <ContentCutIcon style={{ fontSize: 20 }} />