Styling/theming tweaks, Typescript lint

EskelCz · Mar 24, 2019 · 1d90bd6 · 1d90bd6
1 parent 51a26d0
commit 1d90bd6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
@@ -1,7 +1,6 @@
-import React, { Component, Fragment, FunctionComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 
 import { styled } from '@storybook/theming';
-import memoize from 'memoizerific';
 
 import { NodeResult } from 'axe-core';
 import { Rules } from './Rules';
@@ -12,18 +11,19 @@ const Item = styled.li({
   fontWeight: 600,
 });
 
-const ItemTitle = styled.span({
-  borderBottom: '1px solid rgb(130, 130, 130)',
+const ItemTitle = styled.span(({ theme }) => ({
+  borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
   display: 'inline-block',
-  paddingBottom: '4px',
-  marginBottom: '4px',
-});
+  paddingBottom: '6px',
+  marginBottom: '6px',
+}));
 
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   float: 'right',
-  paddingRight: '10px',
+  paddingRight: '15px',
+  input: { margin: 0, },
 });
 
 interface ElementProps {

diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
@@ -12,9 +12,9 @@ import HighlightToggle from './HighlightToggle';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
-  borderBottom: `1px solid rgba(0,0,0,.05)`,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
   '&:hover': {
-    background: 'rgba(0,0,0,.05)',
+    background: theme.background.hoverable,
   },
 }));
 
@@ -50,6 +50,8 @@ const HighlightToggleElement = styled.span({
   float: 'right',
   marginRight: '15px',
   marginTop: '10px',
+
+  input: { margin: 0, },
 });
 
 interface ItemProps {
@@ -76,7 +78,6 @@ export class Item extends Component<ItemProps, ItemState> {
     const { item, passes, type } = this.props;
     const { open } = this.state;
     const highlightToggleId = `${type}-${item.id}`;
-    const highlightLabel = `Highlight`;
 
     return (
       <Fragment>

diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
 import { styled } from '@storybook/theming';
 import store, { clearElements } from '../redux-config';
@@ -19,27 +19,24 @@ const HighlightToggleLabel = styled.label(({ theme }) => ({
   cursor: 'pointer',
   userSelect: 'none',
   color: theme.color.dark,
-  paddingRight: '10px',
 }));
 
 const GlobalToggleWrapper = styled.div(({ theme }) => ({
-  float: 'right',
-  paddingRight: '5px',
-  textDecoration: 'none',
-  padding: '10px 15px',
+  padding: '10px 15px 10px 0',
   cursor: 'pointer',
   fontSize: theme.typography.size.s2 - 1,
-  lineHeight: 1,
   height: 40,
   border: 'none',
-  borderTop: '2px solid transparent',
-  borderBottom: '2px solid transparent',
-  background: 'transparent',
-}));
 
-const List = styled.div(({ theme }) => ({
-  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
-  background: 'rgba(0,0,0,.05)',
+  display: 'flex',
+  alignItems: 'center',
+
+  input: {
+    marginLeft: 10,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
 }));
 
 const Item = styled.button(
@@ -70,6 +67,18 @@ const Item = styled.button(
       : {}
 );
 
+const TabsWrapper = styled.div({});
+
+const List = styled.div(({ theme }) => ({
+  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
+  background: 'rgba(0,0,0,.05)',
+  display: 'flex',
+  justifyContent: 'space-between',
+  whiteSpace: 'nowrap',
+}));
+
+
+
 interface TabsProps {
   tabs: Array<{
     label: JSX.Element;
@@ -112,6 +121,7 @@ export class Tabs extends Component<TabsProps, TabsState> {
     return (
       <Container>
         <List>
+          <TabsWrapper>
           {tabs.map((tab, index) => (
             <Item
               key={index}
@@ -120,6 +130,7 @@ export class Tabs extends Component<TabsProps, TabsState> {
               {tab.label}
             </Item>
           ))}
+          </TabsWrapper>
           <GlobalToggleWrapper>
             <HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
             <HighlightToggle