diff --git a/ui/src/components/tabs/story.js b/ui/src/components/tabs/story.js
index f23bb076..939a55e6 100644
--- a/ui/src/components/tabs/story.js
+++ b/ui/src/components/tabs/story.js
@@ -6,15 +6,18 @@ const {
const Tabs = require('./');
const Tab = require('./tab');
+const Base = require('../base');
storiesOf('Tabs', module)
.add('Default', () => (
-
-
- Containers
-
-
- User
-
-
+
+
+
+ Containers
+
+
+ User
+
+
+
));
\ No newline at end of file
diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js
index f23a6d3d..ab417de1 100644
--- a/ui/src/components/tabs/tab/index.js
+++ b/ui/src/components/tabs/tab/index.js
@@ -10,7 +10,8 @@ const {
} = composers;
const {
- boxes
+ boxes,
+ colors
} = constants;
const {
@@ -44,9 +45,8 @@ const StyledRadio = styled.input`
&:checked {
& + .${classNames.label} {
- background: #FAFAFA;
+ background: ${colors.brandInactive};
border-bottom-width: 0;
- padding-bottom: ${remcalc(11)};
${moveZ({
amount: 1
@@ -60,16 +60,12 @@ const StyledRadio = styled.input`
`;
const StyledLabel = styled.label`
- background: #F2F2F2;
- border: ${boxes.border.unchecked};
- color: #646464;
+ background: transparent;
+ border: 1px solid #D8D8D8;
display: inline-block;
font-size: ${remcalc(20)};
- left: 1px;
- margin-left: -1px;
- margin-bottom: 0;
- padding: ${remcalc(10)};
- position: relative;
+ padding: ${remcalc('12 25')};
+ margin-right: 0.5rem;
vertical-align: bottom;
`;
@@ -82,14 +78,15 @@ const StyledPanel = styled.div`
`;
const StyledContent = styled.div`
- background: #FAFAFA;
+ background: ${colors.brandInactive};
border: ${boxes.border.unchecked};
box-sizing: border-box;
+ box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
display: block;
float: left;
font-size: ${remcalc(16)};
margin-top: ${remcalc(-9)};
- padding: ${remcalc('0 20')};
+ padding: ${remcalc('20 25')};
width: 100%;
`;