From edeed6b6745ab2cd24ba94d2eaff8f91d5e57c3a Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Tue, 14 Jul 2026 20:39:05 -0500 Subject: [PATCH] Added BorderAnimate --- package-lock.json | 42 ++++++ package.json | 1 + src/App.tsx | 1 + src/components/Applications/AppItem.tsx | 141 +++++++++--------- .../WeatherModal/CurrentWeather.tsx | 9 +- .../ThemeModal/components/ThemeEditor.tsx | 2 +- .../components/Theming/Themes/Themes.tsx | 22 +-- 7 files changed, 133 insertions(+), 85 deletions(-) diff --git a/package-lock.json b/package-lock.json index 426de64..77c8797 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "triggerfrontend", "version": "1.2.0", "dependencies": { + "@gfazioli/mantine-border-animate": "^2.0.8", "@gfazioli/mantine-text-animate": "^4.0.7", "@hello-pangea/dnd": "^18.0.1", "@mantine/core": "^9.4.1", @@ -185,6 +186,19 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz", "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==" }, + "node_modules/@gfazioli/mantine-border-animate": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@gfazioli/mantine-border-animate/-/mantine-border-animate-2.0.8.tgz", + "integrity": "sha512-kt4qzpN7YRIB6OeYoi050L4ndQ4nlGaa2BnF2USsjPpsTyWXaAJZg/7AJ8a+yq3aNHRP3QuNX2P1qfkHYnqz/g==", + "license": "MIT", + "peerDependencies": { + "@mantine/core": ">=9.0.0", + "@mantine/hooks": ">=9.0.0", + "@tabler/icons-react": "^3.34.0", + "react": "^18.x || ^19.x", + "react-dom": "^18.x || ^19.x" + } + }, "node_modules/@gfazioli/mantine-text-animate": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/@gfazioli/mantine-text-animate/-/mantine-text-animate-4.0.7.tgz", @@ -688,6 +702,34 @@ "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz", "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==" }, + "node_modules/@tabler/icons": { + "version": "3.44.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.44.0.tgz", + "integrity": "sha512-Wn0AOZG9sg0L+bjfMqq4eNhC6pQjIrk94LvvWYNYkY8KH8wC3YILRzQlrnVJc4FUeMxH/AK97QsYCX35H3LndA==", + "license": "MIT", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "3.44.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.44.0.tgz", + "integrity": "sha512-8+rvzBbVm/1Z3sG3x7GUNAaxIKxwgz8xaMhRs23nrCnMTKRFAhEC+82zAIFeAA0seXdrAGX5HFCkaLpGK2rVHg==", + "license": "MIT", + "peer": true, + "dependencies": { + "@tabler/icons": "3.44.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@tanstack/query-core": { "version": "5.101.2", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.2.tgz", diff --git a/package.json b/package.json index e8da8d7..fcc6bcf 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@gfazioli/mantine-border-animate": "^2.0.8", "@gfazioli/mantine-text-animate": "^4.0.7", "@hello-pangea/dnd": "^18.0.1", "@mantine/core": "^9.4.1", diff --git a/src/App.tsx b/src/App.tsx index 690ff66..7e4f9f6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,7 @@ import '@mantine/core/styles.css'; import '@mantine/dates/styles.css'; import '@mantine/notifications/styles.css'; import 'react-fontpicker-ts/dist/index.css'; +import '@gfazioli/mantine-border-animate/styles.css'; import '@gfazioli/mantine-text-animate/styles.css'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; diff --git a/src/components/Applications/AppItem.tsx b/src/components/Applications/AppItem.tsx index 81f23f2..7cdc10a 100644 --- a/src/components/Applications/AppItem.tsx +++ b/src/components/Applications/AppItem.tsx @@ -1,3 +1,4 @@ +import { BorderAnimate } from '@gfazioli/mantine-border-animate'; import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core'; import { useElementSize } from '@mantine/hooks'; import { useCommonHooks } from 'hooks'; @@ -47,90 +48,90 @@ export function AppItem({ setTextDecoration('none'); setHover(false); }} - className={boxClasses.appItemBox} h={scale * 64} - ref={ref} + className={boxClasses.appItemBox} style={{ justifyContent: width / height < 2 ? 'center' : undefined, }} + ref={ref} > - {enabled === 0 && ( - - - - - - )} - {hover && ( - - - - )} - - {Icon && ( - + {enabled === 0 && ( + + + + + )} - - {width / height > 2 && ( - - {name} - - + )} + + {width / height > 2 && ( + - {url} - - - )} + + {name} + + + {url} + + + )} + ); } diff --git a/src/components/WeatherModal/CurrentWeather.tsx b/src/components/WeatherModal/CurrentWeather.tsx index 3058100..ffcd519 100644 --- a/src/components/WeatherModal/CurrentWeather.tsx +++ b/src/components/WeatherModal/CurrentWeather.tsx @@ -156,14 +156,15 @@ export default function CurrentWeather({ backgroundColor: 'var(--mantine-color-background-0)', border: 'thin solid var(--mantine-color-primary-0)', zIndex: 1, - padding: '2.25rem', + paddingLeft: '2.25rem', + paddingRight: '2.25rem', borderRadius: '100%', aspectRatio: 1, }} align='center' justify='center' > - + Feels like } rightSide={ @@ -176,7 +177,7 @@ export default function CurrentWeather({ highlight='right' /> - + t.backgroundImage), ), ] as string[]; + + const { + currentTheme, + currentUser, + setCurrentTheme, + theme, + isMobile, + currentThemePlaylist, + setCurrentThemePlaylist, + } = useCommonHooks(); + const [selectedTheme, setSelectedTheme] = useState({ id: undefined, name: 'default', @@ -73,20 +84,11 @@ export function Themes() { randomEnabled: 1, textShadowsEnabled: 0, appShadowsEnabled: 0, - themeFont: null, + themeFont: currentUser.defaultFont, }); - const [isLoading, setIsLoading] = useState(false); const [isNew, setIsNew] = useState(false); const navigate = useNavigate(); - const { - currentTheme, - setCurrentTheme, - theme, - isMobile, - currentThemePlaylist, - setCurrentThemePlaylist, - } = useCommonHooks(); const handleNewTheme = () => { setIsNew(true);