From 712acd2348ec732aeeb908fa886cfc1947ad5486 Mon Sep 17 00:00:00 2001
From: Heidi <clippii@protonmail.com>
Date: Sat, 16 May 2026 07:21:03 +0100
Subject: [PATCH] update button hover effects, fix the embed.

---
 index.html       | 14 ++++++++++++--
 public/embed.svg |  2 +-
 src/App.jsx      | 14 +++++++-------
 3 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index c14e4ff..138e995 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#ff8c00" />
+    <meta name="theme-color" content="#e82517" />
     <meta
       name="description"
       content="Live TSS team leaderboards, battle logs, team profiles, uptime, and consented viewer analytics for Toothless' TSS Bot."
@@ -17,13 +17,23 @@
       property="og:description"
       content="Live TSS team leaderboards, battle logs, team profiles, uptime, and consented viewer analytics."
     />
-    <meta name="twitter:card" content="summary" />
+    <meta property="og:image" content="__PUBLIC_ORIGIN__/embed.svg" />
+    <meta property="og:image:secure_url" content="__PUBLIC_ORIGIN__/embed.svg" />
+    <meta property="og:image:type" content="image/svg+xml" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="Toothless' TSS Bot share card" />
+    <meta property="og:logo" content="__PUBLIC_ORIGIN__/embed-icon.svg" />
+    <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Toothless' TSS Bot" />
     <meta
       name="twitter:description"
       content="Live TSS team leaderboards, battle logs, team profiles, uptime, and consented viewer analytics."
     />
+    <meta name="twitter:image" content="__PUBLIC_ORIGIN__/embed.svg" />
+    <meta name="twitter:image:alt" content="Toothless' TSS Bot share card" />
     <link rel="icon" type="image/svg+xml" href="/embed-icon.svg" />
+    <link rel="apple-touch-icon" href="/embed-icon.svg" />
     <title>Toothless' TSS Bot</title>
   </head>
   <body>
diff --git a/public/embed.svg b/public/embed.svg
index 044785e..8e4e830 100644
--- a/public/embed.svg
+++ b/public/embed.svg
@@ -7,7 +7,7 @@
   <rect x="72" y="72" width="1056" height="486" rx="28" fill="#fefde7" stroke="#fdca9b" stroke-width="6"/>
   <rect x="96" y="96" width="1008" height="438" rx="18" fill="#fff2e6" opacity=".54"/>
 
-  <g transform="translate(786 88) scale(.72)" shape-rendering="crispEdges">
+  <g transform="translate(780 144) scale(.58)" shape-rendering="crispEdges">
     <rect x="0" y="0" width="500" height="420" fill="#fefde7" stroke="#fdca9b" stroke-width="6"/>
     <path d="M0 372c55-16 116-12 173 3 46 12 101 20 157 4 58-17 112-10 170 5v36H0Z" fill="#fee5cd"/>
     <path d="M0 394c54-10 110-8 172 6 54 12 108 10 160-4 58-15 112-10 168 4v20H0Z" fill="#fdca9b"/>
diff --git a/src/App.jsx b/src/App.jsx
index 10f8d34..ad4d002 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -886,7 +886,7 @@ function App() {
       >
         <div className="flex max-w-[calc(100vw-2rem)] items-center gap-2 rounded-full border border-border bg-fury-white/92 px-2 py-2 shadow-[0_12px_36px_rgba(0,0,0,0.16)] backdrop-blur sm:px-3">
           <button
-            className="hidden shrink-0 rounded-full px-3 py-2 text-sm font-bold tracking-tight transition hover:bg-surface sm:block"
+            className="hidden shrink-0 rounded-full px-3 py-2 text-sm font-bold tracking-tight transition hover:bg-surface hover:text-fury-cyan sm:block"
             onClick={() => navigate('/')}
             type="button"
           >
@@ -898,7 +898,7 @@ function App() {
               <button
                 className={`shrink-0 rounded-full px-3 py-2 text-sm font-semibold transition ${activeNavPath === item.path
                   ? 'bg-text text-bg'
-                  : 'text-text-soft hover:bg-surface'
+                  : 'text-text-soft hover:bg-surface hover:text-text'
                   }`}
                 key={item.path}
                 onClick={() => navigate(item.path)}
@@ -1016,7 +1016,7 @@ function ConsentBanner({ preferences, onChoose }) {
   if (!isOpen) {
     return (
       <button
-        className="fixed right-4 bottom-4 z-50 rounded-md border border-border bg-fury-white px-3 py-2 text-xs font-semibold text-text-soft shadow-sm transition hover:text-text"
+        className="fixed right-4 bottom-4 z-50 rounded-md border border-border bg-fury-white px-3 py-2 text-xs font-semibold text-text-soft shadow-sm transition hover:border-ring hover:bg-surface hover:text-text"
         onClick={() => {
           setIsConfiguring(true)
           setIsOpen(true)
@@ -1299,14 +1299,14 @@ function Landing({
             <div className="mt-8 w-full max-w-xl">
               <div className="grid gap-4 sm:grid-cols-3">
                 <button
-                  className="min-h-15 rounded-lg bg-text px-5 py-4 text-base font-semibold text-bg"
+                  className="min-h-15 rounded-lg bg-text px-5 py-4 text-base font-semibold text-bg transition hover:bg-fury-cyan"
                   onClick={() => navigate('/teams')}
                   type="button"
                 >
                   Team leaderboard
                 </button>
                 <button
-                  className="min-h-15 rounded-lg border-2 border-ring px-5 py-4 text-base font-semibold text-fury-cyan"
+                  className="min-h-15 rounded-lg border-2 border-ring px-5 py-4 text-base font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"
                   onClick={() => navigate('/battle-logs')}
                   type="button"
                 >
@@ -1718,7 +1718,7 @@ function TeamsPage({ leaderboard, navigate, teams }) {
           const name = bestTeamName(team)
           return (
             <button
-              className="grid w-full gap-4 border-b border-surface px-5 py-4 text-left hover:bg-surface md:grid-cols-[4rem_1fr_repeat(4,auto)] md:items-center"
+              className="grid w-full gap-4 border-b border-surface px-5 py-4 text-left transition hover:bg-surface md:grid-cols-[4rem_1fr_repeat(4,auto)] md:items-center"
               key={`${name}-${team.clan_id || index}`}
               onClick={() => navigate(teamPath(name))}
               type="button"
@@ -1765,7 +1765,7 @@ function TeamProfilePage({ navigate, profile, requestedTeam, teams }) {
   return (
     <section className="space-y-6">
       <button
-        className="text-sm font-semibold text-fury-cyan hover:text-text"
+        className="text-sm font-semibold text-fury-cyan transition hover:text-text"
         onClick={() => navigate('/teams')}
         type="button"
       >
