More style tweaks

This commit is contained in:
Aria Minaei 2021-07-09 18:02:14 +02:00
parent 85e468b597
commit 7f30f08bd0
2 changed files with 13 additions and 8 deletions

View file

@ -9,7 +9,7 @@ import {getPointerParts} from '@theatre/dataverse'
import last from 'lodash-es/last' import last from 'lodash-es/last'
import {darken} from 'polished' import {darken} from 'polished'
import React from 'react' import React from 'react'
import {GoChevronRight} from 'react-icons/go' import {HiOutlineChevronRight} from 'react-icons/all'
import styled from 'styled-components' import styled from 'styled-components'
import DeterminePropEditor from './DeterminePropEditor' import DeterminePropEditor from './DeterminePropEditor'
import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors' import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
@ -29,8 +29,9 @@ const Header = styled.div`
const IconContainer = styled.div` const IconContainer = styled.div`
width: 12px; width: 12px;
margin-right: 8px; margin-right: 6px;
font-size: 13px; font-size: 9px;
text-align: center;
transform: rotateZ(90deg); transform: rotateZ(90deg);
` `
@ -69,7 +70,7 @@ const CompoundPropEditor: React.FC<{
{ {
<Header> <Header>
<IconContainer> <IconContainer>
<GoChevronRight /> <HiOutlineChevronRight />
</IconContainer> </IconContainer>
<PropName>{propName || 'props'}</PropName> <PropName>{propName || 'props'}</PropName>
<NextPrevKeyframeCursors <NextPrevKeyframeCursors

View file

@ -1,10 +1,11 @@
import {theme} from '@theatre/studio/css' import {theme} from '@theatre/studio/css'
import type {VoidFn} from '@theatre/shared/utils/types' import type {VoidFn} from '@theatre/shared/utils/types'
import React from 'react' import React from 'react'
import {GoChevronRight} from 'react-icons/go' import {HiOutlineChevronRight} from 'react-icons/all'
import styled from 'styled-components' import styled from 'styled-components'
import noop from '@theatre/shared/utils/noop' import noop from '@theatre/shared/utils/noop'
import {lighten} from 'polished' import {lighten} from 'polished'
import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
export const Container = styled.li<{depth: number}>` export const Container = styled.li<{depth: number}>`
--depth: ${(props) => props.depth}; --depth: ${(props) => props.depth};
@ -43,7 +44,9 @@ const Header = styled(BaseHeader)<{
} }
` `
const Head_Label = styled.span`` const Head_Label = styled.span`
${propNameText}
`
const Head_IconContainer = styled.span` const Head_IconContainer = styled.span`
width: 12px; width: 12px;
@ -52,7 +55,7 @@ const Head_IconContainer = styled.span`
const Head_Icon = styled.span<{isOpen: boolean}>` const Head_Icon = styled.span<{isOpen: boolean}>`
width: 12px; width: 12px;
font-size: 13px; font-size: 9px;
transform: rotateZ(${(props) => (props.isOpen ? 90 : 0)}deg); transform: rotateZ(${(props) => (props.isOpen ? 90 : 0)}deg);
` `
@ -82,7 +85,8 @@ const BaseItem: React.FC<{
<Head_IconContainer> <Head_IconContainer>
{canContainChildren && ( {canContainChildren && (
<Head_Icon isOpen={true}> <Head_Icon isOpen={true}>
<GoChevronRight /> {/* <GoChevronRight /> */}
<HiOutlineChevronRight />
</Head_Icon> </Head_Icon>
)} )}
</Head_IconContainer> </Head_IconContainer>