From 34fe1c85382bab8e31d85f6c82952f9a8a59b6c3 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 5 May 2021 18:22:22 -0400
Subject: [PATCH] A11y addon: improve alignment and styles

---
 addons/a11y/src/components/Report/Elements.tsx |  5 ++++-
 addons/a11y/src/components/Report/Item.tsx     |  6 +++++-
 addons/a11y/src/components/Tabs.tsx            | 13 ++++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
index 50e0d0779ca..b307ddab62d 100644
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@@ -24,7 +24,10 @@ const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   alignSelf: 'center',
   paddingRight: 15,
-  input: { margin: 0 },
+  input: {
+    margin: 0,
+    display: 'block',
+  },
 });
 
 interface ElementProps {
diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index c33058b4b44..815aa0a176b 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@@ -33,6 +33,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
 const HeaderBar = styled.div<{}>(({ theme }) => ({
   padding: theme.layoutMargin,
   paddingLeft: theme.layoutMargin - 3,
+  lineHeight: '20px',
   background: 'none',
   color: 'inherit',
   textAlign: 'left',
@@ -51,7 +52,10 @@ const HighlightToggleElement = styled.span({
   float: 'right',
   marginRight: 15,
   alignSelf: 'center',
-  input: { margin: 0 },
+  input: {
+    margin: 0,
+    display: 'block',
+  },
 });
 
 interface ItemProps {
diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx
index e8eb74df048..8a18b66d67c 100644
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@@ -18,17 +18,16 @@ const Container = styled.div({
 const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
   cursor: 'pointer',
   userSelect: 'none',
-  marginBottom: 3,
-  marginRight: 3,
   color: theme.color.dark,
 }));
 
-const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
+const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth, theme }) => {
   const maxWidthBeforeBreak = 450;
   return {
     cursor: 'pointer',
-    fontSize: '14px',
-    padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
+    fontSize: 13,
+    lineHeight: '20px',
+    padding: elementWidth > maxWidthBeforeBreak ? '10px 15px 10px 0' : '10px 0px 3px 15px',
     height: '40px',
     border: 'none',
     marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
@@ -36,12 +35,12 @@ const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) =>
     display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
     alignItems: 'center',
     width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
-    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
+    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : `1px solid ${theme.appBorderColor}`,
 
     input: {
       marginLeft: 10,
       marginRight: 0,
-      marginTop: 0,
+      marginTop: -1,
       marginBottom: 0,
     },
   };