Add side margin to modals by default and minor styles updates

src/components/SideBar/index.js

@@ -30,7 +30,7 @@ const Container = styled(Box).attrs({
   noShrink: true,
 })`
   background-color: ${p => rgba(p.theme.colors[p.bg], process.platform === 'darwin' ? 0.4 : 1)};
-  width: 250px;
+  width: ${p => p.theme.sizes.sideBarWidth}px;
 `
 
 const BtnAddAccount = styled(Box).attrs({

src/components/base/Modal/index.js

@@ -20,7 +20,8 @@ import Box from 'components/base/Box'
 type Props = {
   isOpened?: boolean,
   onClose: Function,
-  preventBackdropClick: boolean,
+  preventBackdropClick?: boolean,
+  preventSideMargin?: boolean,
   render: Function,
 }
 
@@ -73,13 +74,14 @@ const Wrapper = styled(Box).attrs({
     transform: `translate3d(0, ${p.offset}px, 0)`,
   }),
 })`
-  width: 430px;
+  margin-left: ${p => (p.preventSideMargin ? 0 : p.theme.sizes.sideBarWidth)}px;
+  width: 570px;
   z-index: 2;
 `
 
 const Body = styled(Box).attrs({
   bg: p => p.theme.colors.white,
-  p: 20,
+  p: 3,
 })`
   border-radius: 5px;
 `
@@ -87,12 +89,13 @@ const Body = styled(Box).attrs({
 export class Modal extends PureComponent<Props> {
   static defaultProps = {
     onClose: noop,
-    preventBackdropClick: true,
+    preventBackdropClick: false,
+    preventSideMargin: false,
     isOpened: false,
   }
 
   render() {
-    const { preventBackdropClick, isOpened, onClose, render } = this.props
+    const { preventBackdropClick, preventSideMargin, isOpened, onClose, render } = this.props
     return (
       <Mortal
         isOpened={isOpened}
@@ -105,7 +108,7 @@ export class Modal extends PureComponent<Props> {
         {(m, isVisible) => (
           <Container isVisible={isVisible}>
             <Backdrop op={m.opacity} onClick={preventBackdropClick ? undefined : onClose} />
-            <Wrapper op={m.opacity} offset={m.y}>
+            <Wrapper preventSideMargin={preventSideMargin} op={m.opacity} offset={m.y}>
               {render({ onClose })}
             </Wrapper>
           </Container>

src/components/base/Modal/stories.js

@@ -8,9 +8,11 @@ const stories = storiesOf('Modal', module)
 
 stories.add('basic', () => {
   const isOpened = boolean('isOpened', true)
+  const preventSideMargin = boolean('preventSideMargin', true)
   return (
     <Modal
       isOpened={isOpened}
+      preventSideMargin={preventSideMargin}
       render={({ onClose }) => (
         <Fragment>
           <ModalBody>Hey!</ModalBody>

src/styles/theme.js

@@ -1,6 +1,9 @@
 // @flow
 
 export default {
+  sizes: {
+    sideBarWidth: 250,
+  },
   colors: {
     black: '#000000',
     white: '#ffffff',