IMPROVE styling ActionBar

lib/components/src/panel_actionbar/panel_actionbar.js

@@ -7,6 +7,7 @@ const Container = styled('ul')(({ theme }) => ({
   position: 'absolute',
   bottom: 0,
   right: 0,
+  maxWidth: '100%',
   display: 'flex',
   listStyle: 'none',
   margin: 0,
@@ -18,20 +19,35 @@ const Container = styled('ul')(({ theme }) => ({
   borderRadius: `${theme.mainBorderRadius}px 0 0 0`,
 }));
 
-export const ActionButton = styled('button')({
+export const ActionButton = styled('button')(({ theme }) => ({
   border: '0 none',
   display: 'block',
   background: 'none',
   padding: '0 10px',
-  textTransform: 'uppercase',
-  letterSpacing: 1,
-});
+
+  textTransform: 'inherit',
+  letterSpacing: 'inherit',
+  fontSize: 'inherit',
+
+  borderTop: '2px solid transparent',
+  borderBottom: '2px solid transparent',
+
+  '&:focus': {
+    borderBottom: `2px solid ${theme.highlightColor}`,
+    outline: '0 none',
+  },
+}));
 
 export const ActionItem = styled('li')(({ first, theme }) => ({
   display: 'flex',
+  position: 'relative',
   listStyle: 'none',
   padding: 0,
   height: 26,
+  fontSize: 11,
+  letterSpacing: 1,
+  textTransform: 'uppercase',
+
   borderLeft: first ? '0 none' : `1px solid ${theme.mainBorderColor}`,
 }));
 

lib/components/src/tabs/tabs.js

@@ -83,10 +83,12 @@ const TabButton = styled('button')(
 const Content = styled('div')(
   {
     display: 'block',
+    position: 'relative',
   },
   ({ absolute }) =>
     absolute
       ? {
+          position: 'relative',
           overflow: 'auto',
           flex: 1,
           width: '100%',
@@ -157,6 +159,10 @@ TabWrapper.propTypes = {
   render: PropTypes.func,
   children: PropTypes.node,
 };
+TabWrapper.defaultProps = {
+  render: undefined,
+  children: undefined,
+};
 
 Tabs.defaultProps = {
   panels: {},