diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js index 2e95eed0..dc0e0e6d 100644 --- a/frontend/components/Editor/Editor.js +++ b/frontend/components/Editor/Editor.js @@ -204,8 +204,10 @@ type KeyData = { onSave={this.props.onSave} readOnly={this.props.readOnly} /> - {!this.props.readOnly && - } + ); @@ -225,6 +227,7 @@ const HeaderContainer = styled(Flex).attrs({ align: 'flex-end', })` height: 100px; + flex-shrink: 0; ${({ readOnly }) => !readOnly && 'cursor: text;'} `; diff --git a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js b/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js index 970d0619..81e2b5f1 100644 --- a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js +++ b/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js @@ -1,20 +1,22 @@ // @flow import React from 'react'; -import classnames from 'classnames'; -import styles from './ClickablePadding.scss'; +import styled from 'styled-components'; type Props = { - onClick: Function, + onClick?: ?Function, grow?: boolean, }; const ClickablePadding = (props: Props) => { - return ( -
- ); + return ; }; +const Container = styled.div` + min-height: 150px; + padding-top: 50px; + cursor: ${({ onClick }) => (onClick ? 'text' : 'default')}; + + ${({ grow }) => grow && `flex-grow: 1;`} +`; + export default ClickablePadding; diff --git a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss b/frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss deleted file mode 100644 index cac8ee5a..00000000 --- a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss +++ /dev/null @@ -1,15 +0,0 @@ -.container { - min-height: 150px; - padding-top: 50px; - cursor: text; -} - -.grow { - flex-grow: 1; -} - -@media all and (max-width: 960px) { - .container { - padding-top: 50px; - } -}