Showing
2 changed files
with
24 additions
and
3 deletions
... | @@ -3,18 +3,29 @@ import styled from 'styled-components'; | ... | @@ -3,18 +3,29 @@ import styled from 'styled-components'; |
3 | import { buttonColorMap } from '../../lib/styles/palette'; | 3 | import { buttonColorMap } from '../../lib/styles/palette'; |
4 | 4 | ||
5 | const ButtonBlock = styled.button` | 5 | const ButtonBlock = styled.button` |
6 | - width: 20%; | 6 | + width: ${props => props.width || '80px'}; |
7 | + height: ${props => props.height || '40px'}; | ||
8 | + font-size: ${props => props.fontsize || '15px'}; | ||
7 | background-color: ${props => buttonColorMap[props.color].background}; | 9 | background-color: ${props => buttonColorMap[props.color].background}; |
8 | &:hover { | 10 | &:hover { |
9 | background-color: ${props => buttonColorMap[props.color].hoverBackground}; | 11 | background-color: ${props => buttonColorMap[props.color].hoverBackground}; |
10 | } | 12 | } |
11 | color: ${props => buttonColorMap[props.color].color}; | 13 | color: ${props => buttonColorMap[props.color].color}; |
12 | float: ${props => props.float || ''}; | 14 | float: ${props => props.float || ''}; |
15 | + border-radius: 0.3em; | ||
16 | + cursor: pointer; | ||
17 | + border: 1px ${props => buttonColorMap[props.color].background}; | ||
13 | `; | 18 | `; |
14 | 19 | ||
15 | -const Button = ({ children, color, float }) => { | 20 | +const Button = ({ children, color, float, width, height, fontsize }) => { |
16 | return ( | 21 | return ( |
17 | - <ButtonBlock color={color} float={float}> | 22 | + <ButtonBlock |
23 | + color={color || 'blue'} | ||
24 | + float={float} | ||
25 | + width={width} | ||
26 | + height={height} | ||
27 | + fontsize={fontsize} | ||
28 | + > | ||
18 | {children} | 29 | {children} |
19 | </ButtonBlock> | 30 | </ButtonBlock> |
20 | ); | 31 | ); | ... | ... |
node_modules/.yarn-integrity
0 → 100644
-
Please register or login to post a comment