isolate button style

main
Mike Fix 8 years ago
parent 565b209a35
commit 93ec8dc952

@ -1,5 +1,25 @@
import React from 'react' import React from 'react'
export default (props) => ( export default (props) => (
<div></div> <div className="toolbar-btn" style={Object.assign({
background: props.bg
}, props.style)}>
<span>{props.title}</span>
<style jsx>{`
div {
height: 37px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
color: #000;
border: 0.5px solid #333;
border-radius: 3px;
}
div:last-of-type {
border-radius: 0px 3px 3px 0px;
border-left: 0px;
}
`}</style>
</div>
) )

@ -2,6 +2,7 @@ import React from 'react'
import Dropdown from './dropdown' import Dropdown from './dropdown'
import ColorPicker from './colorpicker' import ColorPicker from './colorpicker'
import Settings from './settings' import Settings from './settings'
import Button from './button'
const themes = [ const themes = [
{ {
@ -88,8 +89,8 @@ export default class extends React.Component {
<Dropdown list={langauges} /> <Dropdown list={langauges} />
<ColorPicker /> <ColorPicker />
<Settings /> <Settings />
<div className="toolbar-btn copy"><span>Copy Imgur Link</span></div> <Button title="Copy Imgur Link" bg="#84ACFC" style={{ borderRadius: '3px 0px 0px 3px' }}/>
<div className="toolbar-btn dl"><span>Save Image</span></div> <Button title="Save Image" bg="#C3E98D" />
<style jsx>{` <style jsx>{`
#toolbar { #toolbar {
width: 100%; width: 100%;
@ -99,28 +100,6 @@ export default class extends React.Component {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.toolbar-btn {
height: 37px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
color: #000;
border: 0.5px solid #333;
border-radius: 3px;
}
.copy {
background: #84ACFC;
border-radius: 3px 0px 0px 3px;
}
.dl {
background: #C3E98D;
border-radius: 0px 3px 3px 0px;
border-left: 0px;
}
`}</style> `}</style>
</div> </div>
) )

Loading…
Cancel
Save