diff --git a/frontend/src/components/atoms/Block/index.js b/frontend/src/components/atoms/Block/index.js index 7fa68c4..17ab22a 100644 --- a/frontend/src/components/atoms/Block/index.js +++ b/frontend/src/components/atoms/Block/index.js @@ -1,11 +1,18 @@ import styled from 'styled-components' +import PropTypes from 'prop-types' + +const alignItems = ({direction}) => ( + direction === 'column' ? + 'center' : 'baseline' +) const Block = styled.div` background-color: ${props => props.transparent ? "transparent" : "white"}; border: ${props => props.transparent ? "none" : "thin solid #bfbfbf"}; display: flex; - flex-direction: ${props => props.direction || "column"}; - align-items: center; + flex-direction: ${({direction}) => direction}; + justify-content: space-between; + align-items: ${alignItems}; margin: 0.5em auto 0; padding: 1em 20px; max-width: 310px; @@ -17,4 +24,8 @@ const Block = styled.div` } ` +Block.defaultProps = { + direction: 'column', +} + export default Block diff --git a/frontend/src/components/pages/RoomPage/index.js b/frontend/src/components/pages/RoomPage/index.js index ffd7a02..2ddf47c 100644 --- a/frontend/src/components/pages/RoomPage/index.js +++ b/frontend/src/components/pages/RoomPage/index.js @@ -51,14 +51,33 @@ const RoomPage = props => {
{}}> - + - + + +

+ {room.roomname} +

+
{showPayment ? () : (members && )