Adding a few more style fixes

Author: tnylea

resources/js/components/app-header.tsx

@@ -125,8 +125,8 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
 
                     <div className="ml-auto flex items-center space-x-2">
                         <div className="relative flex items-center space-x-1">
-                            <Button variant="ghost" size="icon" className="h-9 w-9 cursor-pointer">
-                                <Search className="h-5 w-5" />
+                            <Button variant="ghost" size="icon" className="h-9 w-9 cursor-pointer group">
+                                <Search className="h-5 w-5 group-hover:opacity-100 opacity-80" />
                             </Button>
                             <div className="hidden space-x-1 lg:flex">
                                 {rightNavItems.map((item) => (
@@ -137,10 +137,10 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                                     href={item.url}
                                                     target="_blank"
                                                     rel="noopener noreferrer"
-                                                    className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                                                    className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium ring-offset-background text-accent-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 group focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                                                 >
                                                     <span className="sr-only">{item.title}</span>
-                                                    {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
+                                                    {item.icon && <Icon iconNode={item.icon} className="h-4 w-4 opacity-80 group-hover:opacity-100" />}
                                                 </a>
                                             </TooltipTrigger>
                                             <TooltipContent>