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 && )