feat(frontend): hover-styles

Author: tractorss

frontend/src/components/ExternalLink.tsx

@@ -16,7 +16,7 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className={`flex gap-4 items-center ${className}`}
+      className={`flex gap-4 items-center hover:brightness-[1.2] ${className}`}
     >
       <span className="text-lg text-primary-blue text-center">{text}</span>
       <Image

frontend/src/components/Navbar/AppsDropdownContent/Card.tsx

@@ -2,10 +2,9 @@ import Image from "next/image";
 import clsx from "clsx";
 import { Solution } from "@/queries/navbar";
 import Link from "next/link"
+import { hoverEffect } from "@/styles";
+
 
-const hoverEffect = clsx(
-  "hover:scale-[1.01] transform transition duration-100"
-);
 const cardBaseStyle = clsx(
   "bg-background-2 rounded-2xl border border-stroke text-wrap",
   "p-4 flex gap-4 h-full lg:items-start"

frontend/src/components/PNKToken/BuySection/Exchanges.tsx

@@ -1,4 +1,5 @@
 import { Exchange } from "@/queries/pnk-token/token-buy";
+import { hoverEffect } from "@/styles";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -21,6 +22,7 @@ const Exchanges: React.FC<IExchanges> = ({ exchanges }) => {
             height={64}
             src={exchange.icon.url}
             alt={exchange.name}
+            className={hoverEffect}
           />
         </Link>
       ))}

frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx

@@ -2,20 +2,18 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { Exchange } from "@/queries/pnk-token/token-buy";
+import clsx from "clsx";
+import { hoverEffect } from "@/styles";
 
 interface IFeaturedExchange {
   exchange: Exchange;
 }
 const FeaturedExchange: React.FC<IFeaturedExchange> = ({ exchange }) => {
   return (
     <Link href={exchange.url} target="_blank" rel="noopener noreferrer">
-      <div className="h-40 flex flex-col gap-5 items-center justify-center border border-stroke rounded-2xl px-2">
+      <div className={clsx("h-40 flex flex-col gap-5 items-center justify-center border border-stroke rounded-2xl px-2 ", hoverEffect)}>
         <div className="relative h-16 w-60">
-          <Image
-            src={exchange.icon.url}
-            alt={exchange.name}
-            fill
-          />
+          <Image src={exchange.icon.url} alt={exchange.name} fill />
         </div>
 
         <p className="text-secondary-text">{exchange.name}</p>

frontend/src/styles/index.ts

@@ -0,0 +1,5 @@
+import clsx from "clsx";
+
+export const hoverEffect = clsx(
+  "hover:scale-[1.01] transform transition duration-100"
+);