diff --git a/app/components/Button.js b/app/components/Button.js index 94a541a9..a7daa2ee 100644 --- a/app/components/Button.js +++ b/app/components/Button.js @@ -65,6 +65,13 @@ const RealButton = styled.button` border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)}; } + &:focus { + transition-duration: 0.05s; + border: 1px solid ${lighten(0.4, props.theme.buttonBackground)}; + box-shadow: ${lighten(0.4, props.theme.buttonBackground)} 0px 0px + 0px 2px; + } + &:disabled { color: ${props.theme.textTertiary}; } @@ -77,6 +84,12 @@ const RealButton = styled.button` &:hover { background: ${darken(0.05, props.theme.danger)}; } + + &:focus { + transition-duration: 0.05s; + box-shadow: ${lighten(0.4, props.theme.danger)} 0px 0px + 0px 3px; + } `}; `; diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js index 48c474a9..4fa08769 100644 --- a/app/components/Editor/Editor.js +++ b/app/components/Editor/Editor.js @@ -272,8 +272,10 @@ const PrismStyles = createGlobalStyle` } `; -const EditorTooltip = props => ( - +const EditorTooltip = ({ children, ...props }) => ( + + {children} + ); export default withTheme( diff --git a/app/components/NudeButton.js b/app/components/NudeButton.js new file mode 100644 index 00000000..7a847f9d --- /dev/null +++ b/app/components/NudeButton.js @@ -0,0 +1,26 @@ +// @flow +import * as React from 'react'; +import styled from 'styled-components'; +import { lighten } from 'polished'; + +const Button = styled.button` + width: 24px; + height: 24px; + background: none; + border-radius: 4px; + line-height: 0; + border: 0; + padding: 0; + + &:focus { + transition-duration: 0.05s; + box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px + 0px 3px; + outline: none; + } +`; + +// $FlowFixMe - need to upgrade to get forwardRef +export default React.forwardRef((props, ref) => ( + + + )} diff --git a/app/scenes/Document/components/KeyboardShortcuts.js b/app/scenes/Document/components/KeyboardShortcuts.js index 5d82873b..a8dceea3 100644 --- a/app/scenes/Document/components/KeyboardShortcuts.js +++ b/app/scenes/Document/components/KeyboardShortcuts.js @@ -2,12 +2,12 @@ import * as React from 'react'; import styled from 'styled-components'; import breakpoint from 'styled-components-breakpoint'; -import { lighten } from 'polished'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import { KeyboardIcon } from 'outline-icons'; import Modal from 'components/Modal'; import Tooltip from 'components/Tooltip'; +import NudeButton from 'components/NudeButton'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; type Props = {}; @@ -49,31 +49,12 @@ class KeyboardShortcutsButton extends React.Component { } } -const Button = styled.button` +const Button = styled(NudeButton)` display: none; position: fixed; bottom: 0; right: 0; margin: 24px; - width: 24px; - height: 24px; - opacity: 0.8; - background: none; - border-radius: 4px; - line-height: 0; - border: 0; - padding: 0; - - &:hover { - opacity: 1; - } - - &:focus { - transition-duration: 0.05s; - box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px - 0px 3px; - outline: none; - } ${breakpoint('tablet')` display: block; diff --git a/app/scenes/Invite.js b/app/scenes/Invite.js index b04a578f..22a13d07 100644 --- a/app/scenes/Invite.js +++ b/app/scenes/Invite.js @@ -11,6 +11,7 @@ import Button from 'components/Button'; import Input from 'components/Input'; import HelpText from 'components/HelpText'; import Tooltip from 'components/Tooltip'; +import NudeButton from 'components/NudeButton'; import UiStore from 'stores/UiStore'; import AuthStore from 'stores/AuthStore'; @@ -124,7 +125,9 @@ class Invite extends React.Component { {index !== 0 && ( - this.handleRemove(index)} /> + this.handleRemove(index)}> + + )}