reduce radio button size to 16px from 20px and set a margin-top to align with labels (#444)

Co-authored-by: Panos Christophides <[email protected]>

Author: christophidesp

src/components/radio-button/index.js

@@ -45,7 +45,7 @@ const RadioButton = ({
       <IconContainer
         background={radioStyles.containerColor}
         borderColor={radioStyles.borderColor}
-        margin={children || label ? [0, 2, 0, 0] : null}
+        margin={children || label ? [0.5, 2, 0, 0] : null}
       >
         {showIcon && <StyledIcon name="dot" color={radioStyles.dotColor} {...iconProps} />}
       </IconContainer>

src/components/radio-button/styled.js

@@ -35,8 +35,8 @@ export const IconContainer = styled.div`
   overflow: hidden;
   flex: 0 0 auto;
 
-  height: 20px;
-  width: 20px;
+  height: 16px;
+  width: 16px;
 
   box-sizing: border-box;
   border: 1px solid ${props => getColor(props.borderColor)(props)};
@@ -47,6 +47,6 @@ export const IconContainer = styled.div`
 `
 export const StyledIcon = styled(Icon)`
   fill: ${props => getColor(props.color)(props)};
-  height: 10px;
-  width: 10px;
+  height: 8px;
+  width: 8px;
 `