tweaked button styles

app/components/Button/Button.js

@@ -7,7 +7,7 @@ import { darken, lighten } from 'polished';
 const RealButton = styled.button`
   display: inline-block;
   margin: 0;
-  padding: 4px 12px;
+  padding: 0;
   border: 0;
   background: ${color.primary};
   color: ${color.white};
@@ -59,6 +59,7 @@ const RealButton = styled.button`
 
   &:disabled {
     background: ${color.slateLight};
+    cursor: default;
   }
 `;
 
@@ -70,6 +71,16 @@ const Label = styled.span`
   ${props => props.hasIcon && 'padding-left: 2px;'}
 `;
 
+const Inner = styled.span`
+  padding: 0 12px;
+  display: flex;
+  line-height: 28px;
+  justify-content: center;
+  align-items: center;
+
+  ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
+`;
+
 export type Props = {
   type?: string,
   value?: string,
@@ -90,8 +101,10 @@ export default function Button({
 
   return (
     <RealButton {...rest}>
-      {hasIcon && icon}
-      {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+      <Inner hasIcon={hasIcon}>
+        {hasIcon && icon}
+        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+      </Inner>
     </RealButton>
   );
 }