add styles to button in WindowHeader

Author: arturbien

src/components/Button/Button.js

@@ -29,7 +29,7 @@ const commonButtonStyles = css`
   padding-top: ${({ active, isDisabled }) => active && !isDisabled && '2px'};
 `;
 
-const StyledButton = styled.button`
+export const StyledButton = styled.button`
   ${({ variant, theme, active, isDisabled, primary }) =>
     variant === 'flat'
       ? css`

src/components/Window/Window.js

@@ -41,9 +41,6 @@ const ResizeHandle = styled.span`
   `}
 `;
 
-// TODO how to pass event handlers to resize handler?
-// TODO how to pass refs to both Window component and DragHandle?
-
 const Window = ({ resizable, shadow, children, ...otherProps }) => (
   <StyledWindow shadow={shadow} {...otherProps}>
     {children}
@@ -60,7 +57,6 @@ Window.defaultProps = {
 Window.propTypes = {
   shadow: propTypes.bool,
   resizable: propTypes.bool,
-
   children: propTypes.node
 };
 

src/components/Window/Window.stories.js

@@ -28,9 +28,9 @@ storiesOf('Window', module)
         }}
       >
         <span>react95.exe</span>
-        <Button style={{ marginRight: 2, height: 25 }} size='sm' square>
+        <Button>
           <span style={{ fontWeight: 'bold', transform: 'translateY(-1px)' }}>
-            x
+            X
           </span>
         </Button>
       </WindowHeader>

src/components/WindowHeader/WindowHeader.js

@@ -2,11 +2,13 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled from 'styled-components';
+import { StyledButton } from '../Button/Button';
 
 const SlyledWindowHeader = styled.div`
-  height: 30px;
-  line-height: 30px;
+  height: 33px;
+  line-height: 33px;
   padding-left: 0.25rem;
+  padding-right: 3px;
   font-weight: bold;
 
   &[data-active='false'] {
@@ -21,6 +23,10 @@ const SlyledWindowHeader = styled.div`
     );
     color: ${({ theme }) => theme.textInvert};
   }
+  ${StyledButton} {
+    height: 27px;
+    width: 31px;
+  }
 `;
 // TODO - should we add some aria label indicating if window is currently active?
 const WindowHeader = ({ isActive, children, ...otherProps }) => (