fix more arg renames

2025-08-07 04:12:11 +00:00 · 2024-04-15 12:09:19 +02:00
parent e43befc2cc
commit 3e5a31d6bc
21 changed files with 79 additions and 82 deletions
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -358,8 +358,8 @@ export function DetailsImage(props: DetailImageProps) {
        <>
          <ApiImage
            src={img}
-            height={IMAGE_DIMENSION}
-            width={IMAGE_DIMENSION}
+            h={IMAGE_DIMENSION}
+            w={IMAGE_DIMENSION}
            onClick={expandImage}
          />
          {permissions.hasChangeRole(props.appRole) &&
--- a/src/frontend/src/components/forms/HostOptionsForm.tsx
+++ b/src/frontend/src/components/forms/HostOptionsForm.tsx
@@ -62,15 +62,15 @@ export function HostOptionsForm({
      <Box sx={{ maxWidth: 500 }} mx="auto">
        {fields.length > 0 ? (
          <Group mb="xs">
-            <Text weight={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" sx={{ flex: 1 }}>
              <Trans>Host</Trans>
            </Text>
-            <Text weight={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" sx={{ flex: 1 }}>
              <Trans>Name</Trans>
            </Text>
          </Group>
        ) : (
-          <Text c="dimmed" align="center">
+          <Text c="dimmed" ta="center">
            <Trans>No one here...</Trans>
          </Text>
        )}
--- a/src/frontend/src/components/forms/InstanceOptions.tsx
+++ b/src/frontend/src/components/forms/InstanceOptions.tsx
@@ -15,7 +15,7 @@ export function InstanceOptions({
  setHostEdit
 }: {
  hostKey: string;
-  ChangeHost: (newHost: string) => void;
+  ChangeHost: (newHost: string | null) => void;
  setHostEdit: () => void;
 }) {
  const [HostListEdit, setHostListEdit] = useToggle([false, true] as const);
--- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx
+++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Input, useMantineTheme } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useColorScheme, useDebouncedValue } from '@mantine/hooks';
 import { useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -12,6 +12,7 @@ import {
 import Select from 'react-select';

 import { api } from '../../../App';
+import { vars } from '../../../theme';
 import { RenderInstance } from '../../render/Instance';
 import { ApiFormFieldType } from './ApiFormField';

@@ -218,29 +219,32 @@ export function RelatedModelField({
  // Define color theme to pass to field based on Mantine theme
  const theme = useMantineTheme();

+  const colorschema = vars.colors.primaryColors;
+  const [preferredColorScheme] = useColorScheme();
+
  const colors = useMemo(() => {
    let colors: any;
-    if (theme.colorScheme === 'dark') {
+    if (preferredColorScheme === 'dark') {
      colors = {
-        neutral0: theme.colors[theme.colorScheme][6],
-        neutral5: theme.colors[theme.colorScheme][4],
-        neutral10: theme.colors[theme.colorScheme][4],
-        neutral20: theme.colors[theme.colorScheme][4],
-        neutral30: theme.colors[theme.colorScheme][3],
-        neutral40: theme.colors[theme.colorScheme][2],
-        neutral50: theme.colors[theme.colorScheme][1],
-        neutral60: theme.colors[theme.colorScheme][0],
-        neutral70: theme.colors[theme.colorScheme][0],
-        neutral80: theme.colors[theme.colorScheme][0],
-        neutral90: theme.colors[theme.colorScheme][0],
-        primary: theme.colors[theme.primaryColor][7],
-        primary25: theme.colors[theme.primaryColor][6],
-        primary50: theme.colors[theme.primaryColor][5],
-        primary75: theme.colors[theme.primaryColor][4]
+        neutral0: colorschema[6],
+        neutral5: colorschema[4],
+        neutral10: colorschema[4],
+        neutral20: colorschema[4],
+        neutral30: colorschema[3],
+        neutral40: colorschema[2],
+        neutral50: colorschema[1],
+        neutral60: colorschema[0],
+        neutral70: colorschema[0],
+        neutral80: colorschema[0],
+        neutral90: colorschema[0],
+        primary: vars.colors.primaryColors[7],
+        primary25: vars.colors.primaryColors[6],
+        primary50: vars.colors.primaryColors[5],
+        primary75: vars.colors.primaryColors[4]
      };
    } else {
      colors = {
-        neutral0: theme.white,
+        neutral0: vars.colors.white,
        neutral5: theme.fn.darken(theme.white, 0.05),
        neutral10: theme.fn.darken(theme.white, 0.1),
        neutral20: theme.fn.darken(theme.white, 0.2),
@@ -251,10 +255,10 @@ export function RelatedModelField({
        neutral70: theme.fn.darken(theme.white, 0.7),
        neutral80: theme.fn.darken(theme.white, 0.8),
        neutral90: theme.fn.darken(theme.white, 0.9),
-        primary: theme.colors[theme.primaryColor][7],
-        primary25: theme.colors[theme.primaryColor][4],
-        primary50: theme.colors[theme.primaryColor][5],
-        primary75: theme.colors[theme.primaryColor][6]
+        primary: vars.colors.primaryColors[7],
+        primary25: vars.colors.primaryColors[4],
+        primary50: vars.colors.primaryColors[5],
+        primary75: vars.colors.primaryColors[6]
      };
    }
    return colors;
--- a/src/frontend/src/components/images/ApiImage.tsx
+++ b/src/frontend/src/components/images/ApiImage.tsx
@@ -67,10 +67,7 @@ export function ApiImage(props: ImageProps) {
      {image && image.length > 0 ? (
        <Image {...props} src={image} withPlaceholder fit="contain" />
      ) : (
-        <Skeleton
-          height={props?.height ?? props.width}
-          width={props?.width ?? props.height}
-        />
+        <Skeleton h={props?.h ?? props.w} w={props?.w ?? props.h} />
      )}
    </Stack>
  );
--- a/src/frontend/src/components/items/DashboardItem.tsx
+++ b/src/frontend/src/components/items/DashboardItem.tsx
@@ -18,7 +18,7 @@ export function StatisticItem({
 }) {
  return (
    <Paper withBorder p="xs" key={id} pos="relative">
-      <LoadingOverlay visible={isLoading} overlayBlur={2} />
+      <LoadingOverlay visible={isLoading} overlayProps={{ blur: 2 }} />
      <Group justify="apart">
        <Text size="xs" color="dimmed" className={classes.dashboardItemTitle}>
          {data.title}
--- a/src/frontend/src/components/items/LanguageToggle.tsx
+++ b/src/frontend/src/components/items/LanguageToggle.tsx
@@ -9,7 +9,7 @@ export function LanguageToggle() {

  return (
    <Group
-      position="center"
+      justify="center"
      style={{
        border: open === true ? `1px dashed ` : ``,
        margin: open === true ? 2 : 12,
--- a/src/frontend/src/components/items/Placeholder.tsx
+++ b/src/frontend/src/components/items/Placeholder.tsx
@@ -9,7 +9,7 @@ export function PlaceholderPill() {
  return (
    <Tooltip
      multiline
-      width={220}
+      w={220}
      withArrow
      label={t`This feature/button/site is a placeholder for a feature that is not implemented, only partial or intended for testing.`}
    >
--- a/src/frontend/src/components/items/ProgressBar.tsx
+++ b/src/frontend/src/components/items/ProgressBar.tsx
@@ -24,7 +24,7 @@ export function ProgressBar(props: ProgressBarProps) {
  return (
    <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
      {props.progressLabel && (
-        <Text align="center" size="xs">
+        <Text ta="center" size="xs">
          {props.value} / {props.maximum}
        </Text>
      )}
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -23,7 +23,7 @@ export function MainMenu() {
      <Menu.Target>
        <UnstyledButton className={classes.layoutHeaderUser}>
          <Group gap={7}>
-            <Text weight={500} size="sm" sx={{ lineHeight: 1 }} mr={3}>
+            <Text fw={500} size="sm" sx={{ lineHeight: 1 }} mr={3}>
              {userState.username() ? (
                userState.username()
              ) : (
--- a/src/frontend/src/components/nav/PageDetail.tsx
+++ b/src/frontend/src/components/nav/PageDetail.tsx
@@ -46,7 +46,7 @@ export function PageDetail({
          <Group justify="apart" wrap="nowrap">
            <Group justify="left" wrap="nowrap">
              {imageUrl && (
-                <ApiImage src={imageUrl} radius="sm" height={64} width={64} />
+                <ApiImage src={imageUrl} radius="sm" h={64} w={64} />
              )}
              <Stack gap="xs">
                {title && <StylishText size="lg">{title}</StylishText>}
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/src/frontend/src/components/nav/PanelGroup.tsx
@@ -72,7 +72,7 @@ function BasePanelGroup({
  }, [setLastUsedPanel]);

  // Callback when the active panel changes
-  function handlePanelChange(panel: string) {
+  function handlePanelChange(panel: string | null) {
    if (activePanels.findIndex((p) => p.name === panel) === -1) {
      setLastUsedPanel('');
      return navigate('../');
@@ -81,7 +81,7 @@ function BasePanelGroup({
    navigate(`../${panel}`);

    // Optionally call external callback hook
-    if (onPanelChange) {
+    if (panel && onPanelChange) {
      onPanelChange(panel);
    }
  }
@@ -111,7 +111,7 @@ function BasePanelGroup({
        onChange={handlePanelChange}
        keepMounted={false}
      >
-        <Tabs.List position="left">
+        <Tabs.List justify="left">
          {panels.map(
            (panel) =>
              !panel.hidden && (
--- a/src/frontend/src/components/nav/PartCategoryTree.tsx
+++ b/src/frontend/src/components/nav/PartCategoryTree.tsx
@@ -1,12 +1,6 @@
 import { t } from '@lingui/macro';
-import {
-  Drawer,
-  Group,
-  LoadingOverlay,
-  Stack,
-  Text,
-  useMantineTheme
-} from '@mantine/core';
+import { Drawer, Group, LoadingOverlay, Stack, Text } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
 import {
  IconChevronDown,
@@ -20,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
+import { theme, vars } from '../../theme';
 import { StylishText } from '../items/StylishText';

 export function PartCategoryTree({
@@ -80,57 +75,57 @@ export function PartCategoryTree({
    return open ? <IconChevronDown /> : <IconChevronRight />;
  }

-  const mantineTheme = useMantineTheme();
+  const [prefferedColorScheme] = useColorScheme();

  const themes: ThemeSettings = useMemo(() => {
    const currentTheme =
-      mantineTheme.colorScheme === 'dark'
-        ? mantineTheme.colorScheme
-        : mantineTheme.primaryColor;
+      prefferedColorScheme === 'dark'
+        ? vars.colors.defaultColor
+        : vars.colors.primaryColors;

    return {
      dark: {
        text: {
-          ...mantineTheme.fn.fontStyles()
+          ...vars.fontStyles()
        },
        nodes: {
          height: '2.5rem',
          folder: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][6]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[6]
          },
          leaf: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][6]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[6]
          },
          icons: {
-            folderColor: mantineTheme.colors[currentTheme][3],
-            leafColor: mantineTheme.colors[currentTheme][3]
+            folderColor: currentTheme[3],
+            leafColor: currentTheme[3]
          }
        }
      },
      light: {
        text: {
-          ...mantineTheme.fn.fontStyles()
+          ...theme.fn.fontStyles()
        },
        nodes: {
          height: '2.5rem',
          folder: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][2]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[2]
          },
          leaf: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][2]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[2]
          },
          icons: {
-            folderColor: mantineTheme.colors[currentTheme][8],
-            leafColor: mantineTheme.colors[currentTheme][6]
+            folderColor: currentTheme[8],
+            leafColor: currentTheme[6]
          }
        }
      }
    };
-  }, [mantineTheme]);
+  }, [theme]);

  return (
    <Drawer
@@ -162,7 +157,7 @@ export function PartCategoryTree({
          RenderIcon={renderIcon}
          defaultSelectedNodes={selectedCategory ? [selectedCategory] : []}
          showEmptyItems={false}
-          theme={mantineTheme.colorScheme}
+          theme={theme.colorScheme}
          themes={themes}
        />
      </Stack>
--- a/src/frontend/src/components/nav/StockLocationTree.tsx
+++ b/src/frontend/src/components/nav/StockLocationTree.tsx
@@ -51,7 +51,7 @@ export function StockLocationTree({
  function renderNode({ node }: { node: any }) {
    return (
      <Group
-        position="apart"
+        justify="apart"
        key={node.id}
        wrap="nowrap"
        onClick={() => {
--- a/src/frontend/src/components/settings/SettingItem.tsx
+++ b/src/frontend/src/components/settings/SettingItem.tsx
@@ -6,9 +6,9 @@ import {
  Space,
  Stack,
  Switch,
-  Text,
-  useMantineTheme
+  Text
 } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit } from '@tabler/icons-react';
 import { useMemo } from 'react';
@@ -19,6 +19,7 @@ import { openModalApiForm } from '../../functions/forms';
 import { apiUrl } from '../../states/ApiState';
 import { SettingsStateProps } from '../../states/SettingsState';
 import { Setting, SettingType } from '../../states/states';
+import { vars } from '../../theme';
 import { ApiFormFieldType } from '../forms/fields/ApiFormField';

 /**
@@ -165,14 +166,14 @@ export function SettingItem({
  shaded: boolean;
  onChange?: () => void;
 }) {
-  const theme = useMantineTheme();
+  const [prefferedColorScheme] = useColorScheme();

  const style: Record<string, string> = { paddingLeft: '8px' };
  if (shaded) {
    style['backgroundColor'] =
-      theme.colorScheme === 'light'
-        ? theme.colors.gray[1]
-        : theme.colors.gray[9];
+      prefferedColorScheme === 'light'
+        ? vars.colors.gray[1]
+        : vars.colors.gray[9];
  }

  return (
--- a/src/frontend/src/components/widgets/FeedbackWidget.tsx
+++ b/src/frontend/src/components/widgets/FeedbackWidget.tsx
@@ -26,7 +26,7 @@ export default function FeedbackWidget() {
        component="a"
        href="https://github.com/inventree/InvenTree/discussions/5328"
        variant="outline"
-        leftIcon={<IconExternalLink size="0.9rem" />}
+        leftSection={<IconExternalLink size="0.9rem" />}
      >
        <Trans>Provide Feedback</Trans>
      </Button>
--- a/src/frontend/src/pages/Auth/Login.tsx
+++ b/src/frontend/src/pages/Auth/Login.tsx
@@ -70,7 +70,7 @@ export default function Login() {
        ) : (
          <>
            <Paper radius="md" p="xl" withBorder>
-              <Text size="lg" weight={500}>
+              <Text size="lg" fw={500}>
                {loginMode ? (
                  <Trans>Welcome, log in below</Trans>
                ) : (
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
@@ -168,7 +168,7 @@ function EmailContent({}: {}) {
          <TextInput
            label={t`E-Mail`}
            placeholder={t`E-Mail address`}
-            icon={<IconAt />}
+            leftSection={<IconAt />}
            value={newEmailValue}
            onChange={(event) => setNewEmailValue(event.currentTarget.value)}
          />
--- a/src/frontend/src/tables/Search.tsx
+++ b/src/frontend/src/tables/Search.tsx
@@ -19,7 +19,7 @@ export function TableSearchInput({
  return (
    <TextInput
      value={value}
-      icon={<IconSearch />}
+      leftSection={<IconSearch />}
      placeholder={t`Search`}
      onChange={(event) => setValue(event.target.value)}
      rightSection={
--- a/src/frontend/src/tables/TableHoverCard.tsx
+++ b/src/frontend/src/tables/TableHoverCard.tsx
@@ -38,7 +38,7 @@ export function TableHoverCard({
        <Stack gap="xs">
          <Group gap="xs" justify="left">
            <IconInfoCircle size="16" color="blue" />
-            <Text weight="bold">{title}</Text>
+            <Text fw="bold">{title}</Text>
          </Group>
          <Divider />
          {extra}
--- a/src/frontend/src/tables/part/PartTestTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
@@ -37,7 +37,7 @@ export default function PartTestTemplateTable({ partId }: { partId: number }) {
        render: (record: any) => {
          return (
            <Text
-              weight={record.required && 700}
+              fw={record.required && 700}
              c={record.enabled ? undefined : 'red'}
            >
              {record.test_name}