Added stricter lint standard.

.jshintrc

@@ -0,0 +1,23 @@
+{
+  "curly": false,
+  "noempty": true,
+  "newcap": true,
+  "eqeqeq": true,
+  "eqnull": true,
+  "esnext": true,
+  "undef": true,
+  "unused": true,
+  "devel": true,
+  "node": true,
+  "browser": true,
+  "evil": false,
+  "latedef": true,
+  "nonew": true,
+  "trailing": true,
+  "immed": true,
+  "smarttabs": true,
+  "strict": false,
+  "globals": {
+    "define": true
+  }
+}

app/ContainerListItem.react.js

@@ -0,0 +1,84 @@
+var async = require('async');
+var _ = require('underscore');
+var $ = require('jquery');
+var React = require('react/addons');
+var Router = require('react-router');
+var Modal = require('react-bootstrap/Modal');
+var RetinaImage = require('react-retina-image');
+var ModalTrigger = require('react-bootstrap/ModalTrigger');
+var ContainerModal = require('./ContainerModal.react');
+var Header = require('./Header.react');
+var docker = require('./docker');
+
+var ContainerListItem = React.createClass({
+  componentWillMount: function () {
+    this._start = Date.now();
+  },
+  handleItemMouseEnter: function () {
+    var $action = $(this.getDOMNode()).find('.action');
+    $action.show();
+  },
+  handleItemMouseLeave: function () {
+    var $action = $(this.getDOMNode()).find('.action');
+    $action.hide();
+  },
+  render: function () {
+    var self = this;
+    var container = this.props.container;
+    var downloadingImage = null, downloading = false;
+    var env = container.Config.Env;
+    if (env.length) {
+      var obj = _.object(env.map(function (e) {
+        return e.split('=');
+      }));
+      if (obj.KITEMATIC_DOWNLOADING) {
+        downloading = true;
+      }
+      downloadingImage = obj.KITEMATIC_DOWNLOADING_IMAGE || null;
+    }
+
+    var imageName = downloadingImage || container.Config.Image;
+
+    // Synchronize all animations
+    var style = {
+      WebkitAnimationDelay: (self._start - Date.now()) + 'ms'
+    };
+
+    var state;
+    if (downloading) {
+      state = <div className="state state-downloading"><div style={style} className="downloading-arrow"></div></div>;
+    } else if (container.State.Running && !container.State.Paused) {
+      state = <div className="state state-running"><div style={style} className="runningwave"></div></div>;
+    } else if (container.State.Restarting) {
+      state = <div className="state state-restarting" style={style}></div>;
+    } else if (container.State.Paused) {
+      state = <div className="state state-paused"></div>;
+    } else if (container.State.ExitCode) {
+      // state = <div className="state state-error"></div>;
+      state = <div className="state state-stopped"></div>;
+    } else {
+      state = <div className="state state-stopped"></div>;
+    }
+
+    return (
+      <Router.Link key={container.Name} data-container={name} to="container" params={{name: container.Name}}>
+        <li onMouseEnter={self.handleItemMouseEnter} onMouseLeave={self.handleItemMouseLeave}>
+          {state}
+          <div className="info">
+            <div className="name">
+              {container.Name}
+            </div>
+            <div className="image">
+              {imageName}
+            </div>
+          </div>
+          <div className="action">
+            <span className="icon icon-delete-3 btn-delete"></span>
+          </div>
+        </li>
+      </Router.Link>
+    );
+  }
+});
+
+module.exports = ContainerListItem;

src/Boot2Docker.js

@@ -1,3 +1,4 @@
+var _ = require('underscore');
 var exec = require('exec');
 var path = require('path');
 var fs = require('fs');
