Added BorderAnimate

2026-07-14 20:39:05 -05:00
parent ae90af6fce
commit edeed6b674
7 changed files with 133 additions and 85 deletions
--- 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",
--- 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",
--- 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';
--- 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 && (
-				<Tooltip
-					className={toolTipClasses.default}
-					classNames={toolTipClasses}
-					label='This app is disabled.'
-				>
-					<ActionIcon
-						className={actionIconClasses.settingsTooltip}
-						classNames={actionIconClasses}
-						pos={'absolute'}
-						right={0}
-						size={'xl'}
-						variant='subtle'
-						style={{ zIndex: 1 }}
-					>
-						<FiAlertCircle color='red' />
-					</ActionIcon>
-				</Tooltip>
-			)}
-			{hover && (
-				<svg
-					style={{ position: 'absolute', borderRadius: '6px' }}
-					height='100%'
-					width='100%'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<rect
-						rx={(scale * 64) / 8}
-						ry={(scale * 64) / 8}
-						height='100%'
-						width='100%'
-						strokeLinejoin='round'
-					/>
-				</svg>
-			)}
-			<Stack
-				justify={isMobile ? 'center' : undefined}
-				style={{
-					marginRight: scale * 16,
-					marginLeft: scale * 16,
-					paddingTop: isMobile ? scale : scale * 16,
-				}}
+			<BorderAnimate
+				show={hover}
+				h={height}
+				w={width}
+				duration={1.5}
+				borderWidth={scale * 3}
+				borderOpacity={0.75}
+				size={scale * 128}
+				colorFrom={'var(--mantine-color-primary-0)'}
+				colorTo={'var(--mantine-color-accent-0)'}
 			>
-				{Icon && (
-					<Icon
-						style={{
-							height: scale * 32,
-							width: scale * 32,
-							filter: iconFilter(selectedTheme),
-						}}
-					/>
+				{enabled === 0 && (
+					<Tooltip
+						className={toolTipClasses.default}
+						classNames={toolTipClasses}
+						label='This app is disabled.'
+					>
+						<ActionIcon
+							className={actionIconClasses.settingsTooltip}
+							classNames={actionIconClasses}
+							pos={'absolute'}
+							right={0}
+							size={'xl'}
+							variant='subtle'
+							style={{ zIndex: 1 }}
+						>
+							<FiAlertCircle color='red' />
+						</ActionIcon>
+					</Tooltip>
 				)}
-			</Stack>
-			{width / height > 2 && (
 				<Stack
-					justify='center'
+					justify={isMobile ? 'center' : undefined}
 					style={{
-						overflow: 'hidden',
-						whiteSpace: 'nowrap',
-						gap: 0,
+						marginRight: scale * 16,
+						marginLeft: scale * 16,
+						paddingTop: isMobile ? scale : scale * 16,
 					}}
 				>
-					<Text fz={scale * 11} className={textClasses.appName} classNames={textClasses}>
-						{name}
-					</Text>
-					<Text
-						fz={scale * 11}
-						className={textClasses.appUrl}
-						classNames={textClasses}
+					{Icon && (
+						<Icon
+							style={{
+								height: scale * 32,
+								width: scale * 32,
+								filter: iconFilter(selectedTheme),
+							}}
+						/>
+					)}
+				</Stack>
+				{width / height > 2 && (
+					<Stack
+						justify='center'
 						style={{
-							textDecoration: textDecoration,
+							overflow: 'hidden',
+							whiteSpace: 'nowrap',
+							gap: 0,
 						}}
 					>
-						{url}
-					</Text>
-				</Stack>
-			)}
+						<Text
+							fz={scale * 11}
+							className={textClasses.appName}
+							classNames={textClasses}
+						>
+							{name}
+						</Text>
+						<Text
+							fz={scale * 11}
+							className={textClasses.appUrl}
+							classNames={textClasses}
+							style={{
+								textDecoration: textDecoration,
+							}}
+						>
+							{url}
+						</Text>
+					</Stack>
+				)}
+			</BorderAnimate>
 		</Box>
 	);
 }
--- 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'
 							>
-								<Box m={0} p={0} mb={'-.5rem'}>
+								<Box m={0} p={0}>
 									<WeatherFeaturePill
 										leftSide={<Text>Feels like </Text>}
 										rightSide={
@@ -176,7 +177,7 @@ export default function CurrentWeather({
 										highlight='right'
 									/>
 								</Box>
-								<Group pos={'relative'} m={0}>
+								<Group pos={'relative'}>
 									<Text
 										fz={isMobile ? '5rem' : '7rem'}
 										fw={400}
@@ -192,7 +193,7 @@ export default function CurrentWeather({
 												'color-mix(in srgb, var(--mantine-color-accent-0), transparent 80%)',
 											height: '250%',
 											width: '80%',
-											bottom: -72,
+											bottom: -96,
 											right: -60,
 											transform: 'skewX(-25deg)',
 											zIndex: -1,
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
@@ -80,7 +80,7 @@ export function ThemeEditor({
 		} else if (font && !customFontEnabled) {
 			setDesignerTheme({
 				...designerTheme,
-				themeFont: currentUser.defaultFont,
+				themeFont: currentUser.defaultFont || 'Jost',
 			});
 		}
 	}, [font]);
--- a/src/pages/settings/components/Theming/Themes/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes/Themes.tsx
@@ -61,6 +61,17 @@ export function Themes() {
 				.map((t) => t.backgroundImage),
 		),
 	] as string[];
+
+	const {
+		currentTheme,
+		currentUser,
+		setCurrentTheme,
+		theme,
+		isMobile,
+		currentThemePlaylist,
+		setCurrentThemePlaylist,
+	} = useCommonHooks();
+
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
 		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);