clean up tabs component

1 files changed, 17 insertions, 27 deletions

diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index ece0db866..0a62fa334 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -15,6 +15,7 @@ const StyledTabList = styled(TabList)`
 `;
 
 const StyledTab = styled(Tab)`
+    background-color: ${props => props.theme.colors.secondary};
     height: 2.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
@@ -25,41 +26,30 @@ const StyledTab = styled(Tab)`
     &:not(:first-of-type) {
         margin-left: 0.25rem;
     }
-`;
-
-const Root =
-    styled.div <
-    { colors: any } >
-    `
-    ${StyledTab} {
-        background-color: ${props => props.theme.colors.secondary};
-        &[aria-selected="true"] {
-            background-color: ${colors.gray};
 
-        }
+    &[aria-selected='true'] {
+        background-color: ${colors.gray};
+    }
 
-        &[aria-selected="false"]:focus,
-        &[aria-selected="false"]:hover {
-            background-color: ${props => props.theme.colors.secondary_alt};
-            cursor: pointer;
-        }
+    &[aria-selected='false']:focus,
+    &[aria-selected='false']:hover {
+        background-color: ${props => props.theme.colors.secondary_alt};
+        cursor: pointer;
     }
 `;
 
 const Tabs: React.StatelessComponent<{}> = props => (
     <Breakout>
-        <Root>
-            <ReactTabs>
-                <StyledTabList>
-                    {React.Children.map(props.children, child => {
-                        const { title } = React.cloneElement(child as React.ReactElement<any>).props;
-                        return <StyledTab>{title}</StyledTab>;
-                    })}
-                </StyledTabList>
+        <ReactTabs>
+            <StyledTabList>
+                {React.Children.map(props.children, child => {
+                    const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+                    return <StyledTab>{title}</StyledTab>;
+                })}
+            </StyledTabList>
 
-                {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
-            </ReactTabs>
-        </Root>
+            {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+        </ReactTabs>
     </Breakout>
 );