Merge pull request #436 from asaadmahmood/ui-improvements

PLT-5448 - Updating styling of server tabs

src/browser/components/TabBar.jsx

@@ -16,6 +16,7 @@ class TabBar extends React.Component {
         lineHeight: '20px',
         height: '19px',
         marginLeft: '5px',
+        marginTop: '6px',
         borderRadius: '50%'
       };
 
@@ -81,11 +82,26 @@ class TabBar extends React.Component {
   }
 
   renderAddTeamButton() {
+    var tabButton = {
+      border: 'none',
+      fontSize: '20px',
+      height: '35px',
+      padding: '0 0 4px 0',
+      width: '40px',
+      color: '#999',
+      fontWeight: 'bold',
+      margin: '6px 0 0',
+      borderRadius: '2px 2px 0 0',
+      outline: 'none'
+    };
+
     return (
       <Button
         id='tabBarAddNewTeam'
         onClick={this.props.onAddServer}
+        style={tabButton}
         bsStyle='tabButton'
+        title='Add new server'
       >
         {'+'}
       </Button>

src/browser/css/index.css

@@ -18,10 +18,10 @@
 }
 
 .btn-tabButton {
-  margin-top: 3px;
-  color: #333;
   background-color: #fff;
   border-color: #ccc;
+  color: #333;
+  margin-top: 3px;
 }
 
 .btn-tabButton:hover {
@@ -30,6 +30,19 @@
   border-color: #adadad;
 }
 
+.nav-tabs>li>a {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 2px 2px 0 0;
+  border: 1px solid #ddd;
+  color: #888;
+  height: 35px;
+  line-height: 32px;
+  margin-right: -1px;
+  margin-top: 7px;
+  padding: 0 15px;
+}
+
+
 .has-error .control-label,
 .has-error .help-block {
   color: #333;