From f0d450e9dc0d7cc59aa8ac104b45bb8378e2a8d6 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 20 Aug 2021 18:50:54 +0200 Subject: [PATCH] Style tweaks --- .../Right/LengthIndicator/LengthIndicator.tsx | 7 +++-- .../toolbars/GlobalToolbar/GlobalToolbar.tsx | 20 +++++++++++-- .../src/uiComponents/Popover/BasicPopover.tsx | 18 +++++------ .../src/uiComponents/Popover/BasicTooltip.tsx | 2 ++ .../src/uiComponents/Popover/PopoverArrow.tsx | 23 ++++---------- .../toolbar/ToolbarIconButton.tsx | 30 +++++++++---------- 6 files changed, 52 insertions(+), 48 deletions(-) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx index cdf3b71..639088e 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx @@ -71,8 +71,8 @@ const Tooltip = styled.div` margin-top: 8px; font-size: 10px; white-space: nowrap; - padding: 1px 8px; - border-radius: 0 2px 2px 0; + padding: 2px 8px; + border-radius: 2px; ${pointerEventsAutoInNormalMode}; cursor: ew-resize; color: #464646; @@ -182,7 +182,7 @@ const LengthIndicator: React.FC = ({layoutP}) => { { openPopover(e, node!) }} @@ -192,6 +192,7 @@ const LengthIndicator: React.FC = ({layoutP}) => { + Sequence length:{' '} {sequence.positionFormatter.formatBasic(sequenceLength)} diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx index b9827dc..dce700f 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx @@ -11,7 +11,7 @@ const Container = styled.div` top: 12px; right: 12px; left: 12px; - height: 28px; + height: 36px; pointer-events: none; display: flex; @@ -19,6 +19,16 @@ const Container = styled.div` justify-content: center; ` +const Bg = styled.div` + display: flex; + align-items: center; + gap: 1rem; + background-color: rgba(0, 0, 0, 0.15); + border-radius: 4px; + + padding: 6px 6px; +` + const GlobalToolbar: React.FC<{}> = (props) => { const groups: Array = [] const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId) @@ -34,7 +44,13 @@ const GlobalToolbar: React.FC<{}> = (props) => { } } - return {groups} + if (groups.length === 0) return null + + return ( + + {groups} + + ) } export default GlobalToolbar diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index 57b369d..1bbd70c 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -3,18 +3,18 @@ import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {transparentize} from 'polished' import React from 'react' import styled from 'styled-components' -import PopoverArrow, {popoverArrowColors} from './PopoverArrow' +import PopoverArrow from './PopoverArrow' export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`) const Container = styled.div` position: absolute; - background: ${popoverBackgroundColor}; - ${popoverArrowColors({ - fill: popoverBackgroundColor, - innerStroke: `#505159`, - outerStroke: `black`, - })}; + --popover-bg: ${popoverBackgroundColor}; + --popover-inner-stroke: #505159; + --popover-outer-stroke: #111; + + background: var(--popover-bg); + color: white; padding: 0; margin: 0; @@ -22,8 +22,8 @@ const Container = styled.div` ${pointerEventsAutoInNormalMode}; border-radius: 3px; z-index: 10000; - border: 1px solid #505159; - box-shadow: 0 6px 8px -4px black, 0 0 0 1px black; + border: 1px solid var(--popover-inner-stroke); + box-shadow: 0 6px 8px -4px black, 0 0 0 1px var(--popover-outer-stroke); backdrop-filter: blur(8px); ` diff --git a/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx b/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx index d6984f8..e4ce5fe 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx @@ -5,6 +5,8 @@ const BasicTooltip = styled(BasicPopover)` padding: 1em; max-width: 240px; pointer-events: none; + --popover-outer-stroke: transparent; + --popover-inner-stroke: #45464d; ` export default BasicTooltip diff --git a/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx b/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx index 61359f6..51e88eb 100644 --- a/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx +++ b/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx @@ -1,26 +1,13 @@ import React, {forwardRef, useContext} from 'react' -import styled, {css} from 'styled-components' +import styled from 'styled-components' import ArrowContext from './ArrowContext' -export const popoverArrowColors = ({ - fill, - innerStroke, - outerStroke, -}: { - fill: string - innerStroke: string - outerStroke: string -}) => css` - --popover-arrow-fill: ${fill}; - --popover-arrow-inner-stroke: ${innerStroke}; - --popover-arrow-outer-stroke: ${outerStroke}; -` - const Container = styled.div` position: absolute; width: 0; height: 0; color: var(--popover-arrow-color); + pointer-events: none; ` const Adjust = styled.div` @@ -38,15 +25,15 @@ type Props = { } const InnerTriangle = styled.path` - fill: var(--popover-arrow-fill); + fill: var(--popover-bg); ` const InnerStroke = styled.path` - fill: var(--popover-arrow-inner-stroke); + fill: var(--popover-inner-stroke); ` const OuterStroke = styled.path` - fill: var(--popover-arrow-outer-stroke); + fill: var(--popover-outer-stroke); ` const PopoverArrow = forwardRef(({className}, ref) => { diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index b9ff8ae..fb2a17d 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -1,6 +1,4 @@ import styled from 'styled-components' -import {outlinePanelTheme} from '@theatre/studio/panels/OutlinePanel/BaseItem' -import {darken, opacify} from 'polished' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import React from 'react' import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types' @@ -8,8 +6,6 @@ import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip' import mergeRefs from 'react-merge-refs' import MinimalTooltip from '@theatre/studio/uiComponents/Popover/MinimalTooltip' -const {baseBg, baseBorderColor, baseFontColor} = outlinePanelTheme - const Container = styled.button` ${pointerEventsAutoInNormalMode}; position: relative; @@ -22,27 +18,29 @@ const Container = styled.button` height: 24px; outline: none; - color: ${baseFontColor}; - --item-bg: ${baseBg}; - --item-border-color: ${baseBorderColor}; - background-color: var(--item-bg); + color: rgba(255, 255, 255, 0.75); + background-color: rgb(47, 49, 53); &:hover { - color: ${opacify(1, baseFontColor)}; + color: #fff; - --item-bg: ${() => darken(0.07, baseBg)}; - --item-border-color: ${opacify(0.1, baseBorderColor)}; + background-color: rgba(28, 30, 32, 0.95); + &:after { + border-color: rgba(90, 90, 90, 1); + } } &.selected { - color: ${opacify(1, baseFontColor)}; + color: #fff; - --item-bg: ${() => darken(0.15, baseBg)}; - --item-border-color: ${opacify(0, baseBorderColor)}; + background-color: rgba(17, 18, 20, 0.95); + &:after { + border-color: rgb(43, 43, 43); + } } &:before { - border: 1px solid var(--item-border-color); + border: 1px solid rgb(62, 62, 62); position: absolute; inset: -1px; display: block; @@ -51,7 +49,7 @@ const Container = styled.button` pointer-events: none; border-radius: 2px; box-sizing: border-box; - box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, 0.49); } border: 0;