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

View File

@ -379,8 +379,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
className={styles.pageNumber}
size="sm"
fw={500}
c="white"
style={{
color: 'white', // Keep white for page numbers as they have colored backgrounds
position: 'absolute',
top: 5,
left: 5,
@ -402,7 +402,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
bottom: 8,
left: '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',
borderRadius: 20,
opacity: 0,
@ -421,7 +422,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon
size="md"
variant="subtle"
c="white"
style={{ color: 'var(--mantine-color-dimmed)' }}
disabled={index === 0}
onClick={(e) => {
e.stopPropagation();
@ -444,7 +445,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon
size="md"
variant="subtle"
c="white"
style={{ color: 'var(--mantine-color-dimmed)' }}
disabled={index === totalPages - 1}
onClick={(e) => {
e.stopPropagation();
@ -467,7 +468,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon
size="md"
variant="subtle"
c="white"
style={{ color: 'var(--mantine-color-dimmed)' }}
onClick={handleRotateLeft}
>
<RotateLeftIcon style={{ fontSize: 20 }} />
@ -478,7 +479,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon
size="md"
variant="subtle"
c="white"
style={{ color: 'var(--mantine-color-dimmed)' }}
onClick={handleRotateRight}
>
<RotateRightIcon style={{ fontSize: 20 }} />
@ -501,7 +502,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
<ActionIcon
size="md"
variant="subtle"
c="white"
style={{ color: 'var(--mantine-color-dimmed)' }}
onClick={handleSplit}
>
<ContentCutIcon style={{ fontSize: 20 }} />