fix: defaultLayerHeader chevron rotation (#604)

prevwong · Feb 8, 2024 · 7d091ab · 7d091ab
1 parent 31ad651
commit 7d091ab
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/blue-goats-cheer.md b/.changeset/blue-goats-cheer.md
@@ -0,0 +1,5 @@
+---
+"@craftjs/layers": patch
+---
+
+Improve defaultLayerHeader chevron rotation
diff --git a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
@@ -42,12 +42,14 @@ const StyledDiv = styled.div<{ depth: number; selected: boolean }>`
 const Expand = styled.a<{ expanded: boolean }>`
   width: 8px;
   height: 8px;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
   transform: rotate(${(props) => (props.expanded ? 180 : 0)}deg);
   opacity: 0.7;
   cursor: pointer;
-  transform-origin: 60% center;
 `;
 
 const Hide = styled.a<{ selected: boolean; isHidden: boolean }>`