more external link icon changes

Author: adibarra

packages/app/src/components/media/media-content.tsx

@@ -51,7 +51,7 @@ function MediaCard({ title, organization, url, type, date }: MediaItem) {
         >
           <h3 className="text-sm sm:text-base lg:text-lg font-medium leading-snug text-foreground group-hover:text-primary transition-colors italic group-hover:underline">
             &ldquo;{title}&rdquo;
-            <ExternalLinkIcon className="ml-1.5 inline-block h-[0.85em] w-[0.85em] opacity-50 group-hover:opacity-100 transition-opacity" />
+            <ExternalLinkIcon />
           </h3>
         </a>
       </div>

packages/app/src/components/quote-carousel.tsx

@@ -80,10 +80,10 @@ function QuoteBlock({ quote }: { quote: CarouselQuote }) {
               href={quote.link}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-semibold text-foreground hover:text-brand transition-colors group/link"
+              className="font-semibold text-foreground hover:text-brand transition-colors group"
             >
-              <span className="group-hover/link:underline">{quote.name}</span>{' '}
-              <ExternalLinkIcon className="ml-1 inline-block h-[0.85em] w-[0.85em]" />
+              <span className="group-hover:underline">{quote.name}</span>
+              <ExternalLinkIcon />
             </a>
           ) : (
             <span className="font-semibold text-foreground">{quote.name}</span>

packages/app/src/components/quotes/quotes-content.tsx

@@ -36,10 +36,10 @@ function QuoteCard({
               href={link}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-semibold text-foreground hover:text-brand transition-colors group/link"
+              className="font-semibold text-foreground hover:text-brand transition-colors group"
             >
-              <span className="group-hover/link:underline">{name}</span>{' '}
-              <ExternalLinkIcon className="ml-1 inline-block h-[0.85em] w-[0.85em] align-middle" />
+              <span className="group-hover:underline">{name}</span>
+              <ExternalLinkIcon />
             </a>
           ) : (
             <span className="font-semibold text-foreground">{name}</span>

packages/app/src/components/ui/external-link-icon.tsx

@@ -7,10 +7,14 @@ interface ExternalLinkIconProps extends React.SVGProps<SVGSVGElement> {
 }
 
 const ExternalLinkIcon = React.forwardRef<SVGSVGElement, ExternalLinkIconProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, style, ...props }, ref) => (
     <svg
       ref={ref}
-      className={cn('ml-1 inline-block h-[1em] w-[1em]', className)}
+      className={cn(
+        'inline h-[0.85em] w-[0.85em] ml-1 shrink-0 opacity-50 group-hover:opacity-100 transition-opacity',
+        className,
+      )}
+      style={{ verticalAlign: '-0.125em', ...style }}
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"