ryanahamilton commented on code in PR #57326:
URL: https://github.com/apache/airflow/pull/57326#discussion_r2466754010
##########
airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx:
##########
@@ -148,7 +148,14 @@ export const Nav = () => {
<Flex alignItems="center" flexDir="column" width="100%">
<Box mb={3}>
<NavLink to="/">
- <AirflowPin height="35px" width="35px" />
+ <AirflowPin
+ height="35px"
+ width="35px"
+ _hover={{
+ transform: "rotate(360deg)",
+ transition: "transform 0.8s ease-in-out"
+ }}
Review Comment:
Hey @choo121600, I helped on this in the Airflow 2 version of this fun
enhancement. One consideration that we made there, that we should carry forward
is respecting [the `prefers-reduced-motion` media
query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
that allows users to suppress non-essential animations. I _think_ this could
be done with something like this, but I did not test it.
```suggestion
sx={{
'@media (prefers-reduced-motion: no-preference)': {
_hover: {
transform: "rotate(360deg)",
transition: "transform 0.8s ease-in-out"
}
}
}}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
