Update styles in a11y addon

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

@@ -10,6 +10,16 @@ import Elements from './Elements';
 
 const Wrapper = styled.div();
 
+const Icon = styled(Icons)(({ theme }) => ({
+  height: 10,
+  width: 10,
+  color: theme.color.mediumdark,
+  marginRight: '10px',
+  transition: 'transform 0.1s ease-in-out',
+  alignSelf: 'center',
+  display: 'inline-flex',
+}));
+
 const HeaderBar = styled.button(({ theme }) => ({
   padding: theme.layoutMargin,
   paddingLeft: theme.layoutMargin - 3,
@@ -53,14 +63,12 @@ class Item extends Component {
     return (
       <Wrapper>
         <HeaderBar onClick={this.onToggle}>
-          <Icons
+          <Icon
             icon="chevrondown"
             size={10}
             color="#9DA5AB"
             style={{
-              marginRight: '10px',
               transform: `rotate(${open ? 0 : -90}deg)`,
-              transition: 'transform 0.1s ease-in-out',
             }}
           />
           {item.description}

addons/a11y/src/components/Tabs.js

@@ -10,32 +10,32 @@ const Container = styled.div({
 });
 
 const List = styled.div(({ theme }) => ({
-  borderBottom: theme.mainBorder,
+  boxShadow: `${theme.color.border} 0 -1px 0 0 inset`,
+  background: '#f8f8fc',
   flexWrap: 'wrap',
   display: 'flex',
 }));
 
 const Item = styled.button(
-  ({ active }) =>
+  ({ active, theme }) =>
     active
       ? {
           opacity: 1,
-          fontWeight: 600,
+          borderBottom: `3px solid ${theme.color.secondary}`,
         }
       : {},
   ({ theme }) => ({
     textDecoration: 'none',
-    textTransform: 'uppercase',
     padding: '10px 15px',
-    letterSpacing: '1px',
     cursor: 'pointer',
-    fontWeight: 500,
-    opacity: 0.7,
+    fontWeight: `${theme.typography.weight.bold}`,
+    fontSize: `${theme.typography.size.s2 - 1}px`,
+    lineHeight: 1,
+    height: 40,
     border: 'none',
     borderTop: '3px solid transparent',
     borderBottom: '3px solid transparent',
-    background: 'none',
-    flex: 1,
+    background: 'transparent',
 
     '&:focus': {
       outline: '0 none',