From 54564946a350b4d1eecbfa0772f16b7c2e0fcc38 Mon Sep 17 00:00:00 2001
From: Arman Sargsyan <mail@arman.io>
Date: Sun, 10 Mar 2019 01:20:51 +0300
Subject: [PATCH] fix(a11y): icon design, rule text align

---
 addons/a11y/src/components/Report/Item.tsx  |  2 ++
 addons/a11y/src/components/Report/Rules.tsx | 10 ++++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index 6a493173a4d9..3be6015217cb 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/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',
 
diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
index 0a142eb98ee9..91fb964536e6 100644
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/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 {