feat(web): add magic gradient color variable to globals.css

web/src/app/globals.css

@@ -183,6 +183,8 @@
 	--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
 		hsl(0 0% 0% / 0.1);
 	--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+	--magic-gradient-color: oklch(0.67 0.2 23.8 / 15%);
 }
 
 .dark {
@@ -233,6 +235,8 @@
 	--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
 		hsl(0 0% 0% / 0.1);
 	--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+	--magic-gradient-color: oklch(0.27 0 0);
 }
 
 @layer base {

web/src/app/icons/components/icon-search.tsx

@@ -78,7 +78,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 			// Then filter by search query
 			if (query.trim()) {
 				// Normalization function: lowercase, remove spaces and hyphens
-				const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, '')
+				const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, "")
 				const normalizedQuery = normalizeString(query)
 
 				filtered = filtered.filter(({ name, data }) => {
@@ -158,8 +158,6 @@ export function IconSearch({ icons }: IconSearchProps) {
 		[pathname, router, initialSort],
 	)
 
-	
-
 	const handleSearch = useCallback(
 		(query: string) => {
 			setSearchQuery(query)
@@ -409,7 +407,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 						variant="default"
 						size="lg"
 						onClick={() => {
-							setIsLazyRequestSubmitted(true); 
+							setIsLazyRequestSubmitted(true)
 							toast("We hear you!", {
 								description: `Okay, okay... we'll consider adding "${searchQuery || "that icon"}" just for you. 😉`,
 							})
@@ -418,7 +416,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 								categories: selectedCategories,
 							})
 						}}
-						disabled={isLazyRequestSubmitted} 
+						disabled={isLazyRequestSubmitted}
 					>
 						I want this icon added but I'm too lazy to add it myself
 					</Button>