From ef7cdfda2085c69dd75932042fcae09d72f56ef6 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Fri, 7 Mar 2025 16:53:12 -0600
Subject: [PATCH] Style updates

---
 .../components/Applications/AppItem.tsx       | 21 ++++++++++++++--
 .../components/Bookmarks/LinkItem.tsx         |  1 +
 src/pages/settings/components/ThemeCard.tsx   |  2 +-
 src/pages/settings/components/Themes.tsx      |  1 +
 src/styles/Stack.module.css                   | 25 ++++++++++++++++++-
 5 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/pages/homepage/components/Applications/AppItem.tsx b/src/pages/homepage/components/Applications/AppItem.tsx
index 8244533..50f5b9f 100644
--- a/src/pages/homepage/components/Applications/AppItem.tsx
+++ b/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}
diff --git a/src/pages/homepage/components/Bookmarks/LinkItem.tsx b/src/pages/homepage/components/Bookmarks/LinkItem.tsx
index 4a66f55..bec9160 100644
--- a/src/pages/homepage/components/Bookmarks/LinkItem.tsx
+++ b/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>
diff --git a/src/pages/settings/components/ThemeCard.tsx b/src/pages/settings/components/ThemeCard.tsx
index 212084c..353c957 100644
--- a/src/pages/settings/components/ThemeCard.tsx
+++ b/src/pages/settings/components/ThemeCard.tsx
@@ -183,7 +183,7 @@ function ThemeCard({
 							}}
 						/>
 					</Group>
-						<Group
+					<Group
 						onMouseEnter={() => {
 							setShiftShuffle(2);
 						}}
diff --git a/src/pages/settings/components/Themes.tsx b/src/pages/settings/components/Themes.tsx
index d2823af..ebf906c 100644
--- a/src/pages/settings/components/Themes.tsx
+++ b/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'}
 					/>
diff --git a/src/styles/Stack.module.css b/src/styles/Stack.module.css
index 6912859..dea270b 100644
--- a/src/styles/Stack.module.css
+++ b/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;