fix(a11y): icon design, rule text align

addons/a11y/src/components/Report/Item.tsx

@@ -13,6 +13,7 @@ const Wrapper = styled.div();
 const Icon = styled<any, any>(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
+  minWidth: 10,
   color: theme.color.mediumdark,
   marginRight: '10px',
   transition: 'transform 0.1s ease-in-out',
@@ -28,6 +29,7 @@ const HeaderBar = styled.button(({ theme }) => ({
   border: 0,
   background: 'none',
   color: 'inherit',
+  textAlign: 'left',
 
   borderLeft: '3px solid transparent',
 

addons/a11y/src/components/Report/Rules.tsx

@@ -30,16 +30,14 @@ const Message = styled.div({
 });
 
 const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
-  height: '16px',
-  width: '16px',
-  borderRadius: '8px',
-  fontSize: '10px',
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
-  textAlign: 'center',
-  flex: '0 0 16px',
   color: passes ? impactColors.success : (impactColors as any)[impact],
+  '& > svg': {
+    height: '16px',
+    width: '16px',
+  },
 }));
 
 interface RuleProps {