arsvendg/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/arsvendg/Stirling-PDF.git synced 2026-07-16 19:33:11 +02:00
Code Issues Actions 3 Packages Projects Releases 1 Wiki Activity

Chore/remove usage of mantine color scheme (#6108)

Browse Source 
Remove instances of `colorScheme === "dark" ?` in the app and rely on
the theme.css' light and dark variables instead.
This commit is contained in:
EthanHealy01
2026-04-17 14:29:37 +01:00
committed by GitHub
parent a7a5bb2057
commit bad92a9eae
18 changed files with 218 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/core/components/fileEditor/AddFileCard.tsx
+4 -6
View File
@@ -1,10 +1,10 @@
import React, { useRef, useState } from "react";
import { Button, Group, useMantineColorScheme } from "@mantine/core";
import { Button, Group } from "@mantine/core";
import { useTranslation } from "react-i18next";
import AddIcon from "@mui/icons-material/Add";
import { useFilesModalContext } from "@app/contexts/FilesModalContext";
import LocalIcon from "@app/components/shared/LocalIcon";
import { useLogoAssets } from "@app/hooks/useLogoAssets";
import { Wordmark } from "@app/components/shared/Wordmark";
import styles from "@app/components/fileEditor/FileEditor.module.css";
import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
@@ -24,9 +24,7 @@ const AddFileCard = ({
const { t } = useTranslation();
const fileInputRef = useRef<HTMLInputElement>(null);
const { openFilesModal } = useFilesModalContext();
const { colorScheme } = useMantineColorScheme();
const [isUploadHover, setIsUploadHover] = useState(false);
const { wordmark } = useLogoAssets();
const terminology = useFileActionTerminology();
const icons = useFileActionIcons();
@@ -98,9 +96,9 @@ const AddFileCard = ({
<div className={styles.addFileContent}>
{/* Stirling PDF Branding */}
<Group gap="xs" align="center">
<img
src={colorScheme === "dark" ? wordmark.white : wordmark.grey}
<Wordmark
alt="Stirling PDF"
muted
style={{ height: "2.2rem", width: "auto" }}
/>
</Group>
frontend/src/core/components/fileManager/EmptyFilesState.tsx
+4 -12
View File
@@ -1,25 +1,17 @@
import React, { useState } from "react";
import {
Button,
Group,
Text,
Stack,
useMantineColorScheme,
} from "@mantine/core";
import { Button, Group, Text, Stack } from "@mantine/core";
import HistoryIcon from "@mui/icons-material/History";
import { useTranslation } from "react-i18next";
import { useFileManagerContext } from "@app/contexts/FileManagerContext";
import LocalIcon from "@app/components/shared/LocalIcon";
import { useLogoAssets } from "@app/hooks/useLogoAssets";
import { Wordmark } from "@app/components/shared/Wordmark";
import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
const EmptyFilesState: React.FC = () => {
const { t } = useTranslation();
const { colorScheme } = useMantineColorScheme();
const { onLocalFileClick } = useFileManagerContext();
const [isUploadHover, setIsUploadHover] = useState(false);
const { wordmark } = useLogoAssets();
const terminology = useFileActionTerminology();
const icons = useFileActionIcons();
@@ -65,9 +57,9 @@ const EmptyFilesState: React.FC = () => {
{/* Stirling PDF Logo */}
<Group gap="xs" align="center">
<img
src={colorScheme === "dark" ? wordmark.white : wordmark.grey}
<Wordmark
alt="Stirling PDF"
muted
style={{ height: "2.2rem", width: "auto" }}
/>
</Group>
frontend/src/core/components/shared/LogoIcon.tsx
+14
View File
@@ -0,0 +1,14 @@
import React from "react";
import { useMantineColorScheme } from "@mantine/core";
import { useLogoPath } from "@app/hooks/useLogoPath";
interface LogoIconProps extends React.ImgHTMLAttributes<HTMLImageElement> {
alt?: string;
}
export function LogoIcon({ alt = "", ...props }: LogoIconProps) {
const { colorScheme } = useMantineColorScheme();
const logoPaths = useLogoPath();
const src = colorScheme === "dark" ? logoPaths.dark : logoPaths.light;
return <img src={src} alt={alt} {...props} />;
}
frontend/src/core/components/shared/TextInput.tsx
+4 -7
View File
@@ -1,5 +1,4 @@
import React, { forwardRef } from "react";
import { useMantineColorScheme } from "@mantine/core";
import LocalIcon from "@app/components/shared/LocalIcon";
import styles from "@app/components/shared/textInput/TextInput.module.css";
@@ -61,8 +60,6 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
},
ref,
) => {
const { colorScheme } = useMantineColorScheme();
const handleClear = () => {
if (onClear) {
onClear();
@@ -79,7 +76,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
{icon && (
<span
className={styles.icon}
style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
style={{ color: "var(--search-text-and-icon-color)" }}
>
{icon}
</span>
@@ -99,8 +96,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
aria-label={ariaLabel}
onFocus={onFocus}
style={{
backgroundColor: colorScheme === "dark" ? "#4B525A" : "#FFFFFF",
color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382",
backgroundColor: "var(--input-bg)",
color: "var(--search-text-and-icon-color)",
paddingRight: shouldShowClearButton ? "40px" : "12px",
paddingLeft: icon ? "40px" : "12px",
}}
@@ -111,7 +108,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
type="button"
className={styles.clearButton}
onClick={handleClear}
style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
style={{ color: "var(--search-text-and-icon-color)" }}
aria-label="Clear input"
>
<LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
frontend/src/core/components/shared/Wordmark.tsx
+20
View File
@@ -0,0 +1,20 @@
import React from "react";
import { useMantineColorScheme } from "@mantine/core";
import { useLogoAssets } from "@app/hooks/useLogoAssets";
interface WordmarkProps extends React.ImgHTMLAttributes<HTMLImageElement> {
alt?: string;
muted?: boolean;
}
export function Wordmark({ alt = "", muted = false, ...props }: WordmarkProps) {
const { colorScheme } = useMantineColorScheme();
const isDark = colorScheme === "dark";
const { wordmark } = useLogoAssets();
// light: black text (standard) or grey text (muted)
// dark: white text for both variants
const src = isDark ? wordmark.white : muted ? wordmark.grey : wordmark.black;
return <img src={src} alt={alt} {...props} />;
}
frontend/src/core/components/tools/FullscreenToolSurface.tsx
+5 -19
View File
@@ -1,10 +1,5 @@
import { useState, useRef } from "react";
import {
ActionIcon,
ScrollArea,
Switch,
useMantineColorScheme,
} from "@mantine/core";
import { ActionIcon, ScrollArea, Switch } from "@mantine/core";
import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
import { useTranslation } from "react-i18next";
import ToolSearch from "@app/components/tools/toolPicker/ToolSearch";
@@ -12,8 +7,8 @@ import FullscreenToolList from "@app/components/tools/FullscreenToolList";
import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
import { ToolId } from "@app/types/toolId";
import { useFocusTrap } from "@app/hooks/useFocusTrap";
import { useLogoPath } from "@app/hooks/useLogoPath";
import { useLogoAssets } from "@app/hooks/useLogoAssets";
import { LogoIcon } from "@app/components/shared/LogoIcon";
import { Wordmark } from "@app/components/shared/Wordmark";
import { Tooltip } from "@app/components/shared/Tooltip";
import "@app/components/tools/ToolPanel.css";
import { ToolPanelGeometry } from "@app/hooks/tools/useToolPanelGeometry";
@@ -52,7 +47,6 @@ const FullscreenToolSurface = ({
geometry,
}: FullscreenToolSurfaceProps) => {
const { t } = useTranslation();
const { colorScheme } = useMantineColorScheme();
const [isExiting, setIsExiting] = useState(false);
const surfaceRef = useRef<HTMLDivElement>(null);
const isRTL =
@@ -62,9 +56,6 @@ const FullscreenToolSurface = ({
useFocusTrap(surfaceRef, !isExiting);
const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
const brandIconSrc = useLogoPath();
const { wordmark } = useLogoAssets();
const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
const handleExit = () => {
const prefersReducedMotion = window.matchMedia(
@@ -118,13 +109,8 @@ const FullscreenToolSurface = ({
>
<header className="tool-panel__fullscreen-header">
<div className="tool-panel__fullscreen-brand">
<img
src={brandIconSrc}
alt=""
className="tool-panel__fullscreen-brand-icon"
/>
<img
src={brandTextSrc}
<LogoIcon className="tool-panel__fullscreen-brand-icon" />
<Wordmark
alt={brandAltText}
className="tool-panel__fullscreen-brand-text"
/>
frontend/src/core/components/tools/convert/ConvertSettings.tsx
+3 -14
View File
@@ -6,7 +6,6 @@ import {
Divider,
UnstyledButton,
useMantineTheme,
useMantineColorScheme,
} from "@mantine/core";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { useTranslation } from "react-i18next";
@@ -64,7 +63,6 @@ const ConvertSettings = ({
}: ConvertSettingsProps) => {
const { t } = useTranslation();
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme();
const { setSelectedFiles } = useFileSelection();
const { state, selectors } = useFileState();
const activeFiles = state.files.ids;
@@ -339,14 +337,8 @@ const ConvertSettings = ({
padding: "0.5rem 0.75rem",
border: `0.0625rem solid ${theme.colors.gray[4]}`,
borderRadius: theme.radius.sm,
backgroundColor:
colorScheme === "dark"
? theme.colors.dark[5]
: theme.colors.gray[1],
color:
colorScheme === "dark"
? theme.colors.dark[2]
: theme.colors.gray[6],
backgroundColor: "var(--select-placeholder-bg)",
color: "var(--select-placeholder-text)",
cursor: "not-allowed",
}}
>
@@ -360,10 +352,7 @@ const ConvertSettings = ({
<KeyboardArrowDownIcon
style={{
fontSize: "1rem",
color:
colorScheme === "dark"
? theme.colors.dark[2]
: theme.colors.gray[6],
color: "var(--select-placeholder-text)",
}}
/>
</Group>
frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
+7 -19
View File
@@ -8,7 +8,6 @@ import {
Popover,
UnstyledButton,
useMantineTheme,
useMantineColorScheme,
} from "@mantine/core";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import CloudOutlinedIcon from "@mui/icons-material/CloudOutlined";
@@ -47,7 +46,6 @@ const GroupedFormatDropdown = ({
}: GroupedFormatDropdownProps) => {
const [dropdownOpened, setDropdownOpened] = useState(false);
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme();
const groupedOptions = useMemo(() => {
const groups: Record<string, FormatOption[]> = {};
@@ -100,18 +98,12 @@ const GroupedFormatDropdown = ({
borderRadius: theme.radius.sm,
backgroundColor: disabled
? theme.colors.gray[1]
: colorScheme === "dark"
? theme.colors.dark[6]
: theme.white,
: "var(--dropdown-trigger-bg)",
cursor: disabled ? "not-allowed" : "pointer",
width: "100%",
color: disabled
? colorScheme === "dark"
? theme.colors.dark[1]
: theme.colors.dark[7]
: colorScheme === "dark"
? theme.colors.dark[0]
: theme.colors.dark[9],
? "var(--dropdown-trigger-text-disabled)"
: "var(--dropdown-trigger-text)",
}}
>
<Group justify="space-between">
@@ -123,10 +115,7 @@ const GroupedFormatDropdown = ({
fontSize: "1rem",
transform: dropdownOpened ? "rotate(180deg)" : "rotate(0deg)",
transition: "transform 0.2s ease",
color:
colorScheme === "dark"
? theme.colors.dark[2]
: theme.colors.gray[6],
color: "var(--dropdown-trigger-icon)",
}}
/>
</Group>
@@ -138,9 +127,8 @@ const GroupedFormatDropdown = ({
maxWidth: "90vw",
maxHeight: "40vh",
overflow: "auto",
backgroundColor:
colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
border: `0.0625rem solid ${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
backgroundColor: "var(--dropdown-panel-bg)",
border: `0.0625rem solid var(--dropdown-panel-border)`,
}}
>
<Stack gap="md">
@@ -149,8 +137,8 @@ const GroupedFormatDropdown = ({
<Text
size="sm"
fw={600}
c={colorScheme === "dark" ? "dark.2" : "gray.6"}
mb="xs"
style={{ color: "var(--dropdown-group-label)" }}
>
{groupName}
</Text>