Redesign login, register, me pages with premium layout and i18n

src/app/(site)/me/CopyReferralButton.tsx

@@ -2,11 +2,6 @@
 
 import { useState } from "react";
 
-/**
- * Copies the user's referral link to the clipboard. Mirrors AtomCMS's
- * copyCode() helper on the /me page, but resolves the link to an absolute URL
- * (the server only knows a relative path, so we prepend the current origin).
- */
 export default function CopyReferralButton({ value }: { value: string }) {
 	const [copied, setCopied] = useState(false);
 
@@ -18,7 +13,6 @@ export default function CopyReferralButton({ value }: { value: string }) {
 		try {
 			await navigator.clipboard.writeText(absolute);
 		} catch {
-			// Older browsers / insecure contexts: fall back to a hidden textarea.
 			const ta = document.createElement("textarea");
 			ta.value = absolute;
 			ta.style.position = "fixed";
@@ -37,7 +31,16 @@ export default function CopyReferralButton({ value }: { value: string }) {
 	}
 
 	return (
-		<button type="button" className="btn btn-secondary" onClick={copy}>
+		<button
+			type="button"
+			onClick={copy}
+			className="rounded-xl font-bold text-sm px-5 py-2.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shrink-0"
+			style={{
+				background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+				color: "var(--color-primary-readable, var(--color-primary))",
+				border: `2px solid color-mix(in srgb, var(--color-primary) 20%, transparent)`,
+			}}
+		>
 			{copied ? "Copied!" : "Copy link"}
 		</button>
 	);