Merge pull request #386 from jorilallo/jori/css

CSS fixes

app/components/Button/Button.js

@@ -13,11 +13,11 @@ const RealButton = styled.button`
   color: ${color.white};
   border-radius: 4px;
   font-size: 15px;
-  min-width: 32px;
-  min-height: 32px;
+  height: 36px;
   text-decoration: none;
   flex-shrink: 0;
   outline: none;
+  cursor: pointer;
 
   &::-moz-focus-inner {
     padding: 0;
@@ -59,6 +59,7 @@ const RealButton = styled.button`
 
   &:disabled {
     background: ${color.slateLight};
+    cursor: default;
   }
 `;
 
@@ -71,23 +72,18 @@ const Label = styled.span`
 `;
 
 const Inner = styled.span`
-  padding: 4px 16px;
+  padding: 0 12px;
   display: flex;
   line-height: 28px;
   justify-content: center;
   align-items: center;
 
-  ${props => props.small && `
-    padding: 1px 10px;
-  `}
-
   ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
 `;
 
 export type Props = {
   type?: string,
   value?: string,
-  small?: boolean,
   icon?: React$Element<any>,
   className?: string,
   children?: React$Element<any>,
@@ -97,7 +93,6 @@ export default function Button({
   type = 'text',
   icon,
   children,
-  small,
   value,
   ...rest
 }: Props) {
@@ -106,7 +101,7 @@ export default function Button({
 
   return (
     <RealButton {...rest}>
-      <Inner hasIcon={hasIcon} small={small}>
+      <Inner hasIcon={hasIcon}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
       </Inner>

app/components/Input/Input.js

@@ -60,11 +60,11 @@ export type Props = {
   className?: string,
 };
 
-export default function Input({ type, label, ...rest }: Props) {
+export default function Input({ type, label, className, ...rest }: Props) {
   const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       <label>
         {label && <LabelText>{label}</LabelText>}
         <Outline>

app/components/Labeled/Labeled.js

@@ -12,12 +12,12 @@ type Props = {
 
 const Labeled = ({ label, children, ...props }: Props) => (
   <Flex column {...props}>
-    <Header>{label}</Header>
+    <Label>{label}</Label>
     {children}
   </Flex>
 );
 
-const Header = styled(Flex)`
+export const Label = styled(Flex)`
   margin-bottom: ${size.medium};  
   font-size: 13px;
   font-weight: 500;

app/components/Labeled/index.js

@@ -1,3 +1,4 @@
 // @flow
-import Labeled from './Labeled';
+import Labeled, { Label } from './Labeled';
 export default Labeled;
+export { Label };

app/components/Layout/components/SidebarLink.js

@@ -10,7 +10,7 @@ import CollapsedIcon from 'components/Icon/CollapsedIcon';
 
 const activeStyle = {
   color: color.black,
-  fontWeight: fontWeight.semiBold,
+  fontWeight: fontWeight.medium,
 };
 
 const StyledGoTo = styled(CollapsedIcon)`

app/components/Modal/Modal.js

@@ -16,6 +16,10 @@ type Props = {
 };
 
 injectGlobal`
+  .ReactModal__Overlay {
+    z-index: 100;
+  }
+
   .ReactModal__Body--open {
     overflow: hidden;
   }