diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
index 3b2bbdc..3f2e3d9 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
@@ -5,6 +5,7 @@ import getStudio from '@theatre/studio/getStudio'
import React, {useCallback} from 'react'
import styled from 'styled-components'
import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
+import {VscTriangleUp} from 'react-icons/all'
const Container = styled.button`
outline: none;
@@ -17,7 +18,7 @@ const Container = styled.button`
z-index: 1;
position: absolute;
- padding: 0 8px;
+ padding: 4px 8px;
display: flex;
color: #656d77;
line-height: 20px;
@@ -26,6 +27,23 @@ const Container = styled.button`
&:hover {
color: white;
}
+
+ & > svg {
+ transition: transform 0.3s;
+ transform: rotateZ(0deg);
+ }
+
+ &:hover > svg {
+ transform: rotateZ(-20deg);
+ }
+
+ &.open > svg {
+ transform: rotateZ(-180deg);
+ }
+
+ &.open:hover > svg {
+ transform: rotateZ(-160deg);
+ }
`
const GraphEditorToggle: React.FC<{
@@ -41,7 +59,15 @@ const GraphEditorToggle: React.FC<{
})
})
}, [layoutP])
- return Graph Editor
+ return (
+
+
+
+ )
}
export default GraphEditorToggle