refactor: update recently added icons to use primary theme colors

- Replace rose color references with primary theme colors
- Update gradient text and hover effects to use primary color
- Improve theme consistency across recently added icons section
- Enhance maintainability with centralized color management
This commit is contained in:
Thomas Camlong
2025-10-02 12:09:26 +02:00
parent 9918c5507e
commit 680246d50e

View File

@@ -32,7 +32,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
<div className="mx-auto px-6 lg:px-8"> <div className="mx-auto px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center my-4"> <div className="mx-auto max-w-2xl text-center my-4">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl bg-clip-text text-transparent bg-gradient-to-r from-rose-600 to-rose-500 motion-safe:motion-preset-fade-lg motion-duration-500"> <h2 className="text-3xl font-bold tracking-tight sm:text-4xl bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary motion-safe:motion-preset-fade-lg motion-duration-500">
Recently Added Icons Recently Added Icons
</h2> </h2>
</div> </div>
@@ -79,12 +79,12 @@ function RecentIconCard({ name, data }: { name: string; data: Icon }) {
href={`/icons/${name}`} href={`/icons/${name}`}
className={cn( className={cn(
"flex flex-col items-center p-3 sm:p-4 rounded-xl border border-border", "flex flex-col items-center p-3 sm:p-4 rounded-xl border border-border",
"transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift", "transition-all duration-300 hover:shadow-lg hover:shadow-primary/5 relative overflow-hidden hover-lift",
"w-36 mx-2 group/item", "w-36 mx-2 group/item",
)} )}
aria-label={`View details for ${formattedIconName} icon`} aria-label={`View details for ${formattedIconName} icon`}
> >
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300" /> <div className="absolute inset-0 bg-gradient-to-b from-primary/15 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300" />
<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2"> <div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
<Image <Image
@@ -94,7 +94,7 @@ function RecentIconCard({ name, data }: { name: string; data: Icon }) {
className="object-contain p-1 hover:scale-110 transition-transform duration-300" className="object-contain p-1 hover:scale-110 transition-transform duration-300"
/> />
</div> </div>
<span className="text-xs sm:text-sm text-center truncate w-full capitalize dark:hover:text-rose-400 transition-colors duration-200 font-medium"> <span className="text-xs sm:text-sm text-center truncate w-full capitalize dark:hover:text-primary transition-colors duration-200 font-medium">
{formattedIconName} {formattedIconName}
</span> </span>
<div className="flex items-center justify-center mt-2 w-full"> <div className="flex items-center justify-center mt-2 w-full">