import { Flex, IconButton, theme } from '@hackclub/design-system'
import styled from 'styled-components'
import PropTypes from 'prop-types'
export const SendForm = styled(Flex.withComponent('form'))`
position: relative;
z-index: 4;
> div:first-child,
> label:first-child {
flex: 1 1 auto;
margin-bottom: 0;
}
`
SendForm.defaultProps = {
align: 'flex-end',
width: 1
}
export const SendButton = styled(IconButton)`
box-shadow: ${theme.boxShadows[0]} !important;
transition: ${theme.transition} box-shadow;
&:hover,
&:focus {
box-shadow: ${theme.boxShadows[1]} !important;
}
`
SendButton.propTypes = {
type: PropTypes.string,
color: PropTypes.string,
glyph: PropTypes.string,
size: PropTypes.number
import { Flex, theme } from '@hackclub/design-system'
import styled, { css } from 'styled-components'
export const Byline = styled(Flex.withComponent('p'))`
margin: 0 !important;
line-height: 1;
color: ${theme.colors.muted};
font-size: ${theme.fontSizes[1]}px;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
max-width: 100%;
`
export const CommentByline = styled(Byline)`
flex-direction: ${props => (props.mine ? 'row-reverse' : 'row')};
`
export const QuotedCommentByline = styled(Byline)`
align-items: center;
margin-bottom: ${theme.space[1] / 2}px;
svg {
margin-right: ${theme.space[1]}px;
}
> p {
margin: 0 !important;
}
`
export const commentStyle = css`
font-size: ${theme.fontSizes[1]}px;
line-height: 1.25;
vertical-align: middle;