@@ -54,7 +55,7 @@ var Boot2Docker = {
     return path.join(process.cwd(), 'resources', 'boot2docker-' + this.version());
   },
   exists: function (callback) {
-    cmdExec([Boot2Docker.command(), 'info'], function (err, out) {
+    cmdExec([Boot2Docker.command(), 'info'], function (err) {
       if (err) {
         callback(null, false);
       } else {
@@ -170,7 +171,7 @@ var Boot2Docker = {
     });
   },
   createScratchImage: function (callback) {
-    cmdExec([Boot2Docker.command(), 'ssh', 'tar cv --files-from /dev/null | docker import - scratch'], function (err, out) {
+    cmdExec([Boot2Docker.command(), 'ssh', 'tar cv --files-from /dev/null | docker import - scratch'], function (err) {
       callback(err);
     });
   },

src/ContainerDetails.react.js

@@ -4,18 +4,15 @@ var React = require('react/addons');
 var Router = require('react-router');
 var exec = require('exec');
 var path =  require('path');
-var assign =  require('object-assign');
 var remote = require('remote');
 var dialog = remote.require('dialog');
 var ContainerStore = require('./ContainerStore');
 var ContainerUtil = require('./ContainerUtil');
-var docker = require('./Docker');
 var boot2docker = require('./Boot2Docker');
 var ProgressBar = require('react-bootstrap/ProgressBar');
 var ContainerDetailsHeader = require('./ContainerDetailsHeader.react');
 var ContainerHome = require('./ContainerHome.react');
 
-
 var ContainerDetails = React.createClass({
   mixins: [Router.State, Router.Navigation],
   _oldHeight: 0,
@@ -121,6 +118,8 @@ var ContainerDetails = React.createClass({
   },
   handleView: function () {
     console.log('CLICKED');
+    console.log(this.state.ports);
+    console.log(this.state.defaultPort);
     if (this.state.defaultPort) {
       console.log(this.state.defaultPort);
       console.log(this.state.ports[this.state.defaultPort].url);
@@ -267,7 +266,7 @@ var ContainerDetails = React.createClass({
       disabledClass = 'disabled';
     }
 
-    var buttonClass = React.addons.classSet({
+    /*var buttonClass = React.addons.classSet({
       btn: true,
       'btn-action': true,
       'with-icon': true,
@@ -302,9 +301,9 @@ var ContainerDetails = React.createClass({
       'only-icon': true,
       'active': this.state.page === this.PAGE_SETTINGS,
       disabled: this.props.container.State.Downloading
-    });
+    });*/
 
-    var ports = _.map(_.pairs(self.state.ports), function (pair, index, list) {
+    var ports = _.map(_.pairs(self.state.ports), function (pair) {
       var key = pair[0];
       var val = pair[1];
       return (
@@ -427,7 +426,7 @@ var ContainerDetails = React.createClass({
       disabled: this.props.container.State.Downloading
     });
 
-    var tabPortsClasses = React.addons.classSet({
+    /*var tabPortsClasses = React.addons.classSet({
       'tab': true,
       'active': this.state.page === this.PAGE_PORTS,
       disabled: this.props.container.State.Downloading
@@ -437,7 +436,7 @@ var ContainerDetails = React.createClass({
       'tab': true,
       'active': this.state.page === this.PAGE_VOLUMES,
       disabled: this.props.container.State.Downloading
-    });
+    });*/
 
     var tabSettingsClasses = React.addons.classSet({
       'tab': true,
@@ -451,7 +450,7 @@ var ContainerDetails = React.createClass({
         <div className="details-subheader">
           <div className="details-header-actions">
             <div className="action">
-              <span className="icon icon-play-2 action-icon" onClick={this.handleView}></span>
+              <span className="icon icon-play-2 action-icon run-icon" onClick={this.handleView}></span>
               <span className="btn-label">Run</span>
             </div>
             <div className="action">

src/ContainerDetailsHeader.react.js

@@ -1,15 +1,4 @@
-var async = require('async');
-var _ = require('underscore');
-var $ = require('jquery');
 var React = require('react/addons');
-var Router = require('react-router');
-var Modal = require('react-bootstrap/Modal');
-var RetinaImage = require('react-retina-image');
-var ModalTrigger = require('react-bootstrap/ModalTrigger');
-var ContainerModal = require('./ContainerModal.react');
-var ContainerListItem = require('./ContainerListItem.react');
-var Header = require('./Header.react');
-var docker = require('./Docker');
 
 var ContainerDetailsHeader = React.createClass({
   render: function () {

src/ContainerHome.react.js

@@ -1,15 +1,4 @@
-var async = require('async');
-var _ = require('underscore');
-var $ = require('jquery');
 var React = require('react/addons');
-var Router = require('react-router');
-var Modal = require('react-bootstrap/Modal');
-var RetinaImage = require('react-retina-image');
-var ModalTrigger = require('react-bootstrap/ModalTrigger');
-var ContainerModal = require('./ContainerModal.react');
-var ContainerListItem = require('./ContainerListItem.react');
-var Header = require('./Header.react');
-var docker = require('./Docker');
 
 var ContainerHome = React.createClass({
   render: function () {

src/ContainerList.react.js

@@ -1,19 +1,8 @@
-var async = require('async');
-var _ = require('underscore');
-var $ = require('jquery');
 var React = require('react/addons');
-var Router = require('react-router');
-var Modal = require('react-bootstrap/Modal');
-var RetinaImage = require('react-retina-image');
-var ModalTrigger = require('react-bootstrap/ModalTrigger');
-var ContainerModal = require('./ContainerModal.react');
 var ContainerListItem = require('./ContainerListItem.react');
-var Header = require('./Header.react');
-var docker = require('./Docker');
 
 var ContainerList = React.createClass({
   render: function () {
-    var self = this;
     var containers = this.props.containers.map(function (container) {
       console.log(container);
       return (

src/ContainerListItem.react.js

@@ -1,16 +1,10 @@
-var async = require('async');
 var _ = require('underscore');
 var $ = require('jquery');
 var React = require('react/addons');
 var Router = require('react-router');
-var Modal = require('react-bootstrap/Modal');
-var RetinaImage = require('react-retina-image');
-var ModalTrigger = require('react-bootstrap/ModalTrigger');
-var ContainerModal = require('./ContainerModal.react');
-var Header = require('./Header.react');
-var docker = require('./docker');
 var remote = require('remote');
 var dialog = remote.require('dialog');
+var ContainerStore = require('./ContainerStore');
 
 var ContainerListItem = React.createClass({
   componentWillMount: function () {

src/ContainerModal.react.js

@@ -1,13 +1,9 @@
-var async = require('async');
 var $ = require('jquery');
 var assign = require('object-assign');
 var React = require('react/addons');
 var Modal = require('react-bootstrap').Modal;
 var OverlayTrigger = require('react-bootstrap');
 var Popover = require('react-bootstrap/Popover');
-var SplitButton = require('react-bootstrap/SplitButton');
-var MenuItem = require('react-bootstrap/MenuItem');
-
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
 var OverlayTrigger = require('react-bootstrap/OverlayTrigger');
@@ -81,20 +77,20 @@ var ContainerModal = React.createClass({
       }, 200);
     }
   },
-  handleClick: function (name, event) {
+  handleClick: function (name) {
-    ContainerStore.create(name, 'latest', function (err, containerName) {
+    ContainerStore.create(name, 'latest', function (err) {
       if (err) {
         throw err;
       }
       this.props.onRequestHide();
     }.bind(this));
   },
-  handleTagClick: function (tag, name, event) {
+  handleTagClick: function (tag, name) {
-    ContainerStore.create(name, tag, function (err, containerName) {
+    ContainerStore.create(name, tag, function () {
       this.props.onRequestHide();
     }.bind(this));
   },
-  handleDropdownClick: function (name, event) {
+  handleDropdownClick: function (name) {
     this.setState({
       active: name
     });
@@ -207,6 +203,7 @@ var ContainerModal = React.createClass({
     );
 
     var tagData = self.state.tags[this.state.active];
+    var tags;
     if (tagData) {
       var list = tagData.map(function (t) {
         return <li key={t.name} onClick={self.handleTagClick.bind(self, t.name, self.state.active)}>{t.name}</li>;

src/ContainerStore.js

@@ -4,14 +4,12 @@ var EventEmitter = require('events').EventEmitter;
 var async = require('async');
 var path = require('path');
 var assign = require('object-assign');
-var Stream = require('stream');
 var Convert = require('ansi-to-html');
 var docker = require('./Docker');
 var registry = require('./Registry');
 var ContainerUtil = require('./ContainerUtil');
 
 var convert = new Convert();
-
 var _recommended = [];
 var _containers = {};
 var _progress = {};
@@ -35,7 +33,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
             return;
           }
           stream.setEncoding('utf8');
-          stream.on('data', function (data) {});
+          stream.on('data', function () {});
           stream.on('end', function () {
             callback();
           });
@@ -120,8 +118,8 @@ var ContainerStore = assign(EventEmitter.prototype, {
     if (containerData.Config && containerData.Config.Image) {
       containerData.Image = containerData.Config.Image;
     }
-    existing.kill(function (err, data) {
+    existing.kill(function () {
-      existing.remove(function (err, data) {
+      existing.remove(function () {
         docker.client().getImage(containerData.Image).inspect(function (err, data) {
           var binds = [];
           if (data.Config.Volumes) {
@@ -170,7 +168,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         ],
         Cmd: 'placeholder',
         name: name
-      }, function (err, container) {
+      }, function (err) {
         if (err) {
           callback(err);
           return;
@@ -203,7 +201,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
     downloading.forEach(function (container) {
       docker.client().pull(container.KitematicDownloadingImage, function (err, stream) {
         stream.setEncoding('utf8');
-        stream.on('data', function (data) {});
+        stream.on('data', function () {});
         stream.on('end', function () {
           self._createContainer(container.Name, {Image: container.KitematicDownloadingImage}, function () {});
         });
@@ -259,7 +257,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
       this._resumePulling();
       this._startListeningToEvents();
     }.bind(this));
-    this.fetchRecommended(function (err) {
+    this.fetchRecommended(function () {
       this.emit(this.CLIENT_RECOMMENDED_EVENT);
     }.bind(this));
   },
@@ -280,7 +278,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         container.State.Downloading = !!env.KITEMATIC_DOWNLOADING;
         container.KitematicDownloadingImage = env.KITEMATIC_DOWNLOADING_IMAGE;
 
-        this.fetchLogs(container.Name, function (err) {
+        this.fetchLogs(container.Name, function () {
         }.bind(this));
 
         _containers[container.Name] = container;
@@ -299,7 +297,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         self.fetchContainer(container.Id, function (err) {
           callback(err);
         });
-      }, function (err, results) {
+      }, function (err) {
         callback(err);
       });
     });
@@ -308,11 +306,10 @@ var ContainerStore = assign(EventEmitter.prototype, {
     if (_recommended.length) {
      return;
    }
-    var self = this;
     $.ajax({
       url: 'https://kitematic.com/recommended.json',
       dataType: 'json',
-      success: function (res, status) {
+      success: function (res) {
         var recommended = res.recommended;
         async.map(recommended, function (repository, callback) {
           $.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
@@ -354,7 +351,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
       stream.on('data', function (buf) {
         // Every other message is a header
         if (index % 2 === 1) {
-          var time = buf.substr(0,buf.indexOf(' '));
+          //var time = buf.substr(0,buf.indexOf(' '));
           var msg = buf.substr(buf.indexOf(' ')+1);
           if (timeout) {
             clearTimeout(timeout);
@@ -393,7 +390,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
           _muted[containerName] = true;
           _progress[containerName] = 0;
           self._pullImage(repository, tag, function () {
-            self._createContainer(containerName, {Image: imageName}, function (err, container) {
+            self._createContainer(containerName, {Image: imageName}, function () {
               delete _progress[containerName];
               _muted[containerName] = false;
               self.emit(self.CLIENT_CONTAINER_EVENT, containerName);
@@ -406,7 +403,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         });
       } else {
         // If not then directly create the container
-        self._createContainer(containerName, {Image: imageName}, function (err, container) {
+        self._createContainer(containerName, {Image: imageName}, function () {
           self.emit(ContainerStore.CLIENT_CONTAINER_EVENT, containerName, 'create');
           callback(null, containerName);
         });
@@ -432,7 +429,6 @@ var ContainerStore = assign(EventEmitter.prototype, {
     });
   },
   remove: function (name, callback) {
-    var self = this;
     var container = docker.client().getContainer(name);
     if (_containers[name].State.Paused) {
       container.unpause(function (err) {

src/ContainerUtil.js

@@ -12,7 +12,7 @@ var ContainerUtil = {
       return splits;
     }));
   },
-  ports: function (container, callback) {
+  ports: function (container) {
     var res = {};
     var ip = docker.host;
     _.each(container.NetworkSettings.Ports, function (value, key) {

src/Containers.react.js

@@ -1,15 +1,11 @@
-var async = require('async');
-var _ = require('underscore');
-var $ = require('jquery');
 var React = require('react/addons');
 var Router = require('react-router');
-var RetinaImage = require('react-retina-image');
 var ModalTrigger = require('react-bootstrap/ModalTrigger');
 var ContainerModal = require('./ContainerModal.react');
 var ContainerStore = require('./ContainerStore');
 var ContainerList = require('./ContainerList.react');
 var Header = require('./Header.react');
-var docker = require('./Docker');
+
 var Containers = React.createClass({
   mixins: [Router.Navigation, Router.State],
   getInitialState: function () {

src/Header.react.js

@@ -35,7 +35,6 @@ var Header = React.createClass({
     this.update();
   },
   render: function () {
-    var buttons;
     if (this.state.fullscreen) {
       return (
         <div className="header no-drag">

src/Main.js

@@ -1,22 +1,9 @@
 var React = require('react');
-var Router = require('react-router');
-var RetinaImage = require('react-retina-image');
-var async = require('async');
 var docker = require('./Docker');
 var router = require('./router');
 var boot2docker = require('./boot2docker');
 var ContainerStore = require('./ContainerStore');
 var SetupStore = require('./ContainerStore');
-var Menu = require('./Menu');
-var remote = require('remote');
-var app = remote.require('app');
-var ipc = require('ipc');
-
-var Route = Router.Route;
-var NotFoundRoute = Router.NotFoundRoute;
-var DefaultRoute = Router.DefaultRoute;
-var Link = Router.Link;
-var RouteHandler = Router.RouteHandler;
 
 if (process.env.NODE_ENV === 'development') {
   var script = document.createElement('script');
@@ -27,7 +14,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 if (!window.location.hash.length || window.location.hash === '#/') {
-  SetupStore.run(function (err) {
+  SetupStore.run(function () {
     boot2docker.ip(function (err, ip) {
       if (err) console.log(err);
       docker.setHost(ip);

src/Menu.js

@@ -1,7 +1,6 @@
 var remote = require('remote');
 var app = remote.require('app');
 var Menu = remote.require('menu');
-var MenuItem = remote.require('menu-item');
 var BrowserWindow = remote.require('browser-window');
 var router = require('./Router');
 
@@ -136,7 +135,7 @@ var template = [
 },
 ];
 
-menu = Menu.buildFromTemplate(template);
+var menu = Menu.buildFromTemplate(template);
 Menu.setApplicationMenu(menu);
 
 module.exports = menu;

src/NoContainers.react.js

@@ -1,5 +1,4 @@
 var React = require('react/addons');
-var RetinaImage = require('react-retina-image');
 
 var NoContainers = React.createClass({
   render: function () {

src/Preferences.react.js

@@ -15,7 +15,7 @@ var Preferences = React.createClass({
       report_analytics: true
     }, data || {});
   },
-  handleChange: function (key, e) {
+  handleChange: function (key) {
     var change = {};
     change[key] = !this.state[key];
     console.log(change);

src/Registry.js

@@ -22,7 +22,7 @@ var Registry = {
       headers: {
         Authorization: 'Token ' + token
       },
-      success: function (layers, status, xhr) {
+      success: function (layers) {
         callback(null, layers);
       },
       error: function (err) {
@@ -36,7 +36,7 @@ var Registry = {
       headers: {
         Authorization: 'Token ' + token
       },
-      success: function (res, status, xhr) {
+      success: function (res) {
         callback(null, res);
       },
       error: function (err) {

src/Setup.react.js

@@ -1,12 +1,6 @@
 var React = require('react/addons');
 var Router = require('react-router');
 var Radial = require('./Radial.react.js');
-var async = require('async');
-var assign = require('object-assign');
-var fs = require('fs');
-var path = require('path');
-var virtualbox = require('./Virtualbox');
-var util = require('./Util');
 var SetupStore = require('./SetupStore');
 
 var Setup = React.createClass({
@@ -23,7 +17,7 @@ var Setup = React.createClass({
   componentDidMount: function () {
   },
   update: function () {
-    
+
   },
   render: function () {
     var radial;

src/SetupStore.js

@@ -59,7 +59,7 @@ var SetupStore = assign(EventEmitter.prototype, {
         }
         var iconPath = path.join(setupUtil.resourceDir(), 'kitematic.icns');
         setupUtil.isSudo(function (err, isSudo) {
-          sudoCmd = isSudo ? ['sudo'] : [path.join(setupUtil.resourceDir(), 'cocoasudo'), '--icon=' + iconPath, '--prompt=Kitematic requires administrative privileges to install VirtualBox and copy itself to the Applications folder.'];
+          var sudoCmd = isSudo ? ['sudo'] : [path.join(setupUtil.resourceDir(), 'cocoasudo'), '--icon=' + iconPath, '--prompt=Kitematic requires administrative privileges to install VirtualBox and copy itself to the Applications folder.'];
           sudoCmd.push.apply(sudoCmd, ['installer', '-pkg', '/Volumes/VirtualBox/VirtualBox.pkg', '-target', '/']);
           exec(sudoCmd, function (stderr, stdout, code) {
             if (code) {
@@ -105,7 +105,7 @@ var SetupStore = assign(EventEmitter.prototype, {
   },
   cleanupKitematicStep: {
     run: function (callback) {
-      virtualbox.vmdestroy('kitematic-vm', function (err, removed) {
+      virtualbox.vmdestroy('kitematic-vm', function (err) {
         if (err) {
           console.log(err);
         }
@@ -129,7 +129,7 @@ var SetupStore = assign(EventEmitter.prototype, {
           } else {
             boot2docker.isoVersion(function (err, version) {
               if (err || setupUtil.compareVersions(version, boot2docker.version()) < 0) {
-                boot2docker.stop(function(err) {
+                boot2docker.stop(function() {
                   boot2docker.upgrade(function (err) {
                     callback(err);
                   });
@@ -147,7 +147,7 @@ var SetupStore = assign(EventEmitter.prototype, {
   },
   startBoot2DockerStep: {
     run: function (callback) {
-      boot2docker.waitWhileStatus('saving', function (err) {
+      boot2docker.waitWhileStatus('saving', function () {
         boot2docker.status(function (err, status) {
           if (err) {callback(err); return;}
           if (status !== 'running') {

src/SetupUtil.js

@@ -6,7 +6,7 @@ var fs = require('fs');
 var exec = require('exec');
 
 var SetupUtil = {
-  supportDir: function (callback) {
+  supportDir: function () {
     var dirs = ['Library', 'Application\ Support', 'Kitematic'];
     var acc = process.env.HOME;
     dirs.forEach(function (d) {
@@ -17,7 +17,7 @@ var SetupUtil = {
     });
     return acc;
   },
-  resourceDir: function (callback) {
+  resourceDir: function () {
     return process.env.RESOURCES_PATH;
   },
   isSudo: function (callback) {

src/Virtualbox.js

@@ -1,8 +1,6 @@
 var fs = require('fs');
 var exec = require('exec');
-var path = require('path');
 var async = require('async');
-var util = require('./Util');
 
 var VirtualBox = {
   command: function () {
@@ -68,7 +66,7 @@ var VirtualBox = {
   },
   vmdestroy: function (name, callback) {
     var self = this;
-    this.vmstate(name, function (err, state) {
+    this.vmstate(name, function (err) {
       // No VM found
       if (err) { callback(null, false); return; }
       exec('/usr/bin/VBoxManage controlvm ' + name + ' acpipowerbutton', function (stderr, stdout, code) {

styles/containers.less

@@ -309,7 +309,7 @@
         position: relative;
         //border-top: 1px solid #EEE;
         border-bottom: 1px solid #DCE2E2;
-        background-color: #F9F9F9;
+        background-color: white;
         height: 57px;
         padding: 6px 10px 10px 24px;
         font-size: 13px;
@@ -341,13 +341,9 @@
               &.icon:before {
                 text-align: center;
               }
-              /*background: linear-gradient(-180deg, #24B8EB 4%, #24A3EB 100%);
-              -webkit-background-clip: text;
-              -webkit-text-fill-color: transparent;*/
               color: @gray-normal;
               font-size: 30px;
-              margin-right: 35px;
+              margin-right: 30px;
-              //color: @gray-darker;
               transition: all 0.25s;
               &:hover {
                 color: @brand-action;
@@ -355,12 +351,6 @@
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;*/
               }
-              &.view-icon {
-                position: relative;
-                top: 1px;
-                font-size: 35px;
-                //color: @gray-darkest;
-              }
             }
             .btn-label {
               position: relative;
@@ -380,18 +370,16 @@
           margin-top: 6px;
           .tab {
             margin-left: 16px;
-            padding: 3px 10px;
+            padding: 6px 10px;
-            transition: all 0.25s;
             font-weight: 400;
             &:hover {
-              color: @brand-action;
+              border-radius: 40px;
+              background-color: #F9F9F9;
             }
             &.active {
-              background-color: #D2EEF8;
-              background-color: @brand-action;
               border-radius: 40px;
-              color: #365B64;
               color: white;
+              background-image: linear-gradient(-180deg, #24B8EB 4%, #24A3EB 100%);
             }
           }
         }
@@ -403,7 +391,7 @@
         flex-direction: row;
         padding: 31px 24px 18px 24px;
         position: relative;
-        background-color: #F9F9F9;
+        background-color: white;
         height: 75px;
         h1 {
           margin: 0;