Added BorderAnimate

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

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,