From 8f3dac7f166e734b244c15b75a3e078ffe98261c Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Mon, 15 Apr 2024 01:51:42 +0200 Subject: [PATCH] fix imports --- .../src/components/buttons/SplitButton.css.ts | 19 +++++++++ .../src/components/buttons/SplitButton.tsx | 19 +-------- .../src/components/items/DashboardItem.tsx | 4 +- .../src/components/items/DocTooltip.tsx | 4 +- .../items/GettingStartedCarousel.css.ts | 32 +++++++++++++++ .../items/GettingStartedCarousel.tsx | 41 +------------------ .../src/components/items/MenuLinks.tsx | 3 +- .../src/components/items/StylishText.tsx | 3 +- .../src/components/nav/DetailDrawer.css.ts | 9 ++++ .../src/components/nav/DetailDrawer.tsx | 12 +----- src/frontend/src/components/nav/Footer.tsx | 3 +- src/frontend/src/components/nav/Header.tsx | 4 +- src/frontend/src/components/nav/Layout.tsx | 3 +- src/frontend/src/components/nav/MainMenu.tsx | 4 +- .../src/components/nav/NavHoverMenu.tsx | 4 +- .../src/components/nav/NavigationDrawer.tsx | 5 +-- .../components/widgets/WidgetLayout.css.ts | 18 ++++++++ .../src/components/widgets/WidgetLayout.tsx | 26 ++---------- src/frontend/src/main.css.ts | 33 ++++++++++----- src/frontend/src/main.tsx | 1 + .../AccountSettings/UserThemePanel.tsx | 4 +- 21 files changed, 122 insertions(+), 129 deletions(-) create mode 100644 src/frontend/src/components/buttons/SplitButton.css.ts create mode 100644 src/frontend/src/components/items/GettingStartedCarousel.css.ts create mode 100644 src/frontend/src/components/nav/DetailDrawer.css.ts create mode 100644 src/frontend/src/components/widgets/WidgetLayout.css.ts diff --git a/src/frontend/src/components/buttons/SplitButton.css.ts b/src/frontend/src/components/buttons/SplitButton.css.ts new file mode 100644 index 0000000000..05e353b08e --- /dev/null +++ b/src/frontend/src/components/buttons/SplitButton.css.ts @@ -0,0 +1,19 @@ +import { rem } from '@mantine/core'; +import { style } from '@vanilla-extract/css'; + +import { vars } from '../../theme'; + +export const button = style({ + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + '&::before': { + borderRadius: '0 !important' + } +}); + +export const icon = style({ + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + border: 0, + borderLeft: `1px solid ${vars.colors.primaryShade}` +}); diff --git a/src/frontend/src/components/buttons/SplitButton.tsx b/src/frontend/src/components/buttons/SplitButton.tsx index a156e28f3b..ed2d2e92ba 100644 --- a/src/frontend/src/components/buttons/SplitButton.tsx +++ b/src/frontend/src/components/buttons/SplitButton.tsx @@ -5,13 +5,13 @@ import { Menu, Text, Tooltip, - createStyles, useMantineTheme } from '@mantine/core'; import { IconChevronDown } from '@tabler/icons-react'; import { useEffect, useMemo, useState } from 'react'; import { TablerIconType } from '../../functions/icons'; +import * as classes from './SplitButton.css'; interface SplitButtonOption { key: string; @@ -30,22 +30,6 @@ interface SplitButtonProps { loading?: boolean; } -const useStyles = createStyles((theme) => ({ - button: { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - '&::before': { - borderRadius: '0 !important' - } - }, - icon: { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - border: 0, - borderLeft: `1px solid ${theme.primaryShade}` - } -})); - export function SplitButton({ options, defaultSelected, @@ -54,7 +38,6 @@ export function SplitButton({ loading }: SplitButtonProps) { const [current, setCurrent] = useState(defaultSelected); - const { classes } = useStyles(); useEffect(() => { setSelected?.(current); diff --git a/src/frontend/src/components/items/DashboardItem.tsx b/src/frontend/src/components/items/DashboardItem.tsx index 49b9b6bf46..7353e50054 100644 --- a/src/frontend/src/components/items/DashboardItem.tsx +++ b/src/frontend/src/components/items/DashboardItem.tsx @@ -1,6 +1,6 @@ import { Group, LoadingOverlay, Paper, Text } from '@mantine/core'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; export interface StatisticItemProps { title: string; @@ -16,8 +16,6 @@ export function StatisticItem({ data: StatisticItemProps; isLoading: boolean; }) { - const { classes } = InvenTreeStyle(); - return ( diff --git a/src/frontend/src/components/items/DocTooltip.tsx b/src/frontend/src/components/items/DocTooltip.tsx index 80b0d5660d..ce2b6dc4ec 100644 --- a/src/frontend/src/components/items/DocTooltip.tsx +++ b/src/frontend/src/components/items/DocTooltip.tsx @@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'; import { Anchor, Container, HoverCard, ScrollArea, Text } from '@mantine/core'; import { useEffect, useRef, useState } from 'react'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; export interface BaseDocProps { text: string | JSX.Element; @@ -22,8 +22,6 @@ export function DocTooltip({ link, docchildren }: DocTooltipProps) { - const { classes } = InvenTreeStyle(); - return ( ({ - card: { - height: rem(170), - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - alignItems: 'flex-start', - backgroundSize: 'cover', - backgroundPosition: 'center' - }, - - title: { - fontWeight: 900, - color: - theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.dark, - lineHeight: 1.2, - fontSize: rem(32), - marginTop: 0 - }, - - category: { - color: - theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.dark, - opacity: 0.7, - fontWeight: 700 - } -})); - function StartedCard({ title, description, link, placeholder }: DocumentationLinkItem) { - const { classes } = useStyles(); - return (
diff --git a/src/frontend/src/components/items/MenuLinks.tsx b/src/frontend/src/components/items/MenuLinks.tsx index e9e9b10772..6fa02598aa 100644 --- a/src/frontend/src/components/items/MenuLinks.tsx +++ b/src/frontend/src/components/items/MenuLinks.tsx @@ -2,7 +2,7 @@ import { SimpleGrid, Text, UnstyledButton } from '@mantine/core'; import React from 'react'; import { Link } from 'react-router-dom'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { DocTooltip } from './DocTooltip'; export interface MenuLinkItem { @@ -50,7 +50,6 @@ export function MenuLinks({ links: MenuLinkItem[]; highlighted?: boolean; }) { - const { classes } = InvenTreeStyle(); highlighted = highlighted || false; const filteredLinks = links.filter( diff --git a/src/frontend/src/components/items/StylishText.tsx b/src/frontend/src/components/items/StylishText.tsx index 877fa7a680..774a6fdde9 100644 --- a/src/frontend/src/components/items/StylishText.tsx +++ b/src/frontend/src/components/items/StylishText.tsx @@ -1,6 +1,6 @@ import { Text } from '@mantine/core'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; export function StylishText({ children, @@ -9,7 +9,6 @@ export function StylishText({ children: JSX.Element | string; size?: string; }) { - const { classes } = InvenTreeStyle(); return ( {children} diff --git a/src/frontend/src/components/nav/DetailDrawer.css.ts b/src/frontend/src/components/nav/DetailDrawer.css.ts new file mode 100644 index 0000000000..6c0a644756 --- /dev/null +++ b/src/frontend/src/components/nav/DetailDrawer.css.ts @@ -0,0 +1,9 @@ +import { rem } from '@mantine/core'; +import { style } from '@vanilla-extract/css'; + +import { vars } from '../../theme'; + +export const flex = style({ + display: 'flex', + flex: 1 +}); diff --git a/src/frontend/src/components/nav/DetailDrawer.tsx b/src/frontend/src/components/nav/DetailDrawer.tsx index 91f7b3e734..8bad111b28 100644 --- a/src/frontend/src/components/nav/DetailDrawer.tsx +++ b/src/frontend/src/components/nav/DetailDrawer.tsx @@ -5,8 +5,7 @@ import { Group, MantineNumberSize, Stack, - Text, - createStyles + Text } from '@mantine/core'; import { IconChevronLeft } from '@tabler/icons-react'; import { useCallback, useMemo } from 'react'; @@ -14,6 +13,7 @@ import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom'; import type { To } from 'react-router-dom'; import { useLocalState } from '../../states/LocalState'; +import * as classes from './DetailDrawer.css'; /** * @param title - drawer title @@ -30,13 +30,6 @@ export interface DrawerProps { closeOnEscape?: boolean; } -const useStyles = createStyles(() => ({ - flex: { - display: 'flex', - flex: 1 - } -})); - function DetailDrawerComponent({ title, position = 'right', @@ -46,7 +39,6 @@ function DetailDrawerComponent({ }: DrawerProps) { const navigate = useNavigate(); const { id } = useParams(); - const { classes } = useStyles(); const content = renderContent(id); const opened = useMemo(() => !!id && !!content, [id, content]); diff --git a/src/frontend/src/components/nav/Footer.tsx b/src/frontend/src/components/nav/Footer.tsx index 52ad114912..588df249f1 100644 --- a/src/frontend/src/components/nav/Footer.tsx +++ b/src/frontend/src/components/nav/Footer.tsx @@ -1,11 +1,10 @@ import { Anchor, Container, Group } from '@mantine/core'; import { footerLinks } from '../../defaults/links'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { InvenTreeLogoHomeButton } from '../items/InvenTreeLogo'; export function Footer() { - const { classes } = InvenTreeStyle(); const items = footerLinks.map((link) => ( color="dimmed" diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx index 1c344c1d82..4fe956968c 100644 --- a/src/frontend/src/components/nav/Header.tsx +++ b/src/frontend/src/components/nav/Header.tsx @@ -8,7 +8,7 @@ import { useMatch, useNavigate, useParams } from 'react-router-dom'; import { api } from '../../App'; import { navTabs as mainNavTabs } from '../../defaults/links'; import { ApiEndpoints } from '../../enums/ApiEndpoints'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { apiUrl } from '../../states/ApiState'; import { useLocalState } from '../../states/LocalState'; import { ScanButton } from '../buttons/ScanButton'; @@ -20,7 +20,6 @@ import { NotificationDrawer } from './NotificationDrawer'; import { SearchDrawer } from './SearchDrawer'; export function Header() { - const { classes } = InvenTreeStyle(); const [setNavigationOpen, navigationOpen] = useLocalState((state) => [ state.setNavigationOpen, state.navigationOpen @@ -120,7 +119,6 @@ export function Header() { } function NavTabs() { - const { classes } = InvenTreeStyle(); const navigate = useNavigate(); const match = useMatch(':tabName/*'); const tabValue = match?.params.tabName; diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx index 91a6cd00c6..3a2243dde1 100644 --- a/src/frontend/src/components/nav/Layout.tsx +++ b/src/frontend/src/components/nav/Layout.tsx @@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'; import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom'; import { getActions } from '../../defaults/actions'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { useSessionState } from '../../states/SessionState'; import { Footer } from './Footer'; import { Header } from './Header'; @@ -26,7 +26,6 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => { }; export default function LayoutComponent() { - const { classes } = InvenTreeStyle(); const navigate = useNavigate(); const location = useLocation(); diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx index e98934e56a..0be47dd110 100644 --- a/src/frontend/src/components/nav/MainMenu.tsx +++ b/src/frontend/src/components/nav/MainMenu.tsx @@ -10,12 +10,12 @@ import { import { Link, useNavigate } from 'react-router-dom'; import { doLogout } from '../../functions/auth'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { useUserState } from '../../states/UserState'; +import { theme } from '../../theme'; export function MainMenu() { const navigate = useNavigate(); - const { classes, theme } = InvenTreeStyle(); const userState = useUserState(); return ( diff --git a/src/frontend/src/components/nav/NavHoverMenu.tsx b/src/frontend/src/components/nav/NavHoverMenu.tsx index 499f3c493e..a932c26f7e 100644 --- a/src/frontend/src/components/nav/NavHoverMenu.tsx +++ b/src/frontend/src/components/nav/NavHoverMenu.tsx @@ -14,9 +14,10 @@ import { IconLayoutSidebar } from '@tabler/icons-react'; import { useEffect, useState } from 'react'; import { menuItems } from '../../defaults/menuItems'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { useServerApiState } from '../../states/ApiState'; import { useLocalState } from '../../states/LocalState'; +import { theme } from '../../theme'; import { InvenTreeLogo } from '../items/InvenTreeLogo'; import { MenuLinks } from '../items/MenuLinks'; @@ -27,7 +28,6 @@ export function NavHoverMenu({ }: { openDrawer: () => void; }) { - const { classes, theme } = InvenTreeStyle(); const [hostKey, hostList] = useLocalState((state) => [ state.hostKey, state.hostList diff --git a/src/frontend/src/components/nav/NavigationDrawer.tsx b/src/frontend/src/components/nav/NavigationDrawer.tsx index c68eacf100..92504c39c4 100644 --- a/src/frontend/src/components/nav/NavigationDrawer.tsx +++ b/src/frontend/src/components/nav/NavigationDrawer.tsx @@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react'; import { aboutLinks, navDocLinks } from '../../defaults/links'; import { menuItems } from '../../defaults/menuItems'; -import { InvenTreeStyle } from '../../globalStyle'; +import * as classes from '../../main.css'; import { DocumentationLinks } from '../items/DocumentationLinks'; import { MenuLinkItem, MenuLinks } from '../items/MenuLinks'; @@ -27,8 +27,6 @@ export function NavigationDrawer({ opened: boolean; close: () => void; }) { - const { classes } = InvenTreeStyle(); - return ( ({ - backgroundItem: { - backgroundColor: - theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white, - maxWidth: '100%', - padding: '8px', - boxShadow: theme.shadows.md - }, - - baseItem: { - maxWidth: '100%', - padding: '8px' - } -})); - export interface LayoutItemType { i: number; val: string | JSX.Element | JSX.Element[] | (() => JSX.Element); @@ -65,7 +46,6 @@ export function WidgetLayout({ const [layouts, setLayouts] = useState({}); const [editable, setEditable] = useDisclosure(false); const [boxShown, setBoxShown] = useDisclosure(true); - const { classes } = useItemStyle(); useEffect(() => { let layout = getFromLS('layouts') || []; diff --git a/src/frontend/src/main.css.ts b/src/frontend/src/main.css.ts index 85f8474439..bc1879fb2b 100644 --- a/src/frontend/src/main.css.ts +++ b/src/frontend/src/main.css.ts @@ -5,10 +5,11 @@ import { vars } from './theme'; export const layoutHeader = style({ paddingTop: vars.spacing.sm, - backgroundColor: - theme.colorScheme === 'dark' ? vars.colors.dark[6] : vars.colors.gray[0], + backgroundColor: vars.colors.gray[0], + //theme.colorScheme === 'dark' ? vars.colors.dark[6] : vars.colors.gray[0], borderBottom: `1px solid ${ - theme.colorScheme === 'dark' ? 'transparent' : vars.colors.gray[2] + //theme.colorScheme === 'dark' ? 'transparent' : vars.colors.gray[2] + vars.colors.gray[2] }`, marginBottom: 10 }); @@ -16,7 +17,8 @@ export const layoutHeader = style({ export const layoutFooter = style({ marginTop: 10, borderTop: `1px solid ${ - theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[2] + //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[2] + vars.colors.gray[2] }` }); @@ -25,7 +27,9 @@ export const layoutHeaderSection = style({ }); export const layoutHeaderUser = style({ - color: theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black, + color: + //theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black, + vars.colors.black, padding: `${vars.spacing.xs}px ${vars.spacing.sm}px`, borderRadius: vars.defaultRadius, transition: 'background-color 100ms ease', @@ -37,13 +41,15 @@ export const layoutHeaderUser = style({ export const headerDropdownFooter = style({ backgroundColor: - theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.colors.gray[0], + //theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.colors.gray[0], + vars.colors.gray[0], margin: `calc(${vars.spacing.md} * -1)`, marginTop: vars.spacing.sm, padding: `${vars.spacing.md} calc(${vars.spacing.md} * 2)`, paddingBottom: vars.spacing.xl, borderTop: `${rem(1)} solid ${ - theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1] + //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1] + vars.colors.gray[1] }` }); @@ -54,7 +60,9 @@ export const link = style({ paddingLeft: vars.spacing.md, paddingRight: vars.spacing.md, textDecoration: 'none', - color: light - dark(vars.white, vars.black), + color: + //theme.colorScheme === 'dark' ? vars.white: vars.black, + vars.colors.black, fontWeight: 500, fontSize: vars.fontSizes.sm, @@ -139,7 +147,8 @@ export const tab = style({ '&:hover': { backgroundColor: - theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1] + //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1] + vars.colors.gray[1] } }); @@ -165,12 +174,14 @@ export const dashboardItemTitle = style({ export const card = style({ backgroundColor: - theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.white + //theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.white + vars.colors.white }); export const itemTopBorder = style({ borderTop: `1px solid ${ - theme.colorScheme === 'dark' ? vars.colors.dark[4] : vars.colors.gray[2] + //theme.colorScheme === 'dark' ? vars.colors.dark[4] : vars.colors.gray[2] + vars.colors.gray[2] }` }); diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx index 6af6a0b39d..a3a6760ae2 100644 --- a/src/frontend/src/main.tsx +++ b/src/frontend/src/main.tsx @@ -1,3 +1,4 @@ +import '@mantine/core/styles.css'; import * as Sentry from '@sentry/react'; import React from 'react'; import ReactDOM from 'react-dom/client'; diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx index e6c62d1698..2a0ac3d85f 100644 --- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx +++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx @@ -15,8 +15,8 @@ import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme'; import { useState } from 'react'; import { SizeMarks } from '../../../../defaults/defaults'; -import { InvenTreeStyle } from '../../../../globalStyle'; import { useLocalState } from '../../../../states/LocalState'; +import { theme } from '../../../../theme'; function getLkp(color: string) { return { [DEFAULT_THEME.colors[color][6]]: color }; @@ -27,8 +27,6 @@ const LOOKUP = Object.assign( ); export function UserTheme({ height }: { height: number }) { - const { theme } = InvenTreeStyle(); - // primary color function changePrimary(color: string) { useLocalState.setState({ primaryColor: LOOKUP[color] });