From 975b14f2442c2d4effecf550fe1f74df7b87abee Mon Sep 17 00:00:00 2001
From: Felix Kling <felix@felix-kling.de>
Date: Thu, 8 Aug 2024 13:35:39 +0200
Subject: [PATCH] fix(svelte): Don't animate menu icon (#64358)

Fixes srch-858

Currently the menu icon rotates when hovering over it. The animation
should only target the Sourcegraph logo.

Additional changes:

- Move icon color style prop into CSS declaration (avoids inserting an
additional element)
- Let the animation target the link instead of the icon. There doesn't
seem to be reason why we actually need to target the `svg` element via
`:global`.


## Test plan

Manual testing.
---
 .../src/lib/navigation/GlobalHeader.svelte    | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/web-sveltekit/src/lib/navigation/GlobalHeader.svelte b/client/web-sveltekit/src/lib/navigation/GlobalHeader.svelte
index f97ceeed2c3..6a7d90e0729 100644
--- a/client/web-sveltekit/src/lib/navigation/GlobalHeader.svelte
+++ b/client/web-sveltekit/src/lib/navigation/GlobalHeader.svelte
@@ -58,8 +58,8 @@
             <Icon icon={ILucideMenu} aria-label="Navigation menu" />
         </button>
 
-        <a href="/search">
-            <Icon icon={ISgMark} aria-label="Sourcegraph" aria-hidden="true" --icon-color="initial" />
+        <a class="home-link" href="/search" aria-label="Got to search home">
+            <Icon icon={ISgMark} aria-label="Sourcegraph" aria-hidden="true" />
         </a>
     </div>
 
@@ -174,18 +174,22 @@
             margin-left: 0;
         }
 
-        :global([data-icon]):hover {
-            @keyframes spin {
-                50% {
-                    transform: rotate(180deg) scale(1.2);
-                }
-                100% {
-                    transform: rotate(180deg) scale(1);
-                }
-            }
+        .home-link {
+            --icon-color: initial;
 
-            @media (prefers-reduced-motion: no-preference) {
-                animation: spin 0.5s ease-in-out 1;
+            &:hover {
+                @keyframes spin {
+                    50% {
+                        transform: rotate(180deg) scale(1.2);
+                    }
+                    100% {
+                        transform: rotate(180deg) scale(1);
+                    }
+                }
+
+                @media (prefers-reduced-motion: no-preference) {
+                    animation: spin 0.5s ease-in-out 1;
+                }
             }
         }
     }