Style updates

src/pages/homepage/components/Applications/AppItem.tsx

@@ -6,16 +6,33 @@ import { stackClasses, textClasses } from 'styles';
 
 function AppItem({ url, icon, name }: any) {
 	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [hover, setHover] = useState<boolean>(false);
 	const { isMobile } = useCommonHooks();
 
 	return (
 		<Box
 			component='a'
 			href={`https://${url}`}
-			onMouseOver={() => setTextDecoration('underline')}
-			onMouseOut={() => setTextDecoration('none')}
+			onMouseOver={() => {
+				setTextDecoration('underline');
+				setHover(true);
+			}}
+			onMouseOut={() => {
+				setTextDecoration('none');
+				setHover(false);
+			}}
 			className={stackClasses.appItemBox}
 		>
+			{hover && (
+				<svg
+					style={{ position: 'absolute', borderRadius: '6px' }}
+					height='100%'
+					width='100%'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
+				</svg>
+			)}
 			<Stack
 				align={isMobile ? 'center' : undefined}
 				justify={isMobile ? 'center' : undefined}

src/pages/homepage/components/Bookmarks/LinkItem.tsx

@@ -9,6 +9,7 @@ function LinkItem({ link }: any) {
 			component='a'
 			href={link.url}
 			style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+			w={'min-content'}
 		>
 			{link.name}
 		</Text>

src/pages/settings/components/Themes.tsx

@@ -127,6 +127,7 @@ function ThemesSettings() {
 							borderRadius: '10px',
 							marginTop: '-15px',
 							marginBottom: '-10px',
+							boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
 						}}
 						pos={'absolute'}
 					/>

src/styles/Stack.module.css

@@ -18,13 +18,36 @@
 	flex-wrap: wrap;
 	height: 64px;
 	margin: 0;
-	backdrop-filter: blur(10px) brightness(1.5);
+	backdrop-filter: blur(10px) brightness(1.2);
 	border-radius: 6px;
 	font-size: 1em;
 	font-weight: 400;
 	text-transform: uppercase;
 }
 
+  
+.appItemBox rect {
+	border-radius: 6px;
+	stroke-dasharray: 260;
+	stroke-width: 10px;
+	fill: transparent;
+	stroke: var(--color-search-background);
+	animation: svgAnimation 1.5s linear infinite;
+}
+
+.appItemBox rect::after {
+	filter: blur(10px);
+}
+
+@keyframes svgAnimation {
+	from {
+	  stroke-dashoffset: 0;
+	}
+	to {
+	  stroke-dashoffset: 1000;
+	}
+}
+
 .settingsContainer {
 	align-items: stretch;
 	display: grid;