feat: animate settings icon (#3665)

cowprotocol · Jan 16, 2024 · 34af837 · 34af837
1 parent a93c27c
commit 34af837
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
@@ -80,6 +80,7 @@ const Settings = styled(SettingsMod)`
     > path,
     > circle {
       transition: stroke var(${UI.ANIMATION_DURATION}) ease-in-out;
+      stroke: currentColor;
     }
   }
 

diff --git a/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts b/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts
@@ -112,14 +112,16 @@ export const ExpertModeIndicator = styled.div`
 `
 
 export const SettingsIcon = styled(SettingsIconRaw)`
-  height: 20px;
-  width: 20px;
+  --size: var(${UI.ICON_SIZE_NORMAL});
+  height: var(--size);
+  width: var(--size);
   color: inherit;
   opacity: 0.6;
-  transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
+  transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out, transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
 
   &:hover {
     opacity: 1;
+    transform: rotate(180deg);
   }
 
   > path,
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,6 +80,7 @@ const Settings = styled(SettingsMod)` @@
         > path,
         > circle {
           transition: stroke var(${UI.ANIMATION_DURATION}) ease-in-out;
+          stroke: currentColor;
         }
       }
@@ Expand Down @@