Added BorderAnimate

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",

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",

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';

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,12 +48,23 @@ 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}
+		>
+			<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)'}
 			>
 				{enabled === 0 && (
 					<Tooltip
@@ -73,22 +85,6 @@ export function AppItem({
 						</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={{
@@ -116,7 +112,11 @@ export function AppItem({
 							gap: 0,
 						}}
 					>
-					<Text fz={scale * 11} className={textClasses.appName} classNames={textClasses}>
+						<Text
+							fz={scale * 11}
+							className={textClasses.appName}
+							classNames={textClasses}
+						>
 							{name}
 						</Text>
 						<Text
@@ -131,6 +131,7 @@ export function AppItem({
 						</Text>
 					</Stack>
 				)}
+			</BorderAnimate>
 		</Box>
 	);
 }

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,

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]);

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);