diff --git a/src/js/components/Log/index.js b/src/js/components/Log/index.js index 76705020..6247b32c 100644 --- a/src/js/components/Log/index.js +++ b/src/js/components/Log/index.js @@ -1,23 +1,70 @@ /* @flow */ - - import React from 'react'; +import styled from 'styled-components'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import colors from 'config/colors'; import { H2 } from 'components/Heading'; +import Icon from 'components/Icon'; +import P from 'components/P'; import * as LogActions from 'actions/LogActions'; -import type { State, Dispatch } from 'flowtype'; +import icons from 'config/icons'; +import { State, Dispatch } from 'flowtype'; + +const Wrapper = styled.div` + position: relative; + color: ${colors.INFO_PRIMARY}; + background: ${colors.INFO_SECONDARY}; + padding: 24px 48px; + display: flex; + flex-direction: column; + text-align: left; +`; + +const Click = styled.div` + cursor: pointer; + position: absolute; + top: 8px; + right: 0; + padding: 12px; + color: inherit; + transition: opacity 0.3s; + + &:active, + &:hover { + opacity: 0.6; + color: inherit; + } +`; + +const Textarea = styled.textarea` + width: 100%; + height: 200px; + min-height: 200px; + resize: vertical; + font-size: 10px; + + &:focus { + box-shadow: none; + } +`; + +const StyledP = styled(P)` + margin: 10px 0; +`; const Log = (props: Props): ?React$Element => { if (!props.log.opened) return null; return ( -
-