Web: Components: fixed TabContainer styles

web/ASC.Web.Components/src/components/tabs-container/index.js

@@ -1,55 +1,50 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
 import { Text } from "../text";
 
-const TabsContainer = styled.div``;
-
 const NavItem = styled.div`
   position: relative;
   white-space: nowrap;
+  display: flex;
 `;
 
-const TitleStyle = css`
-  width: 80px;
+const Label = styled.div`
   height: 32px;
   border-radius: 16px;
-`;
-
-const Label = styled.label`
-  margin:0;
   min-width: 80px;
-  position: relative;
-  background-repeat: no-repeat;
-  p {text-align: center; margin-top: 6px;}
-  margin-right: 5px;
-  label {margin:0}
+  margin-right: 8px;
+  width: fit-content;
 
-  ${props => props.isDisabled ? `pointer-events: none;` : ``}
+  .title_style {
+    text-align: center;
+    margin: 7px 15px 7px 15px;
+  }
 
-  ${props => props.selected ?
-    `${TitleStyle}
-    cursor: default;
-    background-color: #265A8F;
-    p {color: #fff}` :
-    `
+  ${props => (props.isDisabled ? `pointer-events: none;` : ``)}
+
+  ${props =>
+    props.selected
+      ? `cursor: default
+         background-color: #265A8F
+         .title_style {
+           color: #fff
+          }`
+      : `
     &:hover{
-      ${TitleStyle}
       cursor: pointer;
       background-color: #F8F9F9;
-    }`
-  }
+    }`}
 
-  ${props => props.isDisabled && props.selected ?
-    `${TitleStyle} background-color: #A3A9AE;
-    p {color: #fff} ` : ``
-  }
+  ${props =>
+    props.isDisabled && props.selected
+      ? `background-color: #A3A9AE
+       .title_style {color: #fff}`
+      : ``}
 `;
 
 const BodyContainer = styled.div`
   margin: 24px 16px 0px 16px;
-
-  ${props => props.isDisabled ? `pointer-events: none;` : ``}
 `;
 
 class TabContainer extends Component {
@@ -72,30 +67,32 @@ class TabContainer extends Component {
 
   render() {
     //console.log('Tab container render');
+
+    const { isDisabled, children } = this.props;
     return (
-      <TabsContainer>
+      <>
         <NavItem>
-          {this.props.children.map((item, index) =>
+          {children.map((item, index) => (
             <Label
               onClick={this.titleClick.bind(this, index, item)}
               key={item.key}
               selected={this.state.activeTab === index}
-              isDisabled={this.props.isDisabled}
+              isDisabled={isDisabled}
             >
-              <Text.Body> {item.title} </Text.Body>
+              <Text.Body className="title_style" fontSize={13}>
+                {item.title}
+              </Text.Body>
             </Label>
-          )}
+          ))}
         </NavItem>
-        <BodyContainer> {this.props.children[this.state.activeTab].content} </BodyContainer>
-      </TabsContainer>
+        <BodyContainer>{children[this.state.activeTab].content}</BodyContainer>
+      </>
     );
   }
 }
 
 TabContainer.propTypes = {
-  children: PropTypes.PropTypes.arrayOf(
-    PropTypes.object.isRequired
-  ).isRequired,
+  children: PropTypes.PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
   isDisabled: PropTypes.bool,
   onSelect: PropTypes.func,
   selectedItem: PropTypes.number
@@ -103,6 +100,6 @@ TabContainer.propTypes = {
 
 TabContainer.defaultProps = {
   selectedItem: 0
-}
+};
 
-export default TabContainer;
+export default TabContainer;