Merge pull request #1250 from homarr-labs/fix/carbon-and-ui

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>

web/src/components/carbon.tsx

@@ -1,15 +1,14 @@
-import React from "react"
-
+import { useEffect, useRef } from "react"
 export function Carbon() {
 	// biome-ignore lint/style/noNonNullAssertion: <explanation>
-	const ref = React.useRef<HTMLDivElement>(null!)
+	const ref = useRef<HTMLDivElement>(null!)
 	if (process.env.NODE_ENV === "development") {
 		return null
 	}
 
-	React.useEffect(() => {
+	useEffect(() => {
 		const serve = "CW7IP27L"
-		const placement = "homarrdev"
+		const placement = "dashboardiconscom"
 		ref.current.innerHTML = ""
 		const s = document.createElement("script")
 		s.id = "_carbonads_js"
@@ -21,7 +20,6 @@ export function Carbon() {
 		<>
 			<style>
 				{`
-					#carbonads_1 { display: none; }
 					#carbonads * { margin: initial; padding: initial; }
 					#carbonads {
 						font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -79,7 +77,7 @@ export function Carbon() {
 					}
 				`}
 			</style>
-			<div className=" shadow-xl flex flex-col m-4 space-y-2 rounded-l-lg">
+			<div className="m-4">
 				<div ref={ref} className="carbon-outer" />
 			</div>
 		</>

web/src/components/icon-details.tsx

@@ -142,7 +142,6 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 	}
 
 	const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
-		const { resolvedTheme } = useTheme()
 		const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
 		const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
 		const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
@@ -151,7 +150,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 
 		return (
 			<TooltipProvider key={variantKey} delayDuration={500}>
-				<MagicCard gradientColor={resolvedTheme === "dark" ? "#262626" : "#D9D9D955"} className="p-0 rounded-md">
+				<MagicCard className="p-0 rounded-md">
 					<div className="flex flex-col items-center p-4 transition-all">
 						<Tooltip>
 							<TooltipTrigger asChild>

web/src/components/magicui/magic-card.tsx

@@ -95,7 +95,7 @@ export function MagicCard({
 				className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 				style={{
 					background: useMotionTemplate`
-            radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
+            radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, var(--magic-gradient-color, ${gradientColor}), transparent 100%)
           `,
 					opacity: gradientOpacity,
 				}